uni-app 使用前的调研和开发心得

背景

之前的工时系统是原生的小程序实现，由于产品逻辑需要优化，代码混乱又仅限微信平台使用，公司致力于想给工时系统重构后支持多平台，并对外开放使用，使之成为一款真正的商业产品。经过前期调研后，uni-app对于多平台的支持最好，且易于上手，于是采用该框架对工时系统进行改造。

uni-app介绍

uni，读 you ni，是统一的意思。很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。

DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。

2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。

在2015年9月，DCloud推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。

DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。

既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台差异。

这，就是uni-app的由来。

• 因为多年积累，所以DCloud拥有300多万开发者，并不意外

• 因为DCloud一直都有小程序的iOS、Android引擎，所以uni-app的App端和小程序端保持高度一致，并不意外

• 因为DCloud在引擎上的持续投入，所以uni-app的App端功能、性能比大多数小程序引擎都优秀，并不意外

• 因为DCloud对各家小程序太了解了，所以做好抹平各端差异的跨端框架，并不意外

现在，uni-app已经是业内最风靡的应用框架，支撑着6亿手机用户的庞大生态。

较其它跨平台框架的优势

• 跨端数量更多

• 平台能力不受限

• 性能体验更优秀

• 周边生态丰富

• 学习成本低

几大跨平台开发框架性能和兼容性对比：微信原生版、wepy版、mpvue版、taro版、uni-app版、chalemeon版

前置条件

基本上是 Vue 和 微信小程序 的结合，看了uni-app的介绍和背景，就知道为什么小程序的接口组件命名和uni-app几乎一样了

• 页面组件我们要遵循Vue 单文件组件 (SFC) 规范

• 组件标签靠近微信小程序规范

• 接口能力（JS API）靠近微信小程序规范

• 数据绑定及事件处理靠近 Vue.js 规范，同时补充了App及页面的生命周期

• 为兼容多端运行，建议使用flex布局进行开发

开发工具

HBuilderX （轻如编辑器，强如IDE），官方IDE下载地址

1. 可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置node ，内置浏览器及时预览，更多功能可通过插件实现

2. 如果你之前习惯了使用其它的如VS code、Sublime Text编辑器，在工具栏里可以选择预设快捷键方案切换里选择对应的工具类型，几乎无成本就上手了

3. 工具里内嵌了强大的代码块功能，通过预设的变量生成某一段代码，还支持自定义，可以通过自定义代码块教程学习如何生成你自己的代码块，可以节省很多的时间

4. 创建项目时可以选择你的应用类型，生成默认模版

5. 第一次运行时，在工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，首次需要配置微信开发者工具的安装路径，然后点击运行即可调起微信开发者工具（ 如果出现调不起来的情况，请到微信开发者工具设置菜单->安全设置里把服务端口开启 ）；新建项目目录不是选择uni-app的项目根目录，选择的是根目录下面的unpackage->dist->dev->mp-weixin，运行的是编译后的代码

6. 建议平时开发选择内嵌浏览器进行及时预览，修改及生效，还可以通过扫描地址栏上方的二维码在手机上预览（必须连的是同一个局域网），调试和浏览器一样打开审查元素

强大的开发者生态

uni-app拥有丰富的插件市场，这里都是开发者贡献的插件，让开发更高效，不必重复造轮子，当然你也可以为开源贡献参与其中，详情见插件开发指南，同时 兼容 NPM 包管理系统 uni-app完整支持 NPM ， 活跃的社区氛围，有问题或者交流可以去社区发帖

如何实现优雅的跨端

不同平台特有的API支持条件编译，在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码，uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现 。

条件编译是利用注释实现的，在不同语法里注释写法不一样：

js使用  // 注释

css 使用  /* 注释 */

vue/nvue 模板里使用  <!-- 注释 -->

uni-app也是支持钉钉小程序的，调试工具用的是支付宝开发者工具，在运行菜单里原本没有钉钉这一项，需要增加拓展

uni-app开发较原生开发对比

优势

1. 目录结构清晰，页面文件由原来的wxml，wxss，json，js四个文件变成现在的一个vue文件

2. 支持scss和less写法，通过它的变量、继承、嵌套、运算等特性和函数增加css开发效率，减少代码量

3. 在uni-app中可以通过vuex插件来全局管理数据

劣势

1. 编译调试比较麻烦，编译时间长，编译一次本地缓存数据被清除，需要登陆和缓存的过程对于调试增加了时间成本

2. 多平台发布需要多写一些条件编译代码，要了解各平台的差异性

3. 原生开发定义全局变量和方法可在app.js中直接定义，全局变量一般用globalData表示，uni-app中几种常见的实现方式有：

公用模块

定义一个公用的模块，用来组织和管理这些全局的变量，在需要的页面引入，一般放在根目录下common目录里，然后用的时候在页面中引入该模块，这种方式维护起来比较方便，但是用的时候每次都得引入

挂载到Vue.prototype

在main.js中挂载属性/方法

import req from './api/index'
import util from './utils/util'
Vue.prototype.api = 'http://uniapp.dcloud.io'
Vue.prototype.now = Date.now || function () {
  return new Date().getTime();
};
Vue.prototype.$api = req
Vue.prototype.$util = uti

引用的时候

<script>  
  export default {  
    data() {  
        return {};  
    },  
    onLoad(){
        console.log('now:' + this.now());
    },  
    methods: {
      getProjectWorktime(userId, workDay) {
    this.$api.wktime.getWktimeStatus(userId,
          {workDay: workDay}).then(res => {
            console.log(res)
          })
      }
    }
</script>

globalData定义全局变量

小程序中有个globalData概念，可以在 App 上声明全局变量。Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。

<script>  
  export default {  
    globalData: {  
        text: 'text'  
    }
  }  
</script>

在其它页面中取值的方式

getApp().globalData.text

uni-app的本地存储

uni.storage的键值对存储，这个是全端支持的。

uni-app的Storage在不同端的实现不同，uni.storage在app侧，映射为plus.storage；h5侧映射为localstorage；各个小程序平台映射为其自带的storage键值对存储：

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理

• App端为原生的plus.storage，无大小限制，不是缓存，持久化

• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。

• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。

• 百度、头条小程序文档未说明大小限制

常见的平台差异处理（目前仅对微信小程序和H5）

1. H5页面底部菜单是包含在页面高度内的，如果postion置为fixed的话， bottom: 0;  需要写成 bottom: var(--window-bottom);

2. 登陆逻辑需要用在模版里插入条件编译，逻辑里需要注入不同的登陆方法

<!-- #ifdef H5 -->
H5登陆
<!-- #endif -->
<!-- #ifndef H5 -->
其它平台登陆
<!-- #endif -->

1. 非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性，H5端为了隔离页面间的样式默认启用了 scoped

2. 在所有的tabbar页面跳转都要用navigateto,来确保tabbar的list不发生任何改变，而小程序不受影响（ 出现的异常是在h5中tabbar页面用redirect跳转到非tabbar页面，底部菜单仍存在 ）

发布注意事项

uni-app各端能运行的是编译后的代码，文件位于根目录下unpackage->dist->build/dev，build目录是发布的代码，dev是本地预览的代码

H5端发布：

1. 点击发行->网站-H5手机版，需要配置网站域名，编译到代码中解决接口请求跨域的问题

2. 根目录下manifest.json文件关于h5配置，注意选择路由模式，hash和history，运行的基础路径，就是域名解析对应的服务器上项目的目录

思考及感想

之前听过一个大佬的一句话：如果我只能给其他程序员一个建议，那就是编写小的代码块，你要多写小方法、小功能、小程序。写完不断思考如何精简你的代码，如何完善你的逻辑，只有基本功扎实了，你才能在大的系统和程序里游刃有余。