小程序多业务线融合【完整分包业务接入】

同一个主体(公司、部门)下有多个小程序

这些小程序,由一个主小程序和后来新建的多条业务线构成(每条业务线拥有独立的小程序)

各业务线的小程序需要挂载到主程序下面,因为需要主程序导流

同时各业务线自己的小程序也照常发布更新

==一套代码,通过打包命令,来生成独立包和分包==(分包生成完需要拷贝到主程序的subPages目录下)

项目概述

我的这条业务线叫欢乐送(项目名为enjoy_given),是转转旗下一个免费的以物换物平台

因为我们这条业务线小程序是用mpvue构建的(整个项目也是通过mpvue的cli生成的),所以后面相关配置都是以mpvue为例,如果是wepy项目基本也大同小异。

下面就是我们的目录结构

image

src目录下的几个js文件需要专门介绍下:

src/App.vue 是小程序的入口文件,里面定义的是小程序的生命周期

src/main.js 里面初始化通用业务、定义小程序页面路径和全局变量

src/vars.js 存放整个项目的全局变量

src/baseInstall.js 基础方法装配逻辑(如:给vue对象挂载登录、统计逻辑、识别渠道号等)

分包配置概述

首先要配置source和appid

作为分包时,这两个参数都要统一采用主包参数(建议通过webpack配置来实现)

source:是每条业务线登录、注册、和接口访问时用的标识,用来区分该用户来自于哪条业务线

appid:微信分配的小程序appid

为什么要配置这两参数:因为不配置没法登录

页面路径问题

作为分包时,所有页面的跳转路径都要加主包的跳转前缀(建议通过包装跳转方法navigateTo、redirectTo、reLaunch、navigateBack实现,建议配合webpack统一处理)

当新业务线作为分包接入主程序时,页面跳转路径前需要统一加一个前缀

如:独立小程序首页路径为 /pages/content/index/main

作为分包时,主程序分配的包为/subPages/enjoy_given

那么分包业务线首页路径为: /subPages/enjoy_given/pages/content/index/main

wxss引用路径问题

不要用使根目录引入方式(建议采用webpack或者shell脚本来完成)

因为在分包状态下,用根目录访问方式会直接访问主程序的根目录,文件是不存在的

图片路径问题

所有图片路径统一采用cdn资源访问方式,不要引用本地图片

对于分包的main.js和App.vue入口文件不执行的问题

可以通过抽离基础业务装配方法,对于每一个从主包跳到分包页面的入口分别引入,后面会细说

对于小程序内的h5页面拉起小程序页面

在打开webview时候,要加入一个标志位,或者prefix,告诉h5页面,当前处于分包当中,打开的小程序path要加前缀

分享路径问题,在路径前面也要加入路径前缀

可以通过一个通用的分享方法,进行统一处理,后面会细说

小程序的所有页面都需要在主包入口文件(app.vue)注册,每新增页面都要注册

这个是坑,尤其新增页面时,会很容易忽略这个问题,这里要特别强调下

分包接入需要注意的地方

storage命名问题,为了避免和主程序或者其他业务线小程序发生冲突(建议采用 zz_业务名_xxx, 我们业务名是enjoy_given,简称eg,如: zz_eg_address, zz指的就是转转)

登录问题,推荐和主程序使用同样的cookie名称,这样可以通用一套用户信息,免得双方各维护一套,还能避免重复授权。

支付问题,保证下单时和支付时,cookie中的参数保持一致

调试,可以找主程序那边要个主程序的测试包,把生成的代码(dist目录下的内容)拷贝到主程序包的 subPages/业务名/ 下面

例如我们的目录是 subPages/enjoy_given/(目录结构同上)

一套代码,通过不同打包命令生成对应的程序包(独立包和分包)

package.json中scripts

"scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "rimraf dist && node build/build.js", "lint": "eslint --ext .js,.vue src", "build_subPkg": "node build/build-subpkg.js && sh ./scripts/path-replace.sh" } 独立小程序(调试) npm run dev 独立小程序(构建) npm run build 主程序分包(构建) npm run build_subPkg 为什么没有主程序分包(测试)

因为我们无论是构建测试分包还是构建正式分包,都要把生成dist下的代码拷贝到主程序的subPages/enjoy_given/目录下,成本基本是一样的,所以,就没有写构件分包的命令

分包webpack配置

因为需要兼容独立小程序和分包业务,webpack我们建议分开配置

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwfyd.html