codecamp

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

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

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

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

注意:当前需要业务方手动添加该文件,如果需要转换的小程序 app.json 存在分包配置,需要将分包中的页面也添加至 plugin.jsonpages 中,注意页面路径为分包名称+路径,不要写错,同时插件需要对外开放的页面需要填写到对应的 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'
            }
          }
        }
      ]
    })
  }
})

6、接入注意事项

  1. 小程序转插件的功能和 MorJS 插件工程 基本一致,可以点击文档查看具体用法和限制
  2. 宿主需要接入插件 SDK 之后,才具备将宿主方法注入到插件的能力


MorJS 小程序形态一体化 小程序转分包
MorJS 小程序形态一体化 插件转分包
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

MorJS 指南

MorJS 基础用法

MorJS 配置

MorJS 编译相关配置

MorJS 进阶用法

MorJS Web开发

MorJS Web开发介绍

MorJS Web开发快速上手

MorJS Tabbar IOS 小黑条适配开关

MorJS 社区

MorJS 规范

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }