MorJS 小程序形態(tài)一體化 小程序轉(zhuǎn)插件

1、在項目根目錄創(chuàng)建 plugin.json 文件?

將需要轉(zhuǎn)換為分包的頁面填寫進去（這里僅舉例支付寶小程序的插件配置，微信略有區(qū)別，請自行查看各方文檔：支付寶插件 或 微信插件），如:

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

注意：當(dāng)前需要業(yè)務(wù)方手動添加該文件，如果需要轉(zhuǎn)換的小程序 app.json 存在分包配置，需要將分包中的頁面也添加至 plugin.json 的 pages 中，注意頁面路徑為分包名稱＋路徑，不要寫錯，同時插件需要對外開放的頁面需要填寫到對應(yīng)的 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: '.'
    }
  },
])

完成以上配置后，即可執(zhí)行對應(yīng)的插件編譯，編譯完成后，即可在對應(yīng)的小程序開發(fā)者工具中進行調(diào)試。

3、配置 index.js 文件?

插件可以在 index.js 中輸出能力，宿主在使用插件運行時插件的時候可以直接通過 getApp().$plugin.instances.[插件名稱] 來訪問到插件輸出的能力。

import { aPlugin } from '@morjs/core'

class PluginEntry extends aPlugin {
  constructor() {
    // 必須要調(diào)用 super
    super({ getApp })
  }

  // 提供了一個方法 x 可以供宿主小程序調(diào)用
  x() {
    return 1
  }
}

export default new PluginEntry()

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

插件工程默認會查找 mor.plugin.app.js，如果該文件不存在，則會直接使用 app.js，故小程序轉(zhuǎn)插件如無特別需求可以不使用 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 標(biāo)準(zhǔn)小程序宿主

import { aApp } from '@morjs/core'

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

aApp(
  {
    // 業(yè)務(wù)邏輯代碼
    onLaunch(options) {
      // 初始化插件調(diào)用
      this.$plugin.init({
        plugins: [
          {
            // 插件名稱，同 app.json 里面的插件配置名稱一致
            name: 'myPlugin',
            // 如果是動態(tài)插件的話，需要傳插件 id 和 version
            id: '',
            version: '',
            // 拓展給插件的方法和屬性
            extend: {
              shopId: '123',
              login() {
                console.log('call $host login method')
              },
              getUserId() {
                return '456'
              }
            }
          }
        ]
      })
    }
  },
  [
    // 增加 插件初始化 Solution，并設(shè)置類型 type 為 host
    SolutionPlugin({ type: 'host' })
  ] )?

如果是普通小程序宿主

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

App({
  // 業(yè)務(wù)邏輯代碼
  onLaunch(options) {
    // 初始化 SDK
    this.$plugin = new PluginSDK({ $host: this })

    // 初始化插件調(diào)用
    this.$plugin.init({
      plugins: [
        {
          // 插件名稱，同 app.json 里面的插件配置名稱一致
          name: 'myPlugin',
          // 如果是動態(tài)插件的話，需要傳插件 id 和 version
          id: '',
          version: '',
          // 拓展給插件的方法和屬性
          extend: {
            shopId: '123',
            login() {
              console.log('call $host login method')
            },
            getUserId() {
              return '456'
            }
          }
        }
      ]
    })
  }
})

6、接入注意事項?

1. 小程序轉(zhuǎn)插件的功能和 MorJS 插件工程 基本一致，可以點擊文檔查看具體用法和限制
2. 宿主需要接入插件 SDK 之后，才具備將宿主方法注入到插件的能力