框架 | 技术系 | 优势 | github star | 生态 | 学习成本 | 开发成本 | 应用场景 |
uni-app | Vue系 | 一套代码多端、运行(微信/支付宝/百度/头条小程序,H5/App) | vue 2020.08.17 => 179K 2019.07.25 => 24.6K 2020.08.06 => 10.035K 2020.08.17 => 24.6K | uni-ui+插件市场、很快拼轮子 | 低 | 低 | 跨平台案例多 |
Vue栈、 微信小程序 | Vue系、微信定义语法(wxml、wxs,wx:if) | 多端开发,多端维护 | - | vue生态库, vant小程序版等框架 | 中 | 高 | 丰富 |
taro | React系 | 一套代码多端、运行(微信/支付宝/百度/头条小程序,H5/App) | react 2020.08.17 => 154K 2019.07.25 => 20.482K 2020.08.06 => 26.5K 2020.08.17 => 26.7K | taro-ui,awesome三方组件少 | 低 | 低 | 小程序案例居多,其他各端一般 |
使用跨端方案的顾虑
1 . 怕使用uni-app后,微信小程序/H5里有的功能无法实现,受制于uni-app的更新?
• uni-app不限制底层API 调用,各进行各端扩展;例如:在小程序端,支持直接进行扩展,编写微信原生代码。
2. 跨端灵活性?(兼容性模块会有相关补充)
全面可条件编译的,目录、文件、配置、组件、js、css,所有一切均可通过ifdef条件编译。
3. 担心社区生态不完善?
uni-app兼容小程序的生态,各种自定义组件均可直接引入, 使用uni-app的插件市场,同时可跨多端使用。详见 ext.dcloud.net.cn
4. 担心学习成本?
• 基于通用前端技术栈,采用vue的语法+微信小程序的API
• 官方提供:
• 编辑器Hbuilder,开发模版等
• 组件库:包括视图,表单,多媒体组件等,详见:https://uniapp.dcloud.io/component/README
• API库:包括存储,位置,设置等,详见:https://uniapp.dcloud.io/api/README
跨端兼容性问题列举
1.例如:支持H5不支持其他的
非H5端不支持*选择器
非H5端,不能使用浏览器自带对象,比如document、window、localstorage、cookie等(需要采用官方提供的API方式uni.setStorage 或者 条件编译)
开发注意事项可以参考 https://uniapp.dcloud.io/matter
2.每个平台有自己的一些特性,因此会存在一些无法跨平台的情况, 采用如下方式
条件编译写法 | 说明 |
#ifdef APP-PLUS 需条件编译的代码 #endif | 仅出现在 App 平台下的代码 |
#ifndef H5 需条件编译的代码 #endif | 除了 H5 平台,其它平台均存在的代码 |
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif | 在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集) |