uni-app跨端开发框架介绍

uni-app

一套代码，多端运行

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

框架简介：

• 可编译到iOS、Android、H五、微信/支付宝/百度/小程序

• 将经常使用的组件和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');
 }
复制代码