uni-app跨端方案与H5、微信小程序自研技术选型对比

monkey01127

861人浏览 · 2022-11-24 11:58:41

monkey01127 · 2022-11-24 11:58:41 发布

uni-app、微信小程序、taro多端对比

框架	技术系	优势	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 调用，各进行各端扩展；例如：在小程序端，支持直接进行扩展，编写微信原生代码。

![image.png](https://img-blog.csdnimg.cn/img_convert/dd69e697b0bcf0b478885c03df59cedf.png#averageHue=#f9f6f6&crop=0&crop=0&crop=1&crop=1&height=759&id=ojczB&margin=[object Object]&name=image.png&originHeight=759&originWidth=1731&originalType=binary&ratio=1&rotation=0&showTitle=false&size=135876&status=done&style=none&title=&width=1731)

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 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

第3方的案例如下图：
![image.png](https://img-blog.csdnimg.cn/img_convert/f2147f735b70469c6ca8a337da65b127.png#averageHue=#f0f0f0&crop=0&crop=0&crop=1&crop=1&height=808&id=qo3lt&margin=[object Object]&name=image.png&originHeight=808&originWidth=985&originalType=binary&ratio=1&rotation=0&showTitle=false&size=162340&status=done&style=none&title=&width=985)