uniapp简介

什么是uniapp？

uniapp是一个基于vue.js开发所有前端应用的框架，我们通过编写一套代码，可以同时向多个平台发布。

功能框架：

多平台效果展示：

为什么需要uniapp？

因为在当前的跨平台开发中是存在以下3个问题：

1. 多端泛滥：跨平台开发中端太多了，用户被更多的平台分散，为了覆盖用户企业会消耗大量的运营成本。同时开发者的学习成本也会变得很高。
2. 体验不好：跨平台框架的体验并不好。
3. 生态不够丰富：开发者获取更多更好的SDK比较困难。

uniapp的优势？

1. 跨平台更多：能做到" 一套代码，多端发行 "。同时支持条件编译，在代码中可以对不同平台的代码做定制化开发操作。
2. 运行体验更好：组件，api和微信小程序一致，兼容weex原生渲染。
3. 通用技术栈，学习成本低：uniapp使用vue的语法，微信小程序的api，并且内嵌了mpvue框架。
4. 开放生态，组件更丰富：支持npm安装第三方包，支持微信小程序自定义组件及sdk，兼容mpvue组件及项目，App端支持和原生混合编码，并且具有自己的插件市场。

uniapp基础

开发软件

uniapp的开发软件需要工具：HbuilderX，内置了uniapp开发所需要的环境，无需配置node.js

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uniapp的项目运行详情可见官方文档：uniapp运行

uniapp的项目结构

uniapp的项目结构和普通的vue项目结构有所不同，具体结构如下：

├─uniCloud            云空间目录，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb
├─components          uni-app的公用组件，遵从vue组件规范
│ └─comp-a.vue        可复用组件a
├─hybrid              App端存放本地html文件的目录
├─platforms           存放各平台专用页面的目录
├─pages               业务页面文件存放的目录
│ ├─index
│ │ └─index.vue       index页面
│ └─list
│ └─list.vue          list页面
├─static              静态资源文件夹，用于存放图片，视频（规定静态资源只能放在static下面）
├─uni_modules         存放[uni_module](/uni_modules)规范的插件
├─wxcomponents        存放小程序组件的目录
├─main.js             Vue初始化入口文件
├─App.vue             应用配置，用来配置App全局样式以及监听
├─manifest.json       配置应用名称、appid、logo、版本等打包信息
└─pages.json          配置页面路由、导航条、选项卡等页面类信息

需要注意的点：

• 编译代码到所有平台的时候，static文件夹中的资源不会被编译，非static文件夹下面的文件被引用到的才会进行编译。
• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源不要放在 static 目录下，建议放在自建的 common 目录下。
• HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件

uniapp技术栈储备

• html
• css
• JavaScript
• vue
• 微信小程序
• uni-app，uni-ui，以及uniapp所提供的封装api
• moment.js
• 手势封装

uniapp运行原理

逻辑层和视图层分离，且非H5端通信有折损

uni-app 在非H5端运行时，从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑，也就是运行js代码，视图层负责页面渲染。在同一个vue页面里写js和css编译时就已经将它们拆分了。

逻辑层原理

逻辑层是运行在一个独立的jscore里的，它不依赖于本机的webview，所以一方面它没有浏览器兼容问题，可以在Android4.4上跑es6代码，另一方面，它无法运行window、document、navigator、localstorage等浏览器专用的js API。

jscore就是一个标准js引擎，标准js是可以正常运行的，比如if、for、各种字符串、日期处理等。js和浏览器的区别要注意区分开来。

• 所谓浏览器的js引擎，就是jscore或v8的基础上新增了一批浏览器专用API，比如dom；
• node.js引擎，则是v8基础上补充一些电脑专用API，比如本地io；
• 那么uni-app的App端和小程序端的js引擎，其实是在jscore上补充了一批手机端常用的JS API，比如扫码。

视图层详解

h5和小程序平台，以及app-vue，视图层是webview。而app-nvue的视图层是基于weex改造的原生渲染视图。

关于webview，在iOS上，只能使用iOS提供的Webview（默认是WKWebview）。它有一定的浏览器兼容问题，iOS版本不同，它的表现有细微差异。

Android上小程序大多自带了一个几十M的chromium webview，而App端没办法带这么大体积的三方包，所以App端默认使用了Android system webview，这个系统webview跟随手机不同而有差异。当然App端也支持使用腾讯X5引擎，此时可以在Android端统一视图层。

所以uni-app的js基本没有不同手机的兼容问题（因为js引擎自带了），而视图层的css，在app-vue上使用系统webview时会有手机浏览器的css兼容问题。此时或者不要用太新的css语法，或者集成腾讯x5引擎。

逻辑层和视图层分离的利与弊

逻辑层和视图层分离，好处是js运算不卡渲染，最简单直接的感受就是：窗体动画稳。

webview新窗体一边做进入动画，一边自身渲染，很容易卡动画。而uni-app则无需写预载代码，新窗体渲染快且动画稳定。

但是两层分离也带来一个坏处，这两层互相通信，其实是有损耗的。

iOS还好，但Android低端机上，每次通信都要耗时几十毫秒。平时看不出来影响，但有几个场景表现明显。

1. 连续高帧率绘制canvas动画，会发现还不如webview内部绘制流畅
2. 视图层滚动、跟手操作，不停反馈给逻辑层，js再处理逻辑并通知视图层做对应更新。此时会发现交互不跟手或卡

不管小程序还是app，不管app-vue还是app-nvue，都有这个两层通信损耗的问题。

uniapp的案例

• uniapp开发案例

uniapp选型评估

对比资料

• 多端开发框架对比横评

• 只做App，flutter、react native等App跨平台框架对比

• 只做小程序，原生wxml开发、wepy、mpvue、taro的对比

• uni-app和微信原生开发的详细比较评测

调研问题

uni-app 现有成功案例

uni-app是当今主流的开发框架，DCloud有900万开发者，uni统计手机端月活10亿，华为、阿里、腾讯、字节跳动、美团、京东、快手、vivo都在用

跨端是否会造成功能受限制

uni-app在跨平台的过程中，不牺牲平台特色，不限制平台的能力使用。

应用开发中，90%的常规开发，比如界面组件、联网等api，uni-app封装为可跨多端的API。

而各个端的特色功能，uni-app引入条件编译。可以优雅的在一个项目里调用不同平台的特色能力。比如push，微信小程序里不支持，但可以在App里使用，还有很多原生sdk，在App时难免涉及，这些都可以正常的在uni-app框架下使用。

uni-app 手机端用户体验

使用uni-app开发的微信小程序，因为智能的处理的数据的diff，比大多人手写的原生小程序的性能还好 uni-app打包成App后，支持webview渲染和weex原生渲染这2种引擎。

• webview渲染方式，架构和微信小程序一样。微信小程序的Hybrid应用框架是业内体验上的标杆，实践证明这种体验足以承载一线互联网开发商获得上亿用户。uni-app的App端体验同微信小程序，超过其他平台的小程序，超过一般的hybrid框架。
• 原生渲染方式，是DCloud改造了weex引擎，在原生渲染引擎上实现了uni-app的组件和API。达到更优秀的用户体验。

由于有丰富的插件市场，以及支持所有小程序SDK在App端的使用，使得uni-app拥有更庞大的应用生态。

uni-app 开发小程序的优势

比其他小程序框架或原生小程序开发更有优势：

1. uni-app无需追随微信升级，可不受限在条件编译里使用wx的现在或未来的所有api
2. uni-app的性能比一般人手写的微信原生代码性能更高。就像vue操作比一般人写js操作dom性能更高一样。底层自动diff差量更新数据，比手动setData性能更高。
3. uni-app是纯vue语法，不必另学一种dsl。开发不同项目时，思维不用切换
4. uni-app的组件、模板非常丰富，插件市场数千款插件。如富文本解析、图表、自定义下拉刷新等组件，uni-app版插件性能均超过了wxparse、wx-echart等微信小程序组件
5. HBuilderX比微信工具更强大，开发效率更高。哪怕使用vscode等工具，由于这些工具对vue的支持强于对wxml的支持，所以开发效果也会更高
6. 微信原生开发对webpack、预编译语言、工程流程管理很多功能都不支持，大公司很少用微信原生开发，都是在用框架来提升开发效率
7. uni-app支持双向数据绑定、vuex状态管理，比小程序原生开发方便的多
8. 迟早会有多端需求，使用uni-app再无后续顾虑
9. uni-app并非仅用于做跨端的，只用uni-app做小程序、只做H5、只做App的都可以。

uni-app 项目升级维护

uni-app是多端写在一个基础项目下，差异使用条件编译来管理。一套工程代码，升级时可多端同时更新。如果把不同端的项目分开，那么维护升级时非常麻烦，无法方便同步升级。

uni-app 学习成本以及技术栈

uni-app简单来说是 vue的语法 + 小程序的api。它遵循Vue.js语法规范，组件和API遵循微信小程序命名，这些都属于通用技术栈，uni-app没有太多额外学习成本。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app。不用掌握vue的全部，只需了解vue基础语法、虚拟dom、数据绑定、组件、vuex，其他如路由、loader 不用学，cli、node.js、webpack也不需要学。

uni-app 的开发体验

• 内置了webpack
• NPM 包管理系统，详见参考
• es6+ 语法（发布时会自动编译为es5），详见参考
• 各种预处理器（less、scss、stylus、typescript）
• uni-app的官方ide：HBuilderX，在vue、json、markdown、代码提示、操作效率上，有非常明显的优势，可帮助开发者大幅提高工作效率
• uni-app同时也提供了cli方式，可使用其他开发工具如vscode开发，当然开发效率不如HBuilderX。对比详见ask.dcloud.net.cn/article/354…

uni-app 支持的最低手机版本

Android4.4、iOS9是官方会保障兼容的。