当前位置：首页 > news >正文

微信小程序分包异步化

news 2025/3/14 1:21:29

分包1引入分包2的组件或者js

引入组件：

主包里的pages/tabbars/tabbar1/tabbar1页面引入分包sub1的sub1/components/sub1-component/sub1-component组件

1、分包预下载首先在app.js定义preloadRule

"preloadRule": {"pages/tabbars/tabbar1/tabbar1": {"network": "all","packages": ["sub1"]}},

就是说进入到pages/tabbars/tabbar1/tabbar1页面的时候会去下载sub1分包

2、引入分包组件

"usingComponents": {"sub1-component": "../../../sub1/components/sub1-component/sub1-component"},"componentPlaceholder": {"sub1-component": "view"}

componentPlaceholder是用来定义下载未完成的时候显示的占位组件，就是说sub1-component未下载渲染完成时页面显示的是view元素，也可以换成别的组件。

3、使用

直接在tabbar1 wxml里使用<sub1-component></sub1-component>就可以了

我在sub1-component里就写了展示sub1-component文字

<view style="margin-top: 100rpx;" bind:tap="onClick">sub1-component</view>

所以展示出来就是这样的

第二个是引入分包的js

例如：在主包的tabbar1引入分包sub1里的utils.js

在分包sub1写了个utils.js 导出了一个deepCopy的方法

在tabbar1页面的js里这样写

// 加载分包的jsloadSubPackage() {try {require('../../../sub1/utils.js', mode => {console.log('@@sub1-com success', mode)}, (err) => {console.log('@@sub1-com err', err)})} catch (error) {console.log('@@分包异步化加载失败', error)}},

就能得到分包里的方法了

可以把这些方法放到全局wx里，这样其他分包不用引入也可以直接使用了

// 加载分包的jsloadSubPackage() {try {require('../../../sub1/utils.js', mode => {console.log('@@sub1-com success', mode)// 将方法写入全局里 这样其他分包也可以直接使用 而不用再引一遍const prefix = 'sub1_utils_'for(const [k,v] of Object.entries(mode)) {wx[prefix + k] = v}console.log('@@写入全局wx里的方法', wx.sub1_utils_deepCopy)}, (err) => {console.log('@@sub1-com err', err)})} catch (error) {console.log('@@分包异步化加载失败', error)}}

可以看到打印里成功写入了