uni-app跨端开发框架介绍

uni-app

一套代码，多端运行

使用vue的语法 + 微信小程序的标签和API的跨平台前端框架

框架简介：

可编译到iOS、Android、H5、微信/支付宝/百度/小程序
将常用的组件和API进行了跨平台的封装，可覆盖大部分的业务需求
平台能力不受限：通过条件编译+平台特有的API调用，可以优雅地在为某平台写个性化代码,调用专有能力而不影响其他平台。
插件丰富，推出插件市场，能够提供较多的组件和模板

开发工具：

HBuilderX : 内置uni-app编译器
微信/百度/支付宝小程序开发工具：编译调试小程序
安卓/IPHONE手机+数据线

开发规范：

页面文件遵循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
使用本地路径背景图片需注意：
1. 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
2. 图片大于等于 40kb，需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
3. 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

.test2 {
     background-image: url('~@/static/logo.png');
 }