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

以包装的navigateTo为例

async navigateTo (route) { route.url = VARS.pathPrefix + (route.url.indexOf('http://www.likecs.com/') === 0 ? '' : 'http://www.likecs.com/') + route.url // 这里做前缀处理 console.log('[Navigator] navigateTo:', route) ... wx.navigateTo(route) }

这里面需不需要加前缀，都是由全局变量VARS中的pathPrefix来决定

而pathPrefix是在打包过程中由webpack根据打包命令动态替换的

图片访问路径问题

图片访问路径统一采用cdn的资源访问路径，不要用本地访问路径，要不然在分包路径中是有问题的，同时也会增加程序包的体积

wxss路径问题

用mpvue生成的wxss文件,里面会把通用的vendor.wxss引入，但是引入路径是根路径，作为分包，直接引入根路径，会去访问主包的路径，导致文件无法找到。

@import "/static/css/vendor.wxss"; //在分包中用根路径是无法找到文件的 ._button,._input[type=button],._input[type=reset],._input[type=submit],._textarea{-webkit-appearance:none}._button:after{border:none}page{background-color:#fff}... 解决方案

通过shell脚本对文件进行批量替换
scripts/path-replace.sh

#!/bin/sh sed -i "_bak" "s/\/static\/css\/vendor\.wxss/\/subPages\/enjoy_given\/static\/css\/vendor\.wxss/g" `grep "\/static\/css\/vendor\.wxss" -rl ./dist/static/css/pages/**/*.wxss ./dist/static/css/pages/*/*/*.wxss`

这段shell脚本的目的就是把./dist/static/css/pages/下所有的wxss文件中的/static/css/vendor.wxss替换成/subPages/huanlesong/static/css\vendor.wxss

替换完成后，路径变更ok
生成正式包的时候，用npm run build_subPkg就ok了

分享路径问题

主程序和独立小程序分享出来的路径也是一样的，处理方式和跳转类似。

解决方案

建议通过通用方法统一处理，我们的做法是，在页面的onShareAppMessage中加入通用方法Share.getFinalShareInfo

以首页分享为例

import Share from '@/lib/share' export default { ... onShareAppMessage () { ... return Share.getFinalShareInfo({ title: 'xxx', path: `/pages/content/index/main`, imageUrl: 'xxxx' }) } }

分享时统一调用Share.getFinalShareInfo方法

我们再来看下share.js

export default class Share { static getFinalShareInfo (shareInfo) { ... // 路径前缀处理 shareInfo.path = VARS.pathPrefix + (shareInfo.path.indexOf('http://www.likecs.com/') === 0 ? '' : 'http://www.likecs.com/') + shareInfo.path ... return shareInfo } }

这样整个分包业务就配置完成了。是不是很麻烦~

当初和主程序融合时候确实踩了很多坑，这里我把解决方案和大家分享下

如果有更好的解决方案，也希望一起交流：）