小程序分包

最新推荐文章于 2024-07-12 14:42:19 发布

小白---

最新推荐文章于 2024-07-12 14:42:19 发布

阅读量341

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m1317107987/article/details/127873634

版权

本文介绍了微信小程序的分包机制，详细讲解了如何通过app.json配置分包结构，以优化加载速度。同时，展示了如何自定义tabBar，利用MobX进行状态管理，实现点击切换页面并更新tabBar状态的功能。此外，还提及了在app.json中设置custom字段以启用自定义tabBar，并确保所有tab页的json里声明usingComponents。

摘要由CSDN通过智能技术生成

分包后项目构成
分包后小程序由1个主包和多个分包组成

主包：一般只包含项目的启动页面或Tabbar页面

分包：只包含和当前分包有关的页面和资源

分包体积限制
整个小程序所有包大小不超过16M（主包+分包）

单个分包/主包大小不能超过2M

app.json中声明分包结构

//声明分包的结构

"subPackages": [
    {
       "root":"packageA",   //第一个分包的根目录
       "pages": [   //分包下所有页面的存放路径
         "pages/detail/detail"
       ]
    },
    {
      "root":"packageB",
      "pages": [
        "pages/goods/goods"
      ]
   }
  ],

自定义tabBar
根目录下自定义组件新建custom-tab-bar/index

把点击的active定义为共享的数据

store.js
// 创建store实例  
export  const store = observable({
  // 定义共享数据  数据字段
  activeTabBarIndex:0,   //点击的下标
 
  updateActiveIndex:action(function(index){
    this.activeTabBarIndex = index
  })
})

wxml中

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item  info="{{item.info?item.info:''}}" wx:for="{{list}}" wx:key="index">
  <image slot="icon" src="{{item.iconPath}}" style="width: 25px; height: 25px;"  mode="aspectFit"></image>
  <image slot="icon-active" src="{{item.selectedIconPath}}" style="width: 25px; height: 25px;"  mode="aspectFit"></image>
  {{item.text}}
  </van-tabbar-item>
</van-tabbar>

js中

import {storeBindingsBehavior} from  "mobx-miniprogram-bindings"
import {store} from '../store'
 
Component({
 
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      sum:'sum',
      active:'activeTabBarIndex'
    },
    actions:{
      updateActive:"updateActiveIndex"
    }
  },
   
  observers:{
    'sum':function(val){
      this.setData({
        'list[1].info':val
      })
    }
  },

/**
* 组件的初始数据
*/

  data: {
   
    "list": [
        {
          "pagePath": "/pages/home/home",
          "text": "首页",
          "iconPath": "/images/tabs/home.png",
          "selectedIconPath": "/images/tabs/home-active.png"
        },
        {
          "pagePath": "/pages/message/message",
          "text": "消息",
          "iconPath": "/images/tabs/message.png",
          "selectedIconPath": "/images/tabs/message-active.png",
          "info":1
        },
        {
          "pagePath": "/pages/contact/contact",
          "text": "联系我们",
          "iconPath": "/images/tabs/contact.png",
          "selectedIconPath": "/images/tabs/contact-active.png"
        },
        {
          "pagePath": "/pages/contact/contact",
          "text": "联系我们",
          "iconPath": "/images/tabs/contact.png",
          "selectedIconPath": "/images/tabs/contact-active.png"
        }
    ]
  },

/**
* 组件的方法列表
*/

  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({ active: event.detail });
      this.updateActive(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
      
    },
  }
})

配置信息
在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启

这一段在官网也有解释

"tabBar":{
"custom":true,
"list":[]
}