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

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


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方的案例如下图：