MorJS 小程序形态一体化小程序转插件

2024-01-19 14:36 更新

1、在项目根目录创建 `plugin.json` 文件

将需要转换为分包的页面填写进去（这里仅举例支付宝小程序的插件配置，微信略有区别，请自行查看各方文档：支付宝插件或微信插件），如:

{
  "publicComponents": {
    "demo-component": "components/demo/index"
  },
  "publicPages": {
    "index-page": "pages/index/index"
  },
  "pages": ["pages/index/index"],
  "main": "index"
}

注意：当前需要业务方手动添加该文件，如果需要转换的小程序 app.json 存在分包配置，需要将分包中的页面也添加至 plugin.json 的 pages 中，注意页面路径为分包名称＋路径，不要写错，同时插件需要对外开放的页面需要填写到对应的 publicPages 中。

2、在 `mor.config.ts` 文件中增加插件编译配置

import { defineConfig } from '@morjs/cli'

export default defineConfig([
  // ⭐️⭐️⭐️ 重点看这里：分包编译配置 ⭐️⭐️⭐️
  {
    // 编译名称，可随意修改
    name: 'alipay_plugin',
    // 源码类型, 这里以支付宝小程序 DSL 为例
    sourceType: 'alipay',
    target: 'alipay'
    // 指定编译类型为插件!
    compileType: 'plugin',
    // 插件只能使用 bundle 打包模式
    compileMode: 'bundle',
    // 开启集成模式
    compose: true,
    host: {
      // miniprogram 为本地的小程序宿主
      // 可自行增加最简单的小程序宿主
      // 也可以使用 mor init 在该文件夹下生成
      file: './miniprogram',
      dist: '.'
    }
  },
])

完成以上配置后，即可执行对应的插件编译，编译完成后，即可在对应的小程序开发者工具中进行调试。

3、配置 `index.js` 文件

插件可以在 index.js 中输出能力，宿主在使用插件运行时插件的时候可以直接通过 getApp().$plugin.instances.[插件名称] 来访问到插件输出的能力。

import { aPlugin } from '@morjs/core'

class PluginEntry extends aPlugin {
  constructor() {
    // 必须要调用 super
    super({ getApp })
  }

  // 提供了一个方法 x 可以供宿主小程序调用
  x() {
    return 1
  }
}

export default new PluginEntry()

4、配置已有的 `app.js` 或使用 `mor.plugin.app.js`

插件工程默认会查找 mor.plugin.app.js，如果该文件不存在，则会直接使用 app.js，故小程序转插件如无特别需求可以不使用 mor.plugin.app.js

如果配置了 mor.plugin.app.js 则将使用该文件，并忽略 app.js，如果需要两个文件并存，那么可以考虑把公共逻辑抽象到一个单独文件中

import { aApp } from '@morjs/core'

// 和普通小程序一样使用 mor 的运行时解决方案和插件
import SolutionStandard from 'mor-runtime-solution-standard'

// 需要加载插件化的运行时解决方案
import SolutionPlugin from 'mor-runtime-solution-plugin'

// 初始化app，里面的实例是 getApp 返回的实例
aApp(
  {
    onLaunch() {
      console.log('plugin app onLaunch')
    },
    onShow() {
      console.log('plugin app onShow')
    },
    onHide() {
      console.log('plugin app onHide')
    }
  },
  [
    SolutionStandard({ exlog: { biz: 'a1.b2' } }),
    // 初始化 插件 solution
    SolutionPlugin({ type: 'plugin' })
  ]
)

5、宿主小程序如何对接插件工程？

如果是 MorJS 标准小程序宿主

import { aApp } from '@morjs/core'

// 引入插件 Solution
import SolutionPlugin from 'mor-runtime-solution-plugin'

aApp(
  {
    // 业务逻辑代码
    onLaunch(options) {
      // 初始化插件调用
      this.$plugin.init({
        plugins: [
          {
            // 插件名称，同 app.json 里面的插件配置名称一致
            name: 'myPlugin',
            // 如果是动态插件的话，需要传插件 id 和 version
            id: '',
            version: '',
            // 拓展给插件的方法和属性
            extend: {
              shopId: '123',
              login() {
                console.log('call $host login method')
              },
              getUserId() {
                return '456'
              }
            }
          }
        ]
      })
    }
  },
  [
    // 增加 插件初始化 Solution，并设置类型 type 为 host
    SolutionPlugin({ type: 'host' })
  ] )

如果是普通小程序宿主

import PluginSDK from 'mor-runtime-plugin-plugin-init/lib/sdk'

App({
  // 业务逻辑代码
  onLaunch(options) {
    // 初始化 SDK
    this.$plugin = new PluginSDK({ $host: this })

    // 初始化插件调用
    this.$plugin.init({
      plugins: [
        {
          // 插件名称，同 app.json 里面的插件配置名称一致
          name: 'myPlugin',
          // 如果是动态插件的话，需要传插件 id 和 version
          id: '',
          version: '',
          // 拓展给插件的方法和属性
          extend: {
            shopId: '123',
            login() {
              console.log('call $host login method')
            },
            getUserId() {
              return '456'
            }
          }
        }
      ]
    })
  }
})