1、分包的小程序目录结构如下
屏幕快照 2018-09-25 下午1.32.45.png
子包packageTab1、packageTab2分别为子包1、2其中的结构和主包的结构一样
打包原则: 注意的地方
1、声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目录将被打包到 app(主包) 中
2、subPackage 的根目录不能是另外一个 subPackage 内的子目录
3、tabBar 页面必须在 app(主包)内
//==============
引用原则:注意的地方
遵循原则类似于,局部变量和全局变量的原则
2个单独的局部变量(子包)不能相互引用,局部变量(子包)可以引用全局变量(app、main中)
实际案例
1、app.json
{
"pages": [
"pages/tab1/tab1",
"pages/tab2/tab2",
"pages/tab3/tab3"
],
"subPackages": [
{
"root": "packageTab1",
"pages": [
"pages/cat/cat",
"pages/dog/dog"
]
},
{
"root": "packageTab2",
"pages": [
"pages/apple/apple",
"pages/banana/banana"
]
}
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/tab1/tab1",
"text": "tab1",
"iconPath": "images/home.png",
"selectedIconPath": "images/home2.png"
},
{
"pagePath": "pages/tab2/tab2",
"text": "tab2",
"iconPath": "images/me.png",
"selectedIconPath": "images/me2.png"
},
{
"pagePath": "pages/tab3/tab3",
"text": "tab3",
"iconPath": "images/me.png",
"selectedIconPath": "images/me2.png"
}
]
}
}
2、首页中事件进入分包
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 进入分包路由跳转
*/
bindClick: function(){
//注意:packageTab1是分包的更目录
wx.navigateTo({
url: '/packageTab1/pages/cat/cat',
})
}
})
最终效果如下:
启动小程序后,进入首页,首次点击事件效果如下会有模块加载中
屏幕快照 2018-09-25 下午1.31.06.png
如果某个模块大于2M,上传提交代码会报错:
屏幕快照 2018-09-25 下午1.26.09.png
网友评论