微信小程序[黑马笔记]

简介

常用组件

视图组件

<!--pages/list/list.wxml-->

<scroll-view class="container1" scroll-y>

  <view>A</view>

  <view>B</view>

  <view>A</view>

</scroll-view>

<!--pages/list2/list.wxml-->

<swiper class="swiper_container" indicator-dots="true" indicator-color="white">

  <swiper-item class="item">

    A

  </swiper-item>

  <swiper-item class="item">

    B

  </swiper-item>

  <swiper-item class="item">

    C

  </swiper-item>

</swiper>

文本组件text/rich-text

<view>

长按选中效果

<text selectable>18580236389</text>

</view>

<view>

解析html字符串

<rich-text nodes="<h1 style='color:red;'>成功</h2>"/>

</view>

button组件

<view>-----通过type指定按钮类型----</view>

<button>默认按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button>

  

<view>-----size='mini'小尺寸按钮----</view>

<button size="mini">默认按钮</button>

<button type="primary" size="mini">主色调按钮</button>

<button type="warn" size="mini">警告按钮</button>

  

<view>-----plain镂空按钮----</view>

<button plain>默认按钮</button>

<button type="primary" plain>主色调按钮</button>

<button type="warn" plain>警告按钮</button>

image组件

  

<view>------不保持纵横比，直至填满整个img元素</view>

<image src="/images/1.jpg" mode=""/>

<image src="/images/1.jpg" mode="scaleToFill"/>

  

<view>---------保持纵横比缩放,完整显示</view>

<image src="/images/1.jpg" mode="aspectFit"/>

  

<view>--------保持纵横比,保证一个方向上完整显示</view>

<image src="/images/1.jpg" mode="aspectFill"/>

  

<view>--------固定宽度不变，保持原本宽高比</view>

<image src="/images/1.jpg" mode="widthFix"/>

  

<view>--------固定高度不变，保持原本的宽高比</view>

<image src="/images/1.jpg" mode="heightFix"/>****

小程序API

事件监听API

同步API

异步API

动态操作

数据绑定

  

Page(

  {

    // 页面的初始数据

    data:{

      //绑定数据

      info:'hello world',

      //绑定属性

      imgSrc:'https://www.itheima.com/images/logo.png',

      //三元运算

      randomNum: Math.random()*10//生成10以内的随机数

    }

  }

)

<!-- //动态绑定数据 -->

<view>

{{info}}

</view>

  

<view>

<!-- //动态绑定属性 -->

<image src="{{imgSrc}} " mode="widthFix"/>

</view>

<!-- 三元运算 -->

<view>

{{randomNum>=5 ? "success" : "faile"}}

</view>

事件绑定

事件

事件是渲染层（webview）到逻辑层(js)的通讯方式

通过事件将用户在渲染层产生的行为反馈到逻辑层进行业务的处理

常用事件

1. tap----bindtap/bind:tap----click
2. input----bindinput/bind:input
3. change--bindchange/bind:change

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event,详细属性如下表所示：

定义事件

通过事件给数据赋新值

  

Page(

  {

    data:{

      count: 0

    },

    //给data中的数据赋新值

    btnTest(){

     this.setData(

      {

        count: this.data.count+1

      }

     )

    }

  }

)

事件传参

Page(

  {

    data:{

      count: 0

    },

    //事件传参（data-*,其中*代表的是参数的名字）

    btnTest(e){

    this.setData(

      {

        count:this.data.count+e.target.dataset.info

      }

    )

    }

  }

)

  

<view>事件传参</view>

<view>

{{count}}

</view>

<button type="primary" bindtap="btnTest" data-info="{{2}}">+1</button>

input输入框的处理函数

  

Page(

  {

    data:{

      count: 0

    },

    //input 文本框的处理函数

    inputHandler(e){

      console.log(e.detail.value);

    }
     inputHandler2(e){

      console.log(e.detail.value);

      this.setData(

        {

          msg:e.detail.value

        }

      )

    }

  }

)

<view>

  bindinput 测试

</view>

<input bindinput="inputHandler"/>
<input value="{{msg}} " bindinput="inputHandler2"/>

语法

条件语法

wx:if="condition"

wx:elif="condition"

wx:else='condition'

结合block使用wx:if

一次性控制多个组件的展示与隐藏

block不是组件，只是一个包裹性质的容器，不会在页面中做任何性质的渲染

wx:if 实质：动态地创建或者移除元素

< block wx:if="condition">

组件1；

组件2；

< /block>

hidden

实质：切换display：none/block 样式控制元素的显示或者隐藏

hidden="{{condition}}"

condition===true 隐藏

反之显示

列表渲染

wx:for="{{array}}"

默认：index 索引 item 循环项

wx:for-index="idx"指定索引名

wx:for-item="itemName"指定循环项名

wx:key="id" 为渲染的列表项指定唯一的key,提高渲染效率

wxss模板样式

rpx

1.什么是rpx

小程序独有，解决不同屏的适配

2.实现原理

把屏幕从宽度上等分成750份

样式导入@import

@import "路径"；

全局配置

Window

控制导航栏区域以及背景区域

全局开启下拉刷新

添加配置项：enablePullDownRefresh

小圆点的色："backgroundTextStyle":"dark/light"

上拉触底距离

添加配置项：onReachBottonDistance

tabBar

{

  "pages":[

    "pages/home/home",

    "pages/like/like",

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"dark",

    "navigationBarBackgroundColor": "#666",

    "navigationBarTitleText": "My",

    "navigationBarTextStyle":"white",

    "enablePullDownRefresh": true,

    "backgroundColor": "#efefef"

  },

  "tabBar": {

    "list": [

        {

        "pagePath": "pages/home/home",

        "text": "首页",

        "iconPath": "/images/shouye-zhihui (2).png",

        "selectedIconPath": "/images/shouye-zhihui.png"

        },

        {

          "pagePath": "pages/like/like",

          "text": "收藏",

          "iconPath": "/images/xihuan (2).png",

        "selectedIconPath": "/images/xihuan.png"

        }

    ]

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

  

}

页面配置

app.json 中的window 全局配置小程序中的每个页面的窗口表现

网络数据请求

 wx.request({

    url: 'https://www.escook.cn/api/get',//请求的接口地址，必须基于https协议

    method:'GET',//请求方式

    data:{//发送到服务器的数据

      name:'zs',

      age:20

    },

    success:(res)=>{//请求成功之后的回调函数

      console.log(res.data);

    }，
    complete：()=>{
    
    }

  })

在页面刚加载的时候请求数据

在onload()生命周期函数中 调用 请求数据的 方法

 /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

    this.getEvent()

  },

跳过request合法域名校验

详情-》本地设置-》不校验合法域名。。。

跨域 & Ajax

跨域问题：

前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。

跨域问题只存在基于浏览器的web开发中，小程序的宿主环境是微信客户端，不存在跨域问题

Ajax请求

ajax技术基于浏览器中的XMLHttpRequest对象，由于小程序的宿主环境是微信客户端，小程序中不能叫做发起Ajax请求，叫做发起网络数据请求

视图与逻辑

页面导航

实现导航的两种方式

1.声明式导航

使用navigator组件
1.1 导航到tabBar页面的时候一定要声明open-type

  

<!-- 1.导航到tabBar页面 -->

<button type="primary">

  <navigator url="/pages/like/like" open-type="switchTab"> 导航到收藏页面</navigator>

</button>

<!-- 2.导航到非tabBar页面 -->

<button type="primary">

  <navigator url="/pages/index/index" open-type="navigate"> 导航到非tabBar面</navigator>

</button>

<button type="primary">

  <navigator url="/pages/index/index"> 导航到非tabBar面</navigator>

</button>

2.编程式导航

调用小程序的导航API

//页面结构
<button type="primary" bindtap="goto">

  编程式导航

</button>

  

<button type="primary" bindtap="goback">

编程式导航后退

</button>

//逻辑
//编程式导航跳转

  goto(){

    // wx.switchTab({

    //   url: '/pages/like/like',

    // })

    wx.navigateTo({

      url: '/pages/index/index',

    })

  },
  /编程式导航后退

    goback(){

      wx.navigateBack()

    }

接收传递参数

 /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    //获取传递过来的参数

    console.log(options);

    this.setData(

      {

        query:options

      }

    )

  },

页面事件

下拉刷新事件

1.启用下拉刷新效果

在window节点添加enableRefresh(全局开启/局部开启)

//页面结构
  

<view>count:{{count}} </view>

<button bindtap="add">监听事件刷新</button>

//逻辑
 add(){

    this.setData(

      {

        count : this.data.count+1

      }

    )

  },
 /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {

    this.setData({

      count:0

    })
    
      //自动关闭下拉

    wx.stopPullDownRefresh()

  },

2.实例（含节流操作）

//页面结构

<view wx:for="{{colorList}}" wx:key="index" style="background-color:rgba({{item}});">

{{item}}

</view>
//逻辑
// pages/message/message.js

Page({

  

  /**

   * 页面的初始数据

   */

  data: {

    colorList:[],//随机颜色列表

    isloading:false

  },

getColors(){

  this.setData(

    {

      isloading:true

    }

  )

  //1.展示loading效果

  wx.showLoading({

    title: '数据加载中',

  })

  

  //发起请求

  wx.request({

    url: 'https://applet-base-api-t.itheima.net/api/color',

    method:'get',

    success:(res)=>{

      this.setData({

        colorList:[...this.data.colorList,...res.data.data]

      })

    },

    //2.隐藏loading效果

   complete:()=>{

     wx.hideLoading()

    this.setData(

      {

        isloading:false

      }

    )

   }

  

  })

},

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

    this.getColors()

  },

  

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

    if(!this.data.isloading)

      this.getColors()

  },

})

生命周期

指的是一个对象从创建-运行-销毁的过程

生命周期函数

是小程序框架提供的内置函数，伴随生命周期的运行，自动按次序执行

作用:

允许程序员在特定的时间点执行特定的操作

应用的生命周期函数

App({

  //1.小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化操作

  onLaunch() {

  },

  //2.小程序启动，或从后台进入前台显示时触发

  onShow(){

  

  },

  //3.小程序从前台进入后台时触发

  onHide(){},

  globalData: {

    userInfo: null

  }

})

页面周期函数

  

  /**

   * 生命周期函数--监听页面加载(一个页面调用一次)

   */

  onLoad: function (options) {

    //获取传递过来的参数

    console.log(options);

    this.setData(

      {

        query:options

      }

    )

  },

  

  /**

   * 生命周期函数--监听页面初次渲染完成(一个页面调用一次)

   */

  onReady: function () {

  },

  

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  

  /**

   * 生命周期函数--监听页面卸载(一个页面调用一次)

   */

  onUnload: function () {

  },

WXS脚本

wxml中不能调用页面的js中定义的函数，但是wxml中可以调用wxs中定义的函数
常用于：过滤器

与JavaScript的关系

wxs有自己的数据类型
	1.number string boolean object
	2.function array date regexp
wxs不支持ES6及以上的语法格式
	1.不支持：let const 解构赋值 展开运算符 箭头函数 对象属性简写 etc
	2.支持：var定义变量，普通function函数等类似于ES5的语法
wxs遵循CommonJS规范
	module对象
	require()函数
	module.exports对象

wxs特点

不能作为组件的事件回调函数

bindtap="m2.toLower"---错误用法

隔离性：

1.不能调用js中定义的函数

2.也不能调用小程序提供的API

性能好：

在ios上快

使用

内联

<view>

{{m1.toUpper(data)}}

</view>

  
  

<!-- 定义内联的wxs -->

<wxs module="m1">

  module.exports.toUpper=function(str)

  {

    return str.toUpperCase();

  }

</wxs>

外联的wxs脚本

1.新建wxs文件

function toLower(str)

{

  return str.toLowerCase();

}

module.exports={

  toLower:toLower

}

2.页面引入使用

<view>

{{m2.toLower(country)}}

</view>

<wxs src="/utils/tools.wxs" module="m2"/>

基础加强

自定义组件

创建组件

1.根目录下创建components目录

2.右键选择创建test文件夹

3.右键test文件夹选择新建componen文件

局部引用 & 全局引用

在app.json 或者页面.json，中引用
{

  "usingComponents": {

    "my-test1":"/components/test/test"

  }

}

//在wxml中使用
 <my-test1></my-test1>

组件与页面的区别

1.组件的json文件 需要声明 "component": true,

2.组件的js文件中调用的是 Component()函数

3.组件的事件处理函数需要定义到methods节点中

自定义组件的样式

组件样式隔离

 默认情况下，自定义组件样式只在组件内部生效，不被全局样式影响也不影响全局的样式
	只适用于class选择器
修改样式隔离效果
	通过stylesolation 修改

	//在组件的json文件新增配置
	"styleIsolation":"isolated"
	//或在组件的js文件中
	Component({
	options:{
		styleIsolation:"isolated"
	}
	})

styleIsolation 
		默认：isolated 独立不受影响
		apply-shared:页面影响组件
		shared：双向影响

数据监听器

// components/test/test.js

Component({


  /**

   * 组件的初始数据

   */

  data: {

    n1:0,

    n2:0,

    sum:0

  },

  

  /**

   * 组件的方法列表

   */

  methods: {

    addcountn1()

    {

      this.setData({

        n1:this.data.n1+1

      })

    },

    addcount2(){

      this.setData({

        n2:this.data.n2+1

      })

    }

  },

  observers:{//数据监听节点

    'n1,n2':function(n1,n2){//监听n1,n2的数据变化

      this.setData({

          sum:n1+n2

      })

    }

  }

})


//逻辑

<!--components/test/test.wxml-->

<view>数据监听器的使用</view>

<view>{{n1}}+{{n2}}={{sum}} </view>

  

<button bindtap="addcountn1">n1+1</button>

<button bindtap="addcount2">n2+1</button>

纯数据字段

不用于界面渲染的data字段

定义

在options节点中，指定pureDataPattern为一个正则表达式

Components({
options:{
	//指定以_开头的数据字段为纯数据字段
	pureDataPattern:/^__/
}
})

生命周期函数

created---组件实例被创建时

attached----在组件实例进入页面节点树时

ready

moved

detached---在组件实例被页面节点树移除后执行

eeror

created

不能调用setData方法

attached

组件完全初始化完毕，进入页面节点树

detached

做一些清理性质的工作

如何定义生命周期函数

Coimponents({
lifetimes:{
attached(){};//组件实例进入页面节点树时执行
detached(){};//组件实例被页面节点树移除时执行
}
})

组件所在页面的生命周期

Component({
pageLifetimes:{
show:function (){};//页面被展示
hide:function(){};//页面被隐藏
resize:function (){};//页面尺寸变化
}
})

自定义组件的插槽

在自定义的wxml结构中，提供< slot>节点（插槽），用于承担组件使用者提供的wxml结构

1.单个插槽

<!--components/test1/test1.wxml-->

<text>components/test1/test1.wxml</text>

<view>

<view>这里是组件的内部结构</view>

<slot></slot>

</view>

//使用

<my-test2>

<view>调用者：填充插槽</view>

</my-test2>

2.启用多个插槽

在组件的js文件

// components/test1/test1.js

Component({

/**

 * 配置节点

 */

  options:{

    multipleSlots:true

  },

  

  /**

   * 组件的属性列表

   */

  properties: {

  

  },

  

  /**

   * 组件的初始数据

   */

  data: {

  

  },

  

  /**

   * 组件的方法列表

   */

  methods: {

  

  }

})

使用多个插槽
	使用多个slot标签，以不同的name来区分不同的插槽

	<!--components/test1/test1.wxml-->

<text>components/test1/test1.wxml</text>

<view>

<view>这里是组件的内部结构</view>

<slot name="before"></slot>

<slot name="after"></slot>

</view>

//页面结构
<my-test2>

<view slot="before">插入组件的before位置</view>

<view slot="after">插入组件的after位置</view>

</my-test2>

组件通信

属性绑定

父传子--传递json兼容的数据

//父组件
<my-test2 count="{{count}} "></my-test2>
<view>~~~~~</view>
<view>父组件中count的值：{{count}}  </view>
//子组件
<view>子组件中coount的值：{{count}}  </view>

<button type="primary" bindtap="addCount">加一</button>

事件绑定

子传父--传递任意数据
1.在父组件的js中定义函数
2.在父组件的wxml中，将定义的函数引用传递给子组件
3.在子组件的js中，通过this.triggerEvent('自定义事件名'，{/*参数对像*/})，将数据发送到父组件
4.在父组件的js中，通过e.detail获取子组件传过来的数据

自定义事件

bind:自定义事件名

//父组件的js文件
syncData(e){

    console.log("这是父组件的函数");

    console.log(e.detail);

  

    this.setData({

      count:e.detail.value

    })

  },
//父组件的wxml文件
<my-test2 count="{{count}} " bind:syncData="syncData"></my-test2>

  

<view>~~~~~</view>

  

<view>父组件中count的值：{{count}}  </view>

//子组件的js
 methods: {

    addCount(){

      this.setData({

        count:this.properties.count+1

      }),

      //触发自定义事件，将数值同步给父组件

    this.triggerEvent('syncData',{value: this.properties.count})

    }

  }

获取组件实例

父组件通过this.selectComponent("id选择器/class选择器")获取子组件实例对象

//父组件wxml
<my-test2 count="{{count}} " bind:syncData="syncData" class="getit"></my-test2>
<view>~~~~~</view>
<view>父组件中count的值：{{count}}  </view>
<button type="primary" bindtap="getChild">获取子组件实例</button>

//父组件js
getChild(){

   const child= this.selectComponent('.getit');

   child.setData({

     count:child.properties.count+1

   }),

   this.setData({

     count:this.data.count+1

   })

  },

behaviors

实现数据共享

1.创建组件

//调用behavior方法，创建实例对象

//使用module.exports将behaviors实例对象共享出去

  

module.exports=Behavior({

  //属性节点

  properties:{},

  //私有数据节点

  data:{

    username:'zs',

  },

   //事件处理函数与自定义的方法节点

   methods:{},
   //引入其他的behaviors
   behaviors:{}

   //其他节点

})

2.使用组件

//1.在组件中导入需要的behavior，

const myBehavior=require('../../behaviors/my-behaviors')

  

Component({
  //2.将导入的behaviors实例对象，挂载到behaviorss数组节点中
  behaviors:[myBehavior],
  })

同名字段的覆盖与组合规则

组件和他引用的behavior中可以包含同名的字段

处理规则：

1.data同名

2.propeties或者methods同名

3.生命周期函数同名

参考开发者文档

使用npm包

限制：

依赖于nodeJs的内置包

依赖于浏览器内置对象的包

依赖于c++插件的包

Vant Weapp

小程序UI组件库

使用

定制主题

/* 

1.在app.wxss中定义css变量

*/

page{

  --main-bg-color: brown;

  

}


.one {

  color: white;

  /* 2.使用css变量 */

  background-color: var(--main-bg-color);

  

  width: 500px;

  height: 500px;

}

小程序API的promise化

API的promise化

通过相关配置将官方提供的基于回调函数的异步API升级改造为基于Promise的异步API,避免出现回调地狱

1.实现promise化

在app.is中

//调用promisifyAll() 方法

//实现异步API的Promise化

import{promisifyAll} from 'miniprogram-api-promise'

const wxp=wx.p={}

//promisify all wx's api

promisifyAll(wx,wxp)

2.调用Promise化后的异步API

//wxml结构
<view>初体验vant  weapp</view>

<view>~~~~ </view>

<van-button type="primary" bindtap="getInfo">按钮</van-button>

//js
/**

 * async  声明getInfo 是个异步对象

 * await  将后续的promise的resolve返回

 */

  

  async getInfo()

  {

    //1.基于回调函数的API

    // wx.request({

    //   url: 'url',

    // })

    //2.基于Promise的API

    const {data:res}=await wx.p.request({

     url: 'https://applet-base-api-t.itheima.net/api/get',

     data:{

       name:"zs",

       age : 20

     },

    })

  

    console.log(res);

  },

全局数据共享

即状态管理：

解决组件之间的数据共享问题

开发中常用的方案：

VueX,Redux,MobX

小程序中：

安装包：

1.mobx-miniprogram 创建Store实例对象

2.mobx-miniprogram-bindings 将Store中的共享数据或者方法绑定到组件或者页面中使用

1.新建store.js文件

//创建store实例对象

//1.导入observable方法（返回值是store对象）

import {action, observable} from 'mobx-miniprogram'

  

//2.向外共享store

export const store = observable({

  //数据字段

  Num1:1,

  Num2:2,

  //计算属性(添加前缀 get--声明只能得到)

  get sum()

  {

    return this.Num2+this.Num1

  },

  //actions 方法，用来修改store中的数据

  updateNum1: action(function(step){

    this.Num1+=step

  }),

  updateNum2:action(function(step){

    this.num2+=step

  })

})

2.1将store的成员绑定到页面中

//页面的js文件

import {createStoreBindings} from 'mobx-miniprogram-bindings'

import{store} from '../../store/store'

// pages/home/home.js

Page({

  


  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

    this.storeBindings=createStoreBindings(this,{

      store,//数据源

      fields:['num1','num2','sum'],//绑定的字段

      actions:['updateNum1']//需要的方法

    })

  },

  

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

    this.storeBindings.destroyStoreBindings()

  },

  

2.2 将store中的成员绑定到组件中去

//导入

import{storeBindingsBehavior} from 'mobx-miniprogram-bindings'

import{store} from '../../store/store'

  

// components/numbers/numbers.js

Component({

  //通过storeBindingsBehavior实现自动绑定

  behaviors:[storeBindingsBehavior],

  storeBindings:{

    //指定绑定的store

    store,

    //指定绑定的字段数据

    fields:{

      //绑定字段的三种方式

        Num1:()=>store.Num1,

      Num2:(store)=>store.Num2,

      sum:'sum'

    },

    //指定绑定的方法

    actions:{

      updateNum2:'updateNum2'

    }

  },

3.1页面中使用绑定的成员

  //页面的wxml

<view>{{Num1}} + {{Num2}} = {{sum}} </view>

<van-button type="primary" bindtap="btnHandler" data-set="{{1}} ">Num1加一</van-button>

<van-button type="danger" bindtap="btnHandler" data-set="{{-1}} ">Num1减一</van-button>

//页面的js
 btnHandler(e){
    this.updateNum1((Number)(e.target.dataset.set))

  },

3.2 在组件中使用

<!--components/numbers/numbers.wxml-->

<view>{{Num1}} + {{Num2}} = {{sum}} </view>

<van-button type="primary" bindtap="btnHandler" data-set="{{1}} ">Num2加一</van-button>

<van-button type="danger" bindtap="btnHandler" data-set="{{-1}} ">Num2减一</van-button>

分包

将完整的小程序项目分解为一个主包+多个分包
主包：
	一般包含项目的启动页面与TabBar页面，以及分包所用到的公共资源
分包：
	只包含与当前分包有关页面与私有资源

分包的加载规则:

小程序加载后默认下载主包并启动主包的页面
当用户进入分包的某个页面的时候，客户端下载对应的分包

打包原则

1.小程序按照subpackages的配置进行打包，subpackages之外的目录将被打包到主包当中
2.主包可以有自己的pages(最外层的pages字段 app.js)
3.tabBar页面必须在主包内
4.分包之间不能嵌套

引用原则

1.主包不能引用分包的私有资源

2.分包之间不能互相引用私有资源

3.分包可以引用主包内的公共资源

独立分包

在不下载主包的情况下独立运行

不能引用主包中的资源

分包预下载

在进入小程序的某个页面的时候，由框架自动下载可能需要的分包，从而提升进入后续分包页面的启动速度

1.在app.js里面 使用preloadRule节点来定义分包的预下载

//分包预下载的规则
 "preloadRule": {
//触发分包预下载的页面路径
   "pages/message/message":{
//表示在指定的网络模式下进行预下载
//可选值为：all（不限网络）/wifi(仅wifi模式下加载)

     "network": "all",
//表示进入页面之后要下载哪些分包
//可以通过root 或者 name 指定预下载哪些分包
     "packages": ["pkgA"]

   }

 },

限制：

同一个分包的页面享有共同的预下载的大小限额2M