小程序、快应用 框架

运行平台

小程序平台:百度智能小程序、支付宝小程序、微信小程序、QQ小程序、字节跳动小程序

快应用平台:努比亚手机、联想手机、一加手机、小米手机、vivo手机、华为手机、OPPO手机、金立手机、魅族手机、中兴手机

跨平台框架

omix:是腾讯omi项目的子项目,是腾讯webstore项目的进化版,是原生微信小程序项目的状态管理组件、响应式组件

腾讯 WePY(类vue):支持输出 微信小程序
腾讯 kbone(纯vue,模拟浏览器环境):支持输出 微信小程序、H5

美团点评 mpvue(纯vue):支持输出 微信小程序、H5

滴滴 MPX(微信小程序原生语法增强为类vue):支持输出 微信/QQ/支付宝/百度/头条小程序

滴滴 Chameleon(CML,类vue):支持输出 微信/QQ/支付宝/百度/头条小程序、快应用、H5、Weex

DCLOUD uni-app(纯vue):支持输出 微信/QQ/支付宝/百度/头条小程序、快应用、H5、Weex

 

京东 Taro(纯react):支持输出 微信/QQ/支付宝/百度/头条小程序、快应用、H5、React Native

阿里巴巴 Rax(类React):支持输出 支付宝/微信小程序、H5(PWA)、Weex、Flutter

小程序框架指标

跨端支持度:小程序、H5、Native App、快应用

学习成本:是否独立DSL(Domain Specific Language,领域特定语言)、目前掌握的是vue还是react

组件丰富度:官方(内置)组件库、第三方组件库、是否支持原生(H5、小程序)组件库

坑数:跨端数越多,bug就会越多,性能就会越差,使用各端的原生能力就越难;增强型框架跨平台

热度:社区活跃度、更新频率

微信小程序组件库

有赞-Vant Weapp、微信-weui-miniprogram、TalkingData - iView Weapp、蘑菇街-MinUI、Wux Weapp(个人项目,组件最多)

京东-TaroUI(基于Taro框架)、ColorUI(WXSS框架)、腾讯-WeUI-wxss(WXSS框架)

转译型 与 增强型

转译型框架(MPX以外):将其他的语法规范转译为小程序语法规范

转译型框架的缺点:不支持源框架的一些语法特性,不支持原生组件库(H5、小程序)

增强型框架(MPX):基于某一小程序语法规范,使用Vue中优秀的语法特性进行增强;但在跨平台编译时,仍然是转译

增强型框架的优点:可以从原生小程序项目渐进迁移、一定程度上支持原生小程序组件库

增强型框架的缺点:由于是基于某一小程序的语法规范,跨平台编译时,更难抹平平台差异;一旦抹平了,也就有了转译型框架的缺点

总结:不跨平台编译时,用MPX作为语法增强,是可行的。需要跨平台编译时,会出现很多不支持转译的语法特性

MPX跨平台编译

思路:新平台不支持的内容,要么抹平 要么 再编译前进行差异化

抹平案例:微信小程序代码 编译成 头条小程序
问题:vant-weapp组件库用到了,不能跨平台编译成 头条小程序
解决思路:去掉vant-weapp里的
步骤:
1、把 /wxs 目录下的 wxs文件 改为 .js,在wxss中引入
2、把这些文件里的wxs语法改为js语法,例如 模块导入导出语法、getRegExp()改为new RegExp()、判断是否是数组array.constructor === 'Array' 改为  Array.isArray(array)
3、template里调用方法 {{f(x)}} 改用 computed 方法实现
4、template里wx:for 内 调用方法 {{f(x)}} 得想办法展开成表达式 或者 数据预处理

kbone

不能用现成的第三方vue组件库;使用了小程序原生组件,则web端用不了;使用kbone-ui,才能两端通用

启动时打开指定路径:每个页面要设置成单独的page,而不能是一个单页多个路由;打开新页要用window.open(route); 否则会出现页面空白、没有返回按钮、没有Home按钮等问题

从外部(公众号菜单、分享到对话框的卡片、分享到朋友圈的卡片、服务消息、小程序码等)打开指定路径要用 pages/xx/index?type=share&targeturl=${encodeURIComponent(location.href)},这里坑比较多,比如生成小程序码时不能带参

uniapp

1、微信小程序不支持指定tabBar高度,开发者工具模拟器某些机型下,tabBar文字会贴边,不代表真机会贴边

2、全局变量:Vue.prototype里的常量只能在JS中用,不能在template里用;写在App.globalData里的常量,可以通过computed用在template里;写在Vuex.Store里的变量,可以通过computed用在template里

你可能感兴趣的:(移动端web)