微信小程序

微信小程序--使用分包

2018-09-25  本文已影响385人  冬天73051

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
上一篇 下一篇

猜你喜欢

热点阅读