uni-app一些目录结构、方法、生命周期、打包、微信小程序登录与支付

1、关于uniapp的目录结构

跟普通vue项目目录结构差不多,多了几个核心文件,manifest.json是配置应用名称、appid、logo、版本等打包信息用的,pages.json的作用是配置页面路径、页面窗口样式、tabBar、navigationBar等页面类信息

uni-app一些目录结构、方法、生命周期、打包、微信小程序登录与支付_第1张图片

 2、页面适配方面

uniapp页面像素单位使用的是rpx

3、uniapp有自己的一套ui组件、生命周期、全局方法。 

uni-app一些目录结构、方法、生命周期、打包、微信小程序登录与支付_第2张图片其中 onLoad(option)可以获取路由参数很常用,其他的详细信息见官网。

4、页面跳转

uni-app一些目录结构、方法、生命周期、打包、微信小程序登录与支付_第3张图片 

5、页面传参

在uniapp中,页面传参还有 globalData方式,首先在App.vue中定义 globalData:{参数},然后在其他页面通过getApp().globalData.参数名获取值,更新值直接getApp().globalData.参数名=重新赋值就行

6、关于打包

打包的话网上有很多教程,简单用语言描述一下就是:在HbuilderX里打开项目,点击manifest.json文件,查看项目基础配置,然后点击HbuilderX菜单栏上面的发行,选择相应类型的打包方式,这时候就会出现弹出框,我们需要在里面修改配置,设置证书等,最后点击打包,就完成了

7、uniapp微信小程序登录与支付

登录:通过uni.login获取code传给后端,后端返回token参数,使用uni.getUserProfile()方法去提醒用户进行授权,用来获取用户信息。

支付:在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付”项,配置一些像AppId或是支付完成后要返回的通用链接,调用 [uni.requestPayment(OBJECT)]发起支付,OBJECT参数中provider属性值固定为wxpay等,APP和微信支付传的参数都不太一样,参数如sign,signtype,appid等

8、uniapp跨平台开发底层实现极简解释

uniapp指定打包成某平台版本后,项目在打包进行中会进行编译解析,会把当前开发写的代码转化成能被指定平台解析的ast语法树(一个又一个细小节点组成的一层又一层的对象,由上而下包含项目编写的所有代码内容),AST语法树又被转化为相应平台的代码,如编译成vue的jsx语法,通过render函数渲染页面。

 

你可能感兴趣的:(uni-app,前端,vue.js)