codecamp

MorJS 小程序形态一体化 小程序转分包

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

将需要转换为分包的页面填写进去,如:

{
  "root": "takeout_delicious_food",
  "pages": ["index/index"]
}

注意:当前需要业务方手动添加该文件,如果需要转换的小程序 app.json 已存在分包配置,需要将分包中的页面也添加至 subpackage.jsonpages 中,注意页面路径为分包名称+路径,不要写错。

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

import { defineConfig } from '@morjs/cli'

export default defineConfig([
  // ⭐️⭐️⭐️ 重点看这里:分包编译配置 ⭐️⭐️⭐️
  {
    // 编译名称,可随意修改
    name: 'wechat_subpackage',
    // 源码类型, 这里以支付宝小程序 DSL 为例
    sourceType: 'alipay',
    target: 'wechat',
    // 指定编译类型为分包!
    compileType: 'subpackage',
    // 分包只能使用 bundle 打包模式
    compileMode: 'bundle',
    // 如果分包需要使用宿主的 npm 依赖,且不希望该依赖参与打包
    // 可以在 externals 中指定 npm 包的名称,在项目中正常引用即可
    // 注意:微信环境下需要自行触发 构建 NPM 操作
    externals: []
  }
])

完成以上配置后,即可执行对应的分包编译,编译完成后,将对应编译产物文件夹直接放到对应的宿主中即可。

3、接入注意事项

  • 分包的打包模式默认会查找 mor.subpackage.app.js,如果该文件不存在,则会直接使用 app.js,故小程序转分包如无特别需求可以不使用 mor.subpackage.app.js,如果配置了 mor.subpackage.app.js 则将使用该文件,并忽略 app.js。如果需要两个文件并存,那么可以考虑把公共逻辑抽象到一个单独文件中
  • 分包的打包方式,仅提供直接将完整小程序编译为可直接作为分包运行的文件夹,业务方接入到微信还有一些内容需要适配,差异无法全部抹平,具体参见文档:《多端差异性总结》
  • 小程序转分包后, app.onLaunch 会在首次打开分包页面时调用,app.onShow 以及其他方法如 onError 等 不会被调用,这块儿的差异需要业务方自行处理
  • 分包模式会对 getApp 方法进行兜底处理,分包模式下通过 getApp 调用获得的 app 为宿主和分包的混合产物,宿主的属性和方法可以通过 app.$host 获取,具体逻辑可以查看产物中的 mor.subpackage.global.js 文件
  • 分包模式下如果会将 app.acss 注入到各个页面和组件的样式中作为引用,原因为部分业务团队重度依赖全局样式
  • 业务中如有用到自有封装的 npm package,这部分需要自行确保多端支持
  • 如果需要使用宿主已提供的 npm package,可以将对应的包名添加到上述配置示例的 externals 中,然后在项目中正常引用即可。如项目中出现此类需求,建议抽象出来一个单独的 js 文件,可以通过文件或源代码纬度的条件编译来为不同端提供支持,避免造成对业务代码的污染
  • 风险点: 分包没有固定初始化入口,故为了能够正常初始化项目代码,编译时在每个页面和组件的 JS 文件顶部引入了初始化的文件,用于确保分包的初始化


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; }