uni-app开发总结

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

1、开发工具使用HBuilder  可以进行快捷打包运行

2、项目结构

common 是存放公共js和css的目录，大家可以把一些工具js或者公共的css放这里面
components是放组件的目录，我们所有的组件都可以放这里面，记住组件里面不能使用uni-app页面钩子函数
pages 是uni-app放页面的文件夹，我们每次在这里面新建一个页面，hbuilder X都会在pages.json里面配置好。
static 是存放字体或图片的文件夹，一些静态资源都可以放这里面  如果image标签想要引入本地文件，只能放到static里才能访问到
store 是vuex状态管理，因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了
subpages 是因为内容过多，分的包，这里面新建的页面pages.json里面不会自动生成对应配置项
unpackage 里面的打包后的东西，我们可以不用管，h5打包后会放在这个里面的dist/build/h5里面，
App.vue 可以说是入口文件，我们公共的css可以放这里面，应用启动需要做的事情也可以放这里面，但是这个里面是不能进行页面跳转的
main.js 是入口js文件，跟vue脚手架一样的，我们可以引入全局js，配置一些全局js函数等都可以在这里操作
manifest.json是uni-app的配置项，一般都是可视化配置，很少用到源码配置，大家基本看一看就知道了
pages.json 就是页面配置文件了，你写的每一个页面都要在这里面配置，每个页面一些的特殊配置项也是在这里面写
 

3、页面元素及API

页面dom元素和小程序类似，使用view而不是div，使用的一些组件也是基本和微信小程序类似，API靠近微信小程序规范，但需将前缀 wx 替换为 uni

4、生命周期

uni-app页面的生命周期和小程序生命周期基本一致，包括onLaunch、onLoad、onShow、onHide...但是这些生命周期只能在页面中使用，在组件中我们只能使用vue.js的生命周期cerated、mounted 等

5、运行平台判断

以h5平台和app平台为例，在html和css中判断方法

<!-- #ifdef H5  -->
		<!-- 在H5平台下要显示的内容 -->
<!-- #endif -->
<!-- #ifdef APP-PLUS   -->
		<!-- 在APP平台下要显示的内容 -->
<!-- #endif -->

在JS中的判断方法

// #ifdef H5
  console.log("只在H5端执行的代码")
//#endif
// #ifdef APP-PLUS
  console.log("只在APP端执行的代码")
//#endif

H5（H5端）、APP-PLUS（APP端）、MP-WEIXIN（微信小程序端）、MP-BAIDU（百度小程序）、MP-ALIPAY（支付宝小程序）、MP-TOUTIAO（今日头条小程序）、MP-QQ（QQ小程序）

6、支付功能

uni-app支持微信支付、支付宝支付功能，不同平台情况不同，在微信小程序总只支持微信支付，在今日头条小程序中只支持支付宝支付  APP和H5同时支持微信和支付宝支付，值得注意的是APP中实现在线支付功能，需要在manifest.json中先进行支付模配置

然后调用APP支付API

uni.requestPayment({
	provider: type,  // wxpay 或者是 alipay
	orderInfo: orderInfo, //wxpay: orderInfo是object对象，alipay: orderInfo是字符串
	success: (e) => {
					
	},
	fail: e => {
	}
})