1.分包加载

分包加载是优化小程序加载速度的一种手段。

微信平台对小程序单个包的代码体积限制为 2M，超过 2M 的情况下可以采用分包来解决
即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现按需加载
配置文件能忽略的只有静态资源，代码无法被忽略

示例

此时我们需要配置一个忽略文件

// 在 project.config.json 文件中配置
{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [
      {
        "value": "static/uploads",
        "type": "folder"
      }
    ],
    "include": []
  },

type：表示要忽略的资源类型

value: 表示具体要忽略的

这样讲的有点抽象,大家可以去微信小程序的官方文档去看看

参考:

developers.weixin.qq.com/miniprogram…

02.小程序分包加载-使用分包配置

我们知道小程序限制每个包代码量不超过2M，如果我们的小程序确实很复杂，代码量操过2M，应该如何解决呢？

分包

定义
将小程序拆分成若干个部分叫做分包。
作用

解决项目体积过大
提高启动效率
方便协同开发

分类：

主包：

每个小程序必定含有一个主包。
默认启动页面、TabBar 页面，以及公共资源/JS 脚本必须放在主包；

分包 developers.weixin.qq.com/miniprogram…

通过subPackages来配置
所有包的大小之和不超过20M

在小程序的全局配置中设置：

{
  // 省略其他的...
  
  "subPackages": [
      {
        "root": "subpkg_user", // 分包代码的目录，其实就是一个独立的文件夹
        "pages": [
          "pages/profile/profile"
        ]
      },
      {
        "root": "subpkg_order", // 文件夹
        "pages": [
          "pages/order_list/index", 
          "pages/order_list/index"
        ]
      }
  ]
}

注意：

写完分包之后，如果对应的文件夹和页面不存在，它会自动创建文件夹和页面。

<!--subpkg_user/pages/profile/profile.wxml-->
<view class="profile">
  <view class="nickname">
    <label for="">昵称:</label>
    <input bind:blur="getUserNickname" type="nickname" />
  </view>
  <view class="avatar">
    <label for="">头像:</label>
    <button bind:chooseavatar="getUserAvatar" open-type="chooseAvatar">
      <image src="{{avatar}}" mode="aspectFill"/>
    </button>
  </view>
</view>

.profile  {
  min-height: 300rpx;
  padding: 30rpx;
  border-radius: 10rpx;
  background-color: #fff;
}
.nickname, .avatar {
  display: flex;
  align-items: center;
  height: 80rpx;
  padding: 0 10rpx;
  border-bottom: 1rpx solid #eee;
}
.nickname label, .avatar label {
  margin-right: 20rpx;
}
.nickname input {
  flex: 1;
  border: none;
  text-align: right;
}
.avatar button {
  flex: 1;
  height: 60rpx;
  padding: 0 20rpx;
  text-align: right;
  background-color: transparent;
}
.avatar image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  vertical-align: baseline;
  background-image: url(https://lotjol.github.io/static-store/enjoy-plus/images/user_placeholder.png);
  background-size: cover;
}

总结

一个分包可以理解就是一个文件夹。
一个分包最大是2M；
不在分包内的页面属于主包；
tabbar对应的页面不能出现在分包中；

03.小程序分包—预下载

目标

理解及掌握分包预下载

理解分包预下载

在打开小程序启动的时候只下载主包代码，分包并不会下载，因此能够提升小程序启动时的打开速度，但是分包的代码只有在访问到分包的页面时才去下载，这样用户就需要有一定时间的等待（一般不太影响），通过分包预加载技术可以实现提前去下载分包的代码，这样分包页面的访问速度也会得到提升。
小程序通过 preloadRule 配置需要预加载的分包。

分包预下载的配置

在 app.json 中进行配置

格式

{
	"preloadRule": {
    "页面地址，进入这个页面就需要预加载分包": {
      "network": "网络环境",
      "packages": ["要预加载的包名"]
    }
  },
}

指定某个页面路径做为 key，含义是当访问这个页面时会去预加载一个分包
network 预加载分包的网络条件，可选值为 all、wifi，默认为 wifi
packages 指定要预下载的分包名或根路径

示例

{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["goods_pkg"]
    }
  },
}

上述的代码代表的含义是当用户访问到 pages/index/index 时，在 wifi 网络前提下预先下载 goods_pkg 分包的代码。

测试效果

配置完成之后，访问指定页面时，就会在控制台输出提示。

总结

分包只能提高主包的下载速度，也就是小程序的启动速度。分包预下载可以提高分包的加载速度。

04.自定义组件—生命周期-案例

自适应的自定义tabbar组件

背景

整个小程序中，全局配置中不启用自定义navBar，而在某个页面中使用自定义的navBar，此时，navBar默认会出现在页面的最顶部，如果需要正常显示出来，需要向下移动。

那具体要移动多少呢？不同的机型是不同的。

定义组件

<view class="navigate-bar" style="padding-top:20px">
  <view class="navigation-bar-title title-class">
    自定义标题
  </view>
</view>

.navigate-bar{
  text-align: center;
  line-height: 80rpx;
  height: 80rpx;
  background-color: green;
}

思路

在组件的生命钩子函数中，调用wx的getSystemInfoSync，拿到当前设备下，需要空出的距离，然后，就可以设置具体的下移距离啦。

核心代码

05.自定义组件-属性

在小程序中，properties是组件的对外属性，用于接收外界传递到组件中的数据，示例如下：

定义属性

Component({
	properties: {
    isOpen: Boolean,
  	min: Number, // 直接写类型
    max: {       // 写类型 + 初始值
    	type: Number,
      value: 10 // value用于指定默认值
    }
  }
})

从父组件中传入属性值

<my-test isOpen max="9" min="1" />
<my-test isOpen="{{true}}" max="9" min="1" />

  
<my-test isOpen="{{false}}" max="9" min="1" />
<my-test isOpen="false" max="9" min="1" />

查看或调试传入组件的数据

查看或调试传入组件的数据的查看方式如下图所示：

06.自定义组件-属性-案例-后退功能的navbar

需求

改造之前定义的navbar组件，允许用户自己决定是否显示后退按钮

基础结构和样式

<view class="navigation-bar" style="padding-top: {{statusBarHeight}}px;">
  <view class="navigation-bar-title title-class">
    <view class="navigation-bar-back"></view>
    <slot>
      插槽
    </slot>
  </view>
</view>

样式

.navigation-bar {
  left: 0;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
}

.navigation-bar-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.navigation-bar-back {
  position: absolute;
  left: 10px;
  width: 44px;
  height: 44px;
  background-image: url(https://lotjol.github.io/static-store/enjoy-plus/images/back-arrow.svg);
  background-repeat: no-repeat;
}

思路

设置properties，允许使用组件时，传入值
在模板中，根据这个值来决定是否显示后退按钮
给后退按钮添加点击事件，实现后退功能

代码

Component({
  properties: {
    back: Boolean // 定义properties
  },
  // 省略其他
  methods: {   
    onBack() {	// 定义后退按钮的回调处理函数
      wx.navigateBack()
    }
  }
})

结构

<view class="navigation-bar" style="padding-top: {{statusBarHeight}}px;">
  <view class="navigation-bar-title title-class">
    <view bindtap="onBack" wx:if="{{back}}" class="navigation-bar-back"></view>
    <slot>
      插槽
    </slot>
  </view>
</view>

07.自定义组件-组件通讯-自定义事件triggerEvent

目标

掌握从组件内部通知父组件的方式。

需求

封装countDown组件，功能：

从指定的秒数开始每隔1秒钟倒数一次。
当时间倒数为0时，要通知父组件。

代码

// components/count-down/count-down.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 属性名： 类型
    // 属性名：{
    //   type: 类型,
    //   value: 初始值
    // }
    num: {
      type: Number,
      value: 5
    }
  },
  lifetimes: {
    attached() {
      const timerId = setInterval(() => {
        // 获取num的值
        // console.log(this)
        // 把值-1
        const newNum = this.data.num - 1
        // 更新数据
        // 不能为负
        if (newNum === 0) {
          // 结束定时器
          clearInterval(timerId)
          // 通知父组件
          this.triggerEvent('end')
        }
        this.setData({ num: newNum })
        console.log('countdown')
      }, 1000)
    }
  }
})

结构

components\count-down\count-down.wxml

<text>{{num}}<slot></slot></text>

使用

<count-down num="3" bindend="hEnd">秒之后重发</count-down>

hEnd() {
  console.log('倒计时结束')
},

小程序基础应用3