uni-app 使用vue的语法+小程序的标签和API。
特征
1.跨平台更多（一套代码，多段发行）
2.体验更好（组件、api与维修小程序一致，兼容weex原生渲染）
3.通用技术栈（vue语法、微信小程序api、内嵌mpvue）
4.开发生态，组件更丰富（支持通过npm安装第三方包、支持微信小程序自定义组件及sdk、兼容mpvue组件及项目、app端支持和原生混合编码、DCloud将发布插件市场）
一.开发规范
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
1、页面文件遵循 Vue 单文件组件 (SFC) 规范
2、组件标签靠近小程序规范，详见uni-app 组件规范
3、接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
4、数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
5、为兼容多端运行，建议使用flex布局进行开发
二.目录结构
三.生命周期
1、应用生命周期
注意
- 应用生命周期仅可在
App.vue中监听，在其它页面监听无效。 - onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942
2、页面生命周期
四.路由
1、路由跳转
uni-app 有两种路由跳转方式：使用navigator组件跳转、调用API（uninavigateTo(OBJECT)/uni.redirectTo(OBJECT)/uni.reLaunch(OBJECT)/uni.switchTab(OBJECT)/uni.navigateBack(OBJECT)）跳转。
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
</navigator>
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
注意：uni.navigateTo 无法跳转到页面的情况下，一般是因为该链接地址在tabBar里面，所以不能用uni.navigateTo，而是uni.switchTab
五.判断平台
1、条件编辑
①api
// #ifdef H5 || APP-PLUS
该代码仅出现在H5和 5+App的情况
// #endif
// #ifndef H5
该代码不会出现在H5的情况
// #endif
②、组件
<!-- #ifdef H5-->
<view>显示</view>
<!-- #endif-->
<!-- #ifdef MP-->
<view>微信小程序</view>
<!-- #endif-->
③、样式
/* #ifdef H5 */
.wx-color{
color:#f00;
}
/* #endif */
view{
/* #ifdef H5 */
color:#f00;
/* #endif */
}
2、运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
六、页面样式与布局
1、尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx。
750 * 元素在设计稿中的宽度 / 设计稿基准宽度(若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx)
App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了
2、样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
@import "../../common/uni.css";
3、内联样式
在 uni-app 中不能使用 * 选择器。
<view :style="{color:color}" /> <view class="normal_view" />
4、Flex布局
为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的flex教程等。
5、背景图片
- 支持 base64 格式图片。
- 支持网络路径图片。
- 使用本地路径背景图片需注意：
- 图片小于 40kb，
uni-app会自动将其转化为 base64 格式； - 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
- 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）
- 图片小于 40kb，
.test2 {
background-image: url('~@/static/logo.png');
}
6、字体图标
①支持 base64 格式字体图标。
②支持网络路径字体图标。
③网络路径必须加协议头 https。
④从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
⑤uni-app 本地路径图标字体支持情况：
字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
七.全部变量
小程序有globalData机制，这套机制在uni-app里也可以使用，全端通用。
以下是 App.vue 中定义globalData的相关配置：
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
js中操作globalData的方式如下： getApp().globalData.text = 'test'
如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值
八.配置
注意：
(1).uni-app自定义导航栏
pages.json里面app-plus，目前只有app端、H5有用。小程序没作用
2.小程序组件支持
此文档要求开发者对各端小程序的自定义组件有一定了解，没接触过小程序自定义组件的可以参考：
3.api
①模态框 uni.showToast
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
九.第三方插件使用
第三方插件基本做不到跨端兼容的，所以推荐上插件市场。如果要使用可以查看官网：
十.hbuildex的夸端使用
h5：运行-运行到浏览器-Chrome
小程序：运行-运行到小程序模拟器-微信开发者工具
十一.问题
1.设置每个页面的颜色，加上scoped 小程序这边就不行了,只有去掉scoped，才可以
2.uni.uploadFile 上传图片到服务器，小程序可以，但是h5不行，
应该是 小程序的默认发送格式 跟 h5 的发送格式不一样， 后端没做兼容处理。。暂时没处理，待验证
3.uni-app取消原生头部导航栏
1.取消uni-app原生头部导航栏（全局取消）
所有页面都去掉：在pages.json里
"globalStyle": {
"navigationStyle":"custom"
}
2.单页面取消
新版小程序支持page->style配置navigationStyle为custom =>网址 https://uniapp.dcloud.io/collocation/pages?id=style
app和h5配置titleNView为false =>网址 https://uniapp.dcloud.io/collocation/pages?id=app-plus
如：
{
“page”:"pages/index/index",
"style":{
"navigationStyle":"custom",
"app-plus":{
"titleNView":false
}
}
}