uni-app
一套代码，多端运行
使用vue的语法 + 微信小程序的标签和API的跨平台前端框架
框架简介：
-
可编译到iOS、Android、H5、微信/支付宝/百度/小程序
-
将常用的组件和API进行了跨平台的封装，可覆盖大部分的业务需求
-
平台能力不受限：通过条件编译+平台特有的API调用，可以优雅地在为某平台写个性化代码,调用专有能力而不影响其他平台。
-
插件丰富，推出插件市场，能够提供较多的组件和模板
开发工具：
开发规范：
-
页面文件遵循Vue 单文件组件 (SFC) 规范
-
组件标签靠近小程序规范
-
使用upx作为默认的尺寸单位，可根据屏幕宽度进行自适应
-
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni
-
数据绑定及事件处理同 Vue.js 规范，补充了App及页面的生命周期
-
为兼容多端运行，建议使用 Flex 布局进行开发
-
优先使用基础组件，不满足的地方，用扩展组件补充，不要把整个项目全部都构建在某个ui框架下。
-
需要了解的原生安卓、IOS开发流程
开发流程：
1，创建uni-app
1.1 目录结构
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路由、导航条、选项卡等页面类信息
复制代码
2.运行uni-app （浏览器、真机、小程序）
（第一次运行小程序时需要在mainfest.json配置小程序的appid）
运行模式编译出的各平台代码存放于根目录下的 /dist/dev/目录
连接到ios设备经常失败，最好是安装一个【爱思助手】
第一次运行小程序时需要在 mainfest.json配置小程序的 appid
3.发布uni-app
-
发布模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录
-
发布到每个小程序时都必须填写对应的名称和 appid
-
发布到 H5 需要在 在 manifest.json 的可视化界面，进行应用基础路径的配置 （比如配置了 /test/ ,此时发行网站路径是 www.XXX.com/test/ ）
-
发布打包原生APP，需要填写ios或安卓开发者证书等信息
点击查看具体详情 uniapp.dcloud.io/quickstart
小知识点：
条件编译：一个项目里可以分别调用不同平台的特色功能
<view class="content">
<! -- #ifdef MP-WEIXIN -->
<view>只会编译到微信小程序</view>
<! -- #endif -->
<! -- #ifdef APP-PLUS -->
<view>只会编译到app</view>
<! -- #endif -->
</view>
复制代码
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
复制代码
scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。 使用 scroll-view 会和原生下拉刷新造成冲突，所以在使用 scroll-view 的地方不建议使用下拉刷新，也不建议监听 onPullDownRefresh 事件。
若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view 。
使用罗盘、地理位置、加速计等相关接口需要使用https协议，本地预览（localhost）可以使用 http 协议。
PC 端 Chrome 浏览器模拟器设备测试的时候，获取位置 API 需要连接谷歌服务器。
组件内（页面除外）不支持onLoad生命周期。
uni-app 可以根据 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具
微信、百度小程序和App去除原生导航栏
{
"path": "pages/log/log",
"style": {
"navigationBarTitleText": "hello",
"navigationStyle": "custom", //小程序去除原生导航
"app-plus": {
"titleNView": false // app去除原生导航
}
}
}
复制代码
建议性：
-
推荐的开发流程是在PC的Chrome下开发测试，基本完成后运行到微信工具测试，最后再上真机运行看兼容性问题。
-
使用 uni-app 的 onReady代替 vue 的 mounted。
-
使用 uni-app 的 onLoad 代替 vue 的 created。
-
使用代码块直接创建组件模板，比如快速生成新闻列表 ulistMedia @tap表示绑定点击事件。因为是在移动端，避免用@click，因为它在移动端会有大约300ms的延迟
填坑之路：
-
支付宝/百度/字节跳动小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开
-
当设置 "navigationStyle":"custom" 后可以使用固定一个高度为 var(--status-bar-height) 的 view 放在页面顶部，使得状态栏不遮盖内容里
-
不能使用 v-html 指令，可以使用rich-text组件代替。或者第三方组件wxparse
-
使用本地路径背景图片需注意：
-
图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
-
图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
-
本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
.test2 {
background-image: url('~@/static/logo.png');
}
