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

微信小程序--使用分包

作者: 冬天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

相关文章

  • 微信小程序--使用分包

    1、分包的小程序目录结构如下 子包packageTab1、packageTab2分别为子包1、2其中的结构和主包的...

  • 微信小程序使用分包

    小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 小程序推崇的是...

  • 微信小程序:分包报错

    微信提供了分包加载目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 ...

  • 2019-06小程序升级简要

    微信小程序分包加载 包的限时 整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 2M 分包规则(普通...

  • 微信小程序性能优化实践

    历史回顾: 微信小程序自定义组件 - 表格组件来啦 通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项目分包,...

  • 微信小程序分包加载设置

    设置分包加载 微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包?...

  • 微信小程序分包加载使用

    目录结构 在项目app.json中的配置 这样即可使用分包了 就是这么简单然后在开发者工具可以查看所占的大小 这是...

  • 微信小程序分包

    2020-03-10 周二 阴 简述什么是分包、为什么要分包以及分包的优缺点,罗列分包相关规则和大坑 背景 微信客...

  • 小程序分包(Taro分包案例)

    为什么要使用小程序的“分包加载”方案 微信小程序限制了代码包不能超过 2MB,限制大小是对小程序启动速度的考虑,但...

  • 微信小程序基础

    微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...

网友评论

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

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