想跨端开发小程序?这个最流行的跨端框架一定要学习!
从最早发布的微信小程序,到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢?
当业务要求同时在不同的端都要展现时候,针对不同的端去编写多套代码的成本显然非常高。这时候只需编写一套代码,就能够适配多端的能力就显得尤为需要。
今天就来给大家介绍一款,使用Vue
的跨端框架——uni-app
1
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
希望既能用一套代码完成所有端需求,将相同的业务逻辑完成收敛到同一层系统里面,又不会因为项目的抽象一致导致可维护性变差。
2
开发工具
通过 HBuilderX 可视化界面, HBuilderX 内置相关环境,开箱即用,无需配置 nodejs。
开发语言
使用Vue.js + 小程序 API,进行开发。
- 数据绑定及事件处理同
Vue.js
规范,同时补充了App
及页面的生命周期
。 -
uni-app
帮我们把不同平台的小程序API
几乎都封装了 ,只需要将前缀替换为uni
即可 举例说明:
在微信中发送 request
请求:
在 uni-app
中发送 request
请求:
了解微信小程序的你,是不是感觉很简单呢?无非就是把 wx
前缀 换成了 uni
而已,而且uni.request
是全端通用的 ajax
请求 API
哦,最大程度的降低开发者的学习成本。
3
如何解决跨端兼容问题
每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
uni-app
提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。
4
nvue 模式
uni-app
里根据编译配置不同,可以使用 weex
的组件,也可以使用小程序组件(即uni-app
组件)。编写页面时页面后缀名为 .nvue
(native vue 的缩写)
uni-app
App 端内置 weex
渲染引擎,提供了原生渲染能力,让uni-app在App端有更好的表现。
nvue 相当于给 weex
补充了大量 uni-app
的组件和 api,以及丰富的 Plus API
、Native.js
、原生插件。
5
官方 ui 库,uni-ui
uni-ui
是DCloud
提供的一个跨端ui库,它是基于vue
组件的、flex
布局的、无 dom
的跨全端 ui
库。
web 开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app
体系中,推荐开发者首先使用性能更高的基础组件,然后按需引入必要的扩展组件。
看到这里你是不是觉得特别心动了呢?别着急,让我们看一下uni-app
的开发规范。
6
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去进行实现。
- 很多的坑还是因为多端不兼容,除了写起来麻烦一点,基本上都还是有可以解决的策略。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 爬虫进阶必备 | 某直播数据分析平台加密参数 sign 分析
- Python 爬虫进阶必备 | 某指数分析平台解密逻辑分析
- SpringBoot开发秘籍 - 事件异步处理
- Hive on Spark参数调优姿势小结
- 想跨端开发小程序?这个最流行的跨端框架一定要学习!
- 1分钟搞定 Nginx 版本的平滑升级与回滚
- 详解:如何在uni-app中选择一个合适的UI组件库
- Python处理HTTP请求之requests指北
- 习题 3: 数字和数学计算
- Python桌面图形程序美化的方法论
- Windows 入侵痕迹清理技巧
- Linux 入侵痕迹清理技巧
- 面经手册 · 第10篇《扫盲java.util.Collections工具包,学习排序、二分、洗牌、旋转算法》
- 一次代码评审,差点过不了试用期!
- 利用ELK分析Nginx日志生产实战(高清多图)