跨端开发痛点送你一款Vue最流行的跨端框架uniapp

jiezi

5 年前

今天来聊一下前端必备技能——小程序开发。

从最早发布的微信小程序，到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ 小程序，还有最近发布的 360 小程序，面对这么多套的代码，开发者该如何开发呢？

当业务要求同时在不同的端都要展现时候，针对不同的端去编写多套代码的成本显然非常高。这时候只需编写一套代码，就能够适配多端的能力就显得尤为需要。

今天就来给大家介绍一款，使用 Vue 的跨端框架——uni-app

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，可编译到 iOS、Android、H5、以及各种小程序（微信 / 支付宝 / 百度 / 头条 /QQ/ 钉钉）等平台。

uni-app 在 开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本 等 6 大关键指标上拥有极强的竞争优势：

开发者 / 案例数量更多
跨端抹平度 / 扩展灵活性(通过条件编译，调用专有能力而不影响其他平台)
性能体验更优秀(App 端支持 weex 渲染，带来更流畅的用户体验。)
周边生态丰富(推出插件市场，能够提供较多的组件和模板，真正做到开箱即用)
学习成本低(采用 Vue.js 语法 + 小程序 API)
开发成本低(不止开发成本，招聘、管理、测试各方面成本都大幅下降。)

虽然不同端框架环境千变万化，无论各类 小程序 、Weex、React-Native、Flutter、 快应用 ，它们万变不离其宗的是MVVM 架构设计思想。uni-app希望既能用一套代码完成所有端需求，将相同的业务逻辑完成收敛到同一层系统里面，又不会因为项目的抽象一致导致可维护性变差。

通过 HBuilderX 可视化界面，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。

使用 Vue.js + 小程序 API，进行开发。

数据绑定及事件处理同 Vue.js 规范，同时补充了 App 及 页面的生命周期。
uni-app 帮我们把不同平台的 小程序 API 几乎都封装了，只需要将前缀替换为 uni 即可举例说明：

在微信中发送 request 请求：

wx.request({
  url: "https://www.example.com/request", // 仅为示例，并非真实接口地址
  success: res => {console.log(res.data);
  }
});

在 uni-app中发送 request 请求：

uni.request({
  url: "https://www.example.com/request", // 仅为示例，并非真实接口地址
  success: res => {console.log(res.data);
  }
});

了解微信小程序的你，是不是感觉很简单呢？无非就是把 wx 前缀换成了 uni 而已，而且 uni.request 是全端通用的 ajax 请求 API 哦，最大程度的降低开发者的学习成本。

每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view> 只会编译到微信小程序 </view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view> 只会编译到 app</view>
  <! -- #endif -->
</view>

uni-app 里根据编译配置不同，可以使用 weex 的组件，也可以使用小程序组件 (即uni-app 组件)。编写页面时页面后缀名为 .nvue (native vue 的缩写)

uni-app App 端内置 weex 渲染引擎，提供了原生渲染能力，让 uni-app 在 App 端有更好的表现。

nvue 相当于给 weex 补充了大量 uni-app 的组件和 api，以及丰富的 Plus API、Native.js、原生插件。了解更多 nvue

uni-ui是 DCloud 提供的一个跨端 ui 库，它是基于 vue 组件的、flex 布局的、无 dom 的 跨全端 ui 库。

web 开发中有的开发者习惯用一个 ui 库完成所有开发，但在 uni-app 体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。GitHub 地址：uni-ui

看到这里你是不是觉得特别心动了呢？别着急，让我们看一下 uni-app 的开发规范。

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见 uni-app 接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了 App 及页面的生命周期
为兼容多端运行，建议使用 flex 布局进行开发

关于各端的管理规则需要耐心学习

uni-app 并不难学，但我们注意到很多新人在适应各个平台的规则限制时很焦躁。

uni-app 跨了很多端，虽然代码层面可以开发一次，生成多端。但注意每个端，有每个端的管理规则，这与开发无关，但每个开发者仍然要耐心掌握这些规则限制。

比如 H5 端的浏览器有跨域限制；
比如微信小程序会强制要求 https 链接，并且所有要联网的服务器域名都要配到微信的白名单中；
比如 App 端，iOS 对隐私控制和虚拟支付控制非常严格；
比如 App 端，Android、国产 rom 各种兼容性差异，尤其是因为谷歌服务被墙，导致的 push、定位等开发混乱的坑；
如果你的 App 要使用三方 sdk，比如定位、地图、支付、推送 … 还要遵循他们的规则和限制；

uni-ui 对比其他框架主要有两个优势

如何在有限前端团队人数下搞定更多平台，是需要首要考虑的原因，跨端方面 uni-app 更成熟。
团队里熟悉 vue 技术栈的同学多一点，则使用 uni-app 内部培训时间短、风险低。

开发需要注意的点

注意各端的差异性，很多东西，h5 是对的，上真机就错了，真机好着的，换小程序就错了，不同小程序之间还有差异，总之就是考虑好不同的情况，重点是仔细阅读文档。
由于 uni-app 框架集成了 5 +API，一些需要原生功能 uniapp 也可以通过 5 +API 去进行实现。
很多的坑还是因为多端不兼容，除了写起来麻烦一点，基本上都还是有可以解决的策略。

关于 uni-app 的更多信息可以参考官方文档 uni-app – 多端开发框架，或者直接前往 GitHub 仓库 uni-app 查看 uni-app 文档及相关资料。欢迎前去 star 或是提 issue 哈。github 地址：https://github.com/dcloudio/uni-app/

PS：我现在在写一个 ui 库，接下来我应该会写一些如何从零实现一个 ui 库方面的文章，欢迎有这方面经验的小伙伴们相互交流一下。

跨端开发痛点送你一款Vue最流行的跨端框架uniapp

前言

uni-app 框架简介

开发工具

开发语言

如何解决跨端兼容问题

nvue 模式

官方 ui 库，uni-ui

uni-app 开发规范

总结