基于Vue技术栈，小程序跨端框架选型

支持各平台小程序项目，包括微信、支付宝、百度小程序项目；实现一套代码在多个平台使用，降低开发成本。

基于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的合并书写，增加标签
• 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框架

主要问题是迁移和学习成本过高

参考文件： https://juejin.im/post/5bd2b014e51d457a7a0396ea