基于Vue技术栈，小程序跨端框架选型
2019-08-19 本文已影响0人
cythia_yyy
支持各平台小程序项目，包括微信、支付宝、百度小程序项目；实现一套代码在多个平台使用，降低开发成本。
基于Vue技术栈，社区目前较完善的框架有mpVue官方、Megalo官方和Chameleon官方。
mpVue特点：
- 基于@vue-cli脚手架创建的项目
- 通过webpack构建打包，多环境配置麻烦
- 不支持vue-router，支持vuex数据管理
- vue语法特性支持不足
- 兼容小程序生命周期，不建议使用小程序的生命周期钩子
- webpack/dev-server.js文件实现热更新，触发小程序的调试工具检测文件变化
- 保留vue.runtime核心方法，vue实例直接与小程序page实例建立关联以及生命周期的绑定，vue实例挂载的时候把vue属性同步到对应的小程序实例上。利用发布订阅模式Observer，Watcher监听数据更新；并在小程序生命周期中触发vue的生命周期
image.png
目录结构
├── package.json
├── project.config.json
├── static
├── src
│ ├── components
│ ├── pages // 需要遵循每个小程序页面放入一个单独子目录的形式
│ ├── utils
│ ├── App.vue
│ ├── store // 状态管理
│ └── main.js // main.js+App.vue：为入口文件，相当于原生小程序的app.json和app.js的复合体
├── config // 包含不同环境的配置信息，环境、api域名等
│ ├── index.js
│ ├── dev.env.js
│ └── prod.env.js
└── build
megalo特点：
- 基于@vue/cli3脚手架创建的项目
- 支持多环境，多模式，配置简易
- 不支持vue-router，支持vuex数据管理
- vue语法特性支持完善
- 兼容小程序生命周期
- api统一插件megalo-api，支持promise，但是不兼容全部平台API，需要手动处理
- megalo-cli-service 插件包含开发环境运行、监听、生产环境打包
- 支持页面.vue和.js的合并书写，增加<config>标签
- vue单文件的模版和style都可以通过指定platform做跨平台兼容
- 支持js文件的跨平台兼容（index.wechat.js / index.swan.js / index.alipay.js）
- 逻辑和模版分别在service和view中执行，之间不具备共享数据通道。当 Vue 的 vm 上数据发生更新时，会重新渲染出 vdom，在的 patch 阶段，框架不在去操作 DOM，而是通过 Page 上的setDate方法将变化的数据更新到视图层，完成 Vue 和 小程序的视图更新。
image.png
目录结构
├── dist-*
│ ├── project.config.json // 工具配置
├── package.json
├── .env.development
├── .env.production
├── src
│ ├── components
│ ├── pages
│ ├── subPackage
│ ├── store
│ ├── static
│ ├── App.vue
│ └── main.js // app.json和app.js的汇总文件，小程序全局配置
└── build
vue特性支持情况对比
image.png
总体上来说，二者都是大大降低了开发成本，megalo基于mpvue做了进一步优化，且兼容vue版本的升级，贴近vue技术栈业务的开发规范，当然megalo作为后起之秀会存在更多的坑，需要我们在实际开发中手动填坑😅，当然后续我们也会做更多的赋能，减少开发同学的烦恼 🙏
附Chameleon调研：
- CML新语言，类Vue，原有项目迁移困难，学习成本较高
- 编译时使用自研多态协议（定义标准接口，除统一组件外，各端模块各端独立实现，例如登录），包括兼容H5
- 内置的组件和API，原生组件和H5组件导出引用
- 支持vue的周边 包括router
- 独立的语法检查工具
- 优化编译速度、打包性能、包大小（无真实数据）
- 需要重新定制ui框架
主要问题是迁移和学习成本过高
