代码复用

标准 vue 工程转移

megalo 利用小程序的 template 取代了标准 vue 项目的 dom 操作,所以,理论下,未使用浏览器特有 API 和 router 的项目基本都是可以使用 megalo 转译成小程序包

同构微信、alipay、智能小程序

megalo 替开发者“基本”抹平微信、alipay 和百度智能小程序的语法差异,开发者可以一键同构其他平台的小程序包。

  1. # 微信小程序
  2. $ npm run dev:wechat
  3. # 支付宝小程序
  4. $ npm run dev:alipay
  5. # 百度智能小程序
  6. $ npm run dev:swan

我借用社区里 weex demo,yanxuan-weex-demo,进行稍微的修改即可同构出微信、alipay 和百度智能小程序的代码包,效果如下

代码复用 - 图1

  1. 关于 weex 代码的复用,后期我们调研同步生成 weex bundle 的可行性

第三方组件库

关于第三方的组件库或小程序组件库,同样的在不涉及主动 dom 操作的,“理论上”都是可以使用的。不过“坑”肯定是存在的。

vant-weapp 的使用方式为例,谨以此为例不代表官方推荐

只需将源码 clone 到构建后的微信包【dist-wechat】里,然后在 json 文件中引入按钮对应的自定义组件即可

代码复用 - 图2

  1. // hello.js
  2. import App from './hello'
  3. import Vue from 'vue'
  4. const app = new Vue(App)
  5. app.$mount()
  6. export default {
  7. config: {
  8. "usingComponents": {
  9. "van-notice-bar": "/vant-weapp/dist/notice-bar/index"
  10. }
  11. }
  12. }
  1. <!-- hello.vue -->
  2. <template>
  3. <div class="app">
  4. <van-notice-bar
  5. text="此测试组件为引入的第三方组件库 Vant Weapp................"
  6. />
  7. <!-- unimportant code -->
  8. </div>
  9. </template>

代码复用 - 图3