美文网首页微信小程序
微信小程序--使用分包

微信小程序--使用分包

作者: 冬天73051 | 来源:发表于2018-09-25 13:54 被阅读385次

    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

    相关文章

      网友评论

        本文标题:微信小程序--使用分包

        本文链接:https://www.haomeiwen.com/subject/gtxloftx.html