浅析uniapp
前端跨平台框架
之uniapp⼊门浅析
  　技术的发展总⽇新⽉异，处在风⼝，前端技术的发展尤为迅速，跨平台的概念也在前端流⾏起来。从最早期PhoneGap、lonic、Cordova，到近年来的ReactNative、weex、flutter，前端开发者在跨平台⽅⾯的探索从未停⽌过。趋势使然，类似uniapp框架出现在前端技术圈是技术发展潮流下的必然产物。作者⾃⼰也对uniapp框架进⾏了探索和实践，下⾯从⼏个⽅⾯介绍这⼀框架及其⽤法，欢迎⼤家踊跃讨论
⼀、什么是 uni-app？
uni-app 这个框架是基于Vue.js开发的，通过uni-app可以开发出跨平台的产品，所以如果对vue有⼀定的了解，那么这套框架可以很快速的掌握，当然，如果你对⼩程序也了解的话，也能够迅速掌握的，因为Uni-App封装并且兼容了⼩程序的组件和api。开发者编写⼀套代码，可发布到iOS、Android、Web（响应式）、以及各种⼩程序（/⽀付宝/百度/头条/QQ/钉钉/淘宝）、快应⽤等多个平台。
手机上可以打html与css的app
⼆、
对⽐其他移动端跨平台框架（如Cordova/ReactNative/NativeJS），UniApp在跨端抹平度、扩展灵活性、性能体验、周边⽣态、开发成本等⼏个⽅⾯上拥有明显的优势。
（1）跨端数量多：⼀套代码，编译后可发布到iOS、Android、H5、⼩程序等多个平台，且跨端抹平度⾼，应⽤的显⽰效果接近⼀致，真正能落实到⽣产⼒。这⼀点是uniapp的最⼤优势，完胜其他跨平台框架。
（2）性能体验优秀：uniapp是体验更好的Hybrid框架，加载新页⾯速度更快。且App端⽀持weex原⽣渲染，可实现更流畅的动画效果。相⽐较⽽⾔，依赖于WebView的Cordova框架性能⽅⾯就有所⽋缺了。
（3）⽣态开放丰富：uniapp的插件市场，集成了近千余第三⽅插件，各种轮⼦拿来即⽤；同时，由于uniapp的接⼝API采⽤了⼩程序规范，⽣态的各种SDK可直接⽤于跨平台App。在这个⽅⾯作对⽐，React Native框架的社区活跃度和资料⽂档都较为有限。
（4）开发成本低：以前由N个平台开发⼈员（IOS/安卓/H5）完成的开发任务，现在采⽤前端通⽤技术栈实现，研发、维护、测试各环节的成本都⼤幅下降。
同时，HBuilderX⼯具搭配uniapp可以免终端调试，可视化创建项⽬、可视化安装组件和扩展编译器，研发⼈员的开发体验也变得更好，从⽽能够更⾼效地编写代码。
三、uniapp发展史
uni是统⼀的意思。
很多⼈以为⼩程序是先推出的，其实，DCloud才是这个⾏业的开创者。
DCloud于2012年开始研发⼩程序技术，优化webview的功能和性能，并加⼊W3C和HTML5中国产业联盟，推出了HBuilder开发⼯具，为后续产业化做准备。
2015年，DCloud正式商⽤了⾃⼰的⼩程序，产品名为“流应⽤”，它不是B/S模式的轻应⽤，⽽是能接近原⽣功能、性能的动态App，并且即点即⽤。
为将该技术发扬光⼤，DCloud将技术标准捐献给⼯信部旗下的HTML5中国产业联盟，并推进各家流量巨头接⼊该标准，开展⼩程序业务。随后DCloud推动⼤众点评、携程、京东、有道词典、唯品会等众多开发者为流应⽤平台提供应⽤。
在2015年9⽉，DCloud推进团队开展⼩程序业务，演⽰了流应⽤的秒开应⽤、扫码获取应⽤、分享链接获取应⽤等众多场景案例，以及分享了webview体验优化的经验。
团队经过分析，于2016年初决定上线⼩程序业务，但其没有接⼊联盟标准，⽽是订制了⾃⼰的标准。
DCloud持续在业内普及⼩程序理念，推进各⼤流量巨头，包括⼿机⼚商，陆续上线类似⼩程序/快应⽤等业务。
部分公司接⼊了联盟标准，但更多公司因利益纷争严重，标准难以统⼀。
技术是纯粹的，不应该因为商业利益⽽分裂。开发者⾯对如此多的私有标准不是⼀件正确的事情。
造成混乱的局⾯⾮DCloud所愿。于是就决定开发⼀个免费开源的框架。
既然各巨头⽆法在标准上达成⼀致，官⽅希望通过这个框架为开发者抹平各平台差异。这就是uni-app的由来。
四、功能框架
下⾯是uni-app功能框架图，图中直观的表现了uniapp出⾊的跨平台能⼒和各平台特⾊。不多说，直接上图：
从上⾯uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特⾊，可优雅的调⽤平台专有能⼒。⽤官⽅的话说就是：海纳百川、各取所长。
概念导⼊：
（1）什么是H5+？
HTML5plus Runtime，简称5+ Runtime，是运⾏于⼿机端的强化web引擎，除了⽀持标准HTML5外，还⽀持更多扩展的js api，使得js的能⼒不输于原⽣。5+ Runtime内置于HBuilder，在真机运⾏、打包时⾃动挂载。
业内之前有phonegap/Cordova⽅案，但是他们⾃带js api太少了，扩展api需要⽤原⽣语⾔开发，更致命的是这类⽅案的性能不⾜。
封装成跨平台的HTML5plus规范，并将规范公开于，不做⼚商私有API。包括⼆维码、摇⼀摇、语⾳输⼊、地图、⽀付、分享、⽂件系统、通讯录等常⽤API，可以⽅便简单的编写，并且可跨平台。
注意：
在html中使⽤plus的api，需要等待plus ready。⽽uni-app不需要等，可以直接使⽤。⽽且如果你调⽤plus ready，反⽽不会触发。
⼩程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调⽤ HTML5+ 的扩展规范时，需要注意使⽤条件编译。否则运⾏到h5、⼩程序等平台会出现 plus is not defined错误。
（2）什么是条件编译？
条件编译是⽤特殊的注释作为标记，在编译时根据这些特殊的注释，将注释⾥⾯的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
· #ifdef：if defined 仅在某平台存在
· #ifndef：if not defined 除了某平台均存在
· %PLATFORM%：平台名称
条件编译写法说明
#ifdef APP-PLUS
需条件编译的代码
#endif
仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif
除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码
#endif 在 H5 平台或⼩程序平台存在的代码（这⾥只有||，不可能出现&&，因为没有交集）
%PLATFORM% 可取值如下：
值平台
APP-PLUS App
APP-PLUS-NVUE或APP-NVUE App nvue
H5H5
MP-WEIXIN⼩程序
MP-ALIPAY⽀付宝⼩程序
MP-BAIDU百度⼩程序
MP-TOUTIAO字节跳动⼩程序
MP-QQ QQ⼩程序
MP-360360⼩程序
MP⼩程序/⽀付宝⼩程序/百度⼩程序/字节跳动⼩程序/QQ⼩程序/360⼩程序QUICKAPP-WEBVIEW快应⽤通⽤(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION快应⽤联盟
QUICKAPP-WEBVIEW-HUAWEI快应⽤华为
QUICKAPP-WEBVIEW-HUAWEI快应⽤华为
注意：
· 条件编译是利⽤注释实现的，在不同语法⾥注释写法不⼀样，js使⽤ // 注释、css 使⽤ /* 注释 */、vue/nvue 模板⾥使⽤ <!-- 注释 -->；
· 条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后⾯出了APP-NVUE ；// #ifdef  %PLATFORM%
平台特有的API实现
// #endif
（3）什么是nvue？
uni-app App端内置了⼀个基于 weex 改进的原⽣渲染引擎，提供了原⽣渲染能⼒。
在App端，如果使⽤vue页⾯，则使⽤webview渲染；如果使⽤nvue页⾯(native vue的缩写)，则使⽤原⽣渲染。⼀个App中可以同时使⽤两种页⾯，⽐如⾸页使⽤nvue，⼆级页使⽤vue页⾯。
注意：虽然nvue也可以多端编译，输出H5和⼩程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使⽤nvue。
（4）Uniapp编译模式是怎样的？
最初uni-app仅⽀持模板编译模式和⾃定义组件模式，在后来的升级中逐渐⽤V3编译模式取代，v3是针对App的改进，尤其是vue页⾯的改进。与其他平台⽆关。⽬前V3已成为默认的编译模式。此外uni-app还⽀持对nvue编译模式的选择，分为weex编译模式和uni-app编译模式，这⾥不做详细解读，有兴趣的同学可以⾃⾏学习。
五. 如何使⽤uni-app？
(1) 下载开发⼯具：HBuilderX
打开dcloud官⽹推荐直接下载App开发版本，可以免去后续配置及安装插件等的烦恼
(2) 安装并打开HBuilderX
之后，在点击⼯具栏⾥的⽂件 -> 新建 -> 项⽬
(3) 选择uni-app，输⼊⼯程名，如：uni-test，点击创建，成功创建 UniApp应⽤。点击模板⾥的 Hello uni-app 即可体验官⽅⽰例。
(4) 随着官⽅的不断迭代升级，现已⽀持创建多套模板，可以便捷的搭建项⽬框架，已内置⼤量常⽤组件，免去了搭建项⽬的⼤部分前
期⼯作，这点⾮常⽅便。如下是 uni ui项⽬模板的常见例⼦，供⼤家参考。
（4）创建DCloud appid（以后简称 appid）。appid是 DCloud 应⽤的唯⼀标识，在 DCloud 提供的所有服务中，都会以 appid 来标记⼀个应⽤。注意这和各家⼩程序的appid以及Apple的appid（其实就是iOS的包名）是两套体系。
l 登录，申请创建 uniapp、5+app 等类型应⽤的 appid；
l 在 HBuilderX登录的情况下，创建项⽬时，HBuilderX 也会⾃动联⽹⽣成 appid, 并将该 appid 保存在 manifest ⽂件中的 appid 字段；
（5）⼯程⽬录结构
（6）进⼊项⽬，点击⼯具栏的运⾏ -> 运⾏到浏览器/真机下运⾏/模拟器运⾏，也可以选择⼩程序在开发者⼯具⾥运⾏，如下是项⽬运
⾏的⽰例。
浏览器运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到浏览器 -> 选择浏览器，即可在浏览器⾥⾯体验uni-app 的 H5 版。
真机运⾏：连接⼿机，开启USB调试，进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 真机运⾏ -> 选择运⾏的设备，即可在该设备⾥⾯体验uni-app。
如⼿机⽆法识别，请点击菜单运⾏-运⾏到⼿机或模拟器-真机运⾏常见故障排查指南。注意开发App也需要安装开发者⼯具。
（7）
Unapp有两种发布形式：和。由于离线打包需要⼀定原⽣基础，且sdk不能随官⽅升级，实时更新，⼀般采⽤app-云端打包的形式。
在HBuilderX⼯具栏，点击发⾏，选择原⽣app-云端打包，如下图：
出现如下界⾯，点击打包即可。
uni-app ⽀持离线打包，在 HBuilderX 发⾏菜单⾥⽣成离线打包资源，然后参考离线打包⽂档操作，可以从HBuilderX的发⾏菜单⾥到⽂档链接，也可以直接访问：。
在HBuilderX⼯具栏，点击发⾏，选择本地打包，如下图，点击即可⽣成离线打包资源。
1. 在 manifest.json 的可视化界⾯，进⾏如下配置（发⾏在⽹站根⽬录可不配置应⽤基本路径），此时发⾏⽹站路径是
2. 在HBuilderX⼯具栏，点击发⾏，选择⽹站-H5⼿机版，如下图，点击即可⽣成 H5 的相关资源⽂件，保存于 unpackage ⽬录。
注意
l history 模式发⾏需要后台配置⽀持。
l 打包部署后，在服务器上开启 gzip 可以进⼀步压缩⽂件。
发布为⼩程序：
1. 申请⼩程序AppID，参考：。
2. 在HBuilderX中顶部菜单依次点击 "发⾏" => "⼩程序-"，输⼊⼩程序名称和appid点击发⾏即可在 unpackage/dist/build/mp-
weixin ⽣成⼩程序项⽬代码。
3. 在⼩程序开发者⼯具中，导⼊⽣成的⼩程序项⽬，测试项⽬代码运⾏正常后，点击“上传”按钮，之后按照 “提交审核” => “发
布” ⼩程序标准流程，逐步操作即可，详细查看：。
六、开发规范
（1）页⾯⽂件遵循Vue单页⾯组件规范，Vue中的结构依然采⽤三⼤顶级代码块：
（2）组件标签 VUE通⽤模板写法，编译后以IOS或Android原⽣UI控件渲染
（所以不能使⽤标准的HTML标签，JS对DOM操作也得尽量避免），⽰例：
（3）接⼝能⼒：基本遵循⼩程序规范，对于⼤部分接⼝地址前缀由wx修改为uni即可实现，也包括了uni特有的⼀些api，具体参考：
随着severless的发展，uniapp还提供了基于unicloud的云函数、云数据库、云存储和CDN⽅案，uniCloud 是 DCloud 联合阿⾥云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
此外，uniapp还提供了了很多
（4）样式控制：
uni-app ⽀持通⽤ css 单位包括 px；另外，针对屏幕宽度⾃适应的普遍需求，推出了响应式px的概念，最初，uniapp以upx为尺⼨单位，在框架的升级过程中，借鉴了⼩程序rpx的设计理念，转为rpx。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进⾏⾃适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页⾯元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换⾔之，页⾯元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
（5）uniapp开发与传统前端开发的异同点：
传统的h5只有1端，即浏览器。⽽uni-app可跨多端，虽仍属前端，与传统h5有不同。
⽹络模型的变化
以前⽹页⼤多是b/s，服务端代码混合在页⾯⾥；
现在是c/s，前后端分离，通过js api(类似ajax的quest)获取json数据，把数据绑定在界⾯上渲染。
⽂件类型变化
以前是.html⽂件，开发也是html，运⾏也是html。
现在是.vue⽂件，开发是vue，经过编译后，运⾏时已经变成了js⽂件。
现代前端开发，很少直接使⽤HTML，基本都是开发、编译、运⾏。所以uni-app有编译器、运⾏时的概念。
⽂件内代码架构的变化
以前⼀个html⼤节点，⾥⾯有script和style节点；
现在template是⼀级节点，⽤于写tag组件，script和style是并列的⼀级节点，也就是有3个⼀级节点。
外部⽂件引⽤⽅式变化
以前通过script src、link href引⼊外部的js和css；
现在是es6的写法，import引⼊外部的js模块(注意不是⽂件)或css
⽰例
var dateUtils = require('../../../common/util.js').dateUtils; //直接使⽤js模块的属性。在hello uni-app有⽰例
import * as echarts from '/components/echarts/echarts.simple.min.js'; //将js导⼊并重命名为echarts，然后使⽤echarts.来继续执⾏⽅法。在

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。