• 代码复用
    • 标准 vue 工程转移
    • 同构微信、alipay、智能小程序
    • 第三方组件库

    代码复用

    标准 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