uni-app 框架
- 为了解决同一个小程序部署在多个平台的问题
- 减少代码的维护成本
- 精简代码组织 提升开发效率
常见框架比较
wepy[查看](https://wepyjs.github.io/wepy-docs/)
*类Vue语法 我们用过,有些项目应该还在用,出现的比较早,问题比较多,不支持全平台
*文档很少 对微信支持非常好 不支持其他平台
mpvue[查看](http://mpvue.com)
*美团团队开发的,不支持 H5
*文档少 社区不完善
taro[查看](https://taro.aotu.io)
*React 语法规范,全平台支持,京东凸凹实验室开发维护
*文档丰富 社区相对完善
uni-app[查看](https://uniapp.dcloud.io)
*Vue 语法规范,全平台支持,支持 mpvue,DCloud公司开发维护
*文档丰富 社区相对完善 大量案例 插件丰富
优势
1,多平台
*微信 头条 百度 支付宝 QQ H5 (iOS android 也支持 我们暂时不考虑)
2,Vue语法规范 学习成本低 容易上手(页面生命周期和Api名称 参照微信小程序)
3,支持 各平台原生自定义组件 和 原生Api
*比如我们的微信分享朋友圈
4,条件编译(目录 和 代码)
// #ifdef MP-TOUTIAO || MP-WEIXIN
*提升代码执行效率
*控制包的大小
// #endif
*问题一 整体目录编译无效 platforms > MP-WEIXIN,解决办法:放在 static 目录里面
*问题二 条件编译多个平台原生自定义组件会报错,解决办法如下:
a,条件编译整个page,不要条件编译插件(建议使用)
b,不用条件编译判断,但需每个平台都要添加条件编译目录,否则会默认编译微信的组件(不建议使用)
5,大量的插件 和 uni UI
6,相对较活跃的社区和交流群(相比于其他框架)
7,配套工具(开发ide) HbuilderX -- (也支持 vue-cli 创建)
*对uni-app 做了特别强化,语法提示支持的比较好
*api和依赖库 跟随ide自动升级
*快捷创建和打包发布
*比小程序原生编辑器好用太多
8,团队对 项目和工具 维护相对及时
*bug修复 Api补充 ide更新
劣势(与 微信小程序 对比)
1,不支持原生页面的混编,所以代码迁移困难
*支持原生组件 和 原生Api 也算另一种形式的混编
2,不支持 wxs 标签函数
* wxs(WeiXin Script)仅微信小程序可用,且非常好用
3,subPackages 不支持存放图片等静态资源,相应的会增加主包的大小
4,更新问题
*适配原生Api的更新肯定需要时间,哪怕很短
*比如 uni.navigateToMiniProgram(OBJECT) 显示 头条小程序不支持,其实头条小程序已经支持 navigateToMiniProgram
5,开发文档相对丰富,但仍不可能有原生文档丰富
6,社区活跃度、丰富度 和 社区人员维护等 与原生社区相比仍有差距
*遇到技术疑难或框架bug的时候 可能需要更长的时间 才能找到答案 或者等待回复
*有官方交流群 相对活跃
7,开发过程中肯定还会有......
注意事项 (每个平台特有的规则限制等,App端 我们暂时不考虑)
1,Tag 和 css
* tag 按小程序的去写 body/page div/view span/text a/navigator 等,不推荐使用h5标签
* 建议使用常用通用选择器,比如class id (后代 伪类 属性 等选择器不建议使用)
2,H5端的浏览器跨域问题,小程序https强制要求问题 域名配置问题
* uni.request 等封装的网络请求存在浏览器跨域限制,需要服务端配合支持,或者测试阶段浏览器配置跨域设置
3,H5端 document window 等特有对象 一般不能使用,小程序特有方法问题等,比如onShareAppMessage(OBJECT)
tt.onShareAppMessage
4,不同平台的小程序 相互的限制问题
* 比如 定位 授权、分享、支付、消息推送 等 需要差异化处理
5,video map等小程序端 原生组件 的概念
6,自定义组件 和 Api,尽量避免以 u uni wx 等开头,比如 u-view wx-view
* 如需区分 可以自定义前缀 :lou-view lou-wx-view
7,其他,开发过程中肯定还会有......