微信小程序

微信开发者工具

安装

1 2	<!-- 微信开发者工具下载 --> https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具下载

开发工具页面认识

开发工具认识

Vscode 搭建微信小程序开发环境

Easy Less 插件

// 微信小程序开发环境搭建
"less.compile": {
    "outExt": ".wxss"
},
"[less]": {
    "editor.suggest.insertMode": "replace"
}

Vscode 内下载微信小程序

环境配置

创建微信小程序项目

创建项目(选择 ID)

创建一个空项目	`javascript`-模板

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
E:.
│  .eslintrc.js
│  app.js // 必须: 是  作用: 小程序逻辑
│  app.json // 必须: 是 作用: 小程序公共配置
│  app.wxss // 必须: 否 作用: 小程序公共样式表
│  project.config.json
│  project.private.config.json
│  sitemap.json
│
├─pages
│  ├─index
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  │
│  └─logs
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│
└─utils
        util.js

组成

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

app.json 配置认识

`app.json=> pages 配置项第一个不能加 /`

组件

视图容器类组件

view == div
1. 普通视图区域
2. 类似于HTML 中的div，是一个块级元素
3. 常用来实现页面的布局效果
scroll-view
1. 可滚动的视图区域
2. 常用来实现滚动列表效果

swiper 和 swiper-item

轮播图容器组件和轮播图item 组件

使用

<!--pages/swiper/swiper.wxml-->
<!-- 轮播图容器区域 -->
<!-- 
  indicator-dots: 显示面板指示点 
  indicator-color: 颜色值
  autoplay: 自动切换
  interval: 切换时间

-->
<swiper class="swiper-container" indicator-dots 
indicator-color="white"
indicator-active-color="red"
 autoplay interval="3000" >
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
  <swiper-item>
    <view class="item">D</view>
  </swiper-item>
</swiper>

<!--pages/swiper/swiper.wxml-->
<!-- 轮播图容器区域 -->
<!-- 
  indicator-dots: 显示面板指示点 
  indicator-color: 颜色值
  autoplay: 自动切换
  interval: 切换时间

-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" circular autoplay interval="3000">
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
  <swiper-item>
    <view class="item">D</view>
  </swiper-item>
</swiper>

swiper 常用属性

属性	类型	默认值	说明
`indicator-dots`	`boolean`	`false`	是否显示面板指示点(`小圆点`)
`indicator-color`	`color`	`rgba(0,0,0,.3)`	指示点颜色
`indicator-active-color`	`color`	`#000`	当前选中的指示点
`autoplay`	`boolean`	`false`	是否自动切换
`interval`	`number`	`5000`	自动切换时间间隔
`circular`	`boolean`	`false`	是否采用衔接滑动

基础内容组件

text

文本组件
类似于HTML 中的span 标签,是一个行内元素

使用支持长按选中(text标签)

<view>
    手机号支持长按选中:
    <text selectable>1236849350</text>
</view>

rich-text

富文本组件
支持把HTML 字符串渲染为WXML 结构

使用

1
2
3

<rich-text nodes="<h2 style='color:red;'> h2 标签 <h2>"></rich-text>

  "style": "v2", // 全局配置中控制样式是否为新版(v2)

表单组件

Button

按钮组件
通过open-type 属性可以调用微信提供的各种功能(客服，转发，获取用户信息等)

使用

<!-- 按钮 -->
<view>~~~~~~~~~~~~~~~ 通过 type 指定按钮类型 ~~~~~~~~~~~~~~~~~</view>
    <button>默认按钮</button>
    <button type="primary">主色调按钮</button>
    <button type="warn">警告按钮</button>

<view>~~~~~~~ 通过 size="mini" 小尺寸按钮 ~~~~~~~~</view>
    <button>默认按钮</button>
    <button type="primary" size="mini">主色调按钮</button>
    <button type="warn" size="mini">警告按钮</button>

<view>~~~~~~~ ~plain 镂空按钮 ~~~~~~~~~</view>plain
    <button>默认按钮</button>
    <button type="primary" size="mini" plain>主色调按钮</button>
    <button type="warn" size="mini" plain>警告按钮</button>

// open-type: 微信开放能力
// getUserInfo: 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）
<button open-type="getUserInfo">获取用户信息

image

图片组件
image 组件默认宽度约300px 高度约240px

使用

`image` 组件

src 属性：相对路径

mode 属性

`mode` 值	说明
`scaleToFill`	(默认值)缩放模式,`不保持纵横比缩放图片`使图片宽高完全拉伸至`填满 image` 元素
`aspectFit`	缩放模式,`保持纵横比缩放图片,使图片的长边能完全显示出来`，也就是说,，可以完整地将图片显示出来
`aspectFill`	缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取
`widthFix`	缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
`heightFix`	缩放模式,高度不变,宽度自动变换,保持原图宽高比不变

图片缩放格式

导航组件

API

事件监听

事件监听API
- 特点: 以on 开头,用来监听某些事件的触发
- 举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
同步API
- 特点1:以Sync 结尾的API,都是同步API
- 特点2: 同步API 的执行结果,可以通过函数返回值直接获取,如果知心话出错会抛出异常
- 举例:wx.setStroageSync(key,value) 向本地存储中写入内容
异步API
- 特点: 类似于jQuery 中的$.ajax(options) 函数,需要通过success,fail,complete 接收调用的结果
- 举例:wx.request() 发起网络数据请求,通过success 回调函数接收数据

`WXML` 模板语法-数据绑定

数据绑定与使用

数据定义

// index.js
// 获取应用实例
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userName: "coder-itl2"
  },
})

数据使用

1 2	<!-- 使用定义的数据 --> <text>{{userName}}</text>

数据修改

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
    // 数据修改
    this.setData({
        userName: "lisi"
    })
    // 数据获取 this.data.xxx
    console.log(this.data.userName);
}

数据修改与获取

事件绑定

类型	绑定方式	事件描述
`tap`	`bindtap 或 bind:tap`	手指触摸后马上离开,类似与`HTML` 中的`click` 事件
`input`	`bindinput 或 bind:input`	文本框的输入事件
`change`	`bindchange 或 bind:change`	状态改变时触发

事件绑定

<!-- bind -->
<view bindtap="btnTouch" class="bindTouch">
    <view bindtap="viewTouch">绑定事件</view>
</view>

<!-- catch -->
<view catchtap="btnTouch" class="bindTouch">
      <view catchtap="viewTouch">绑定事件</view>
</view>

冒泡事件

// bind绑定: 事件绑定不会阻止冒泡事件向上冒泡
// 定义: 当一个租价上的事件被触发后，该事件会向父节点传递

/**
 * viewTouch 自定义事件(bindtap => 冒泡事件)
 */
viewTouch(){
  console.log("(内层) bindtap => 冒泡事件1")
},
 /**
  * btnTouch 自定义事件(bindtap => 非冒泡事件)
  */
 btnTouch(){
   console.log("(外层) bindtap => 冒泡事件2")
 },

非冒泡事件

1 2	// 当一个组件上的事件触发后,该事件不会向父节点传递 // catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

事件位置

事件对象的属性列表

属性列表

属性	类型	说明
`type`	`String`	事件类型
`timeStamp`	`Integer`	页面打开到触发事件所经过的毫秒数
`target`(*)	`Object`	触发事件的组件的一些属性值集合
`currentTarget`	`Object`	当前组件的一些属性值集合
`detail`(*)	`Object`	额外的信息
`touches`	`Array`	触摸事件,当前停留在屏幕中的触摸点信息的数组
`changeTouches`	`Array`	触摸事件,当前变化的触摸点信息的数组

区别e.target 和e.currentTarget
target 是触发时间的源头组件,而currentTarget 则是当前事件所绑定的组件

点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view 的tap 事件处理函数

此时,对于外层的view 来说:
- e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
- e.currentTarget 指向的是当前正在触发事件的那个组件,因此，e.currentTarget 是当前的view 组件

路由跳转(API)

wx.navigateTo(Object object)

功能描述

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

// 实现路由跳转
btnTouch() {
    // 路径是相对路径 /pages/logs/logs => 有点 this.$router.push 的感觉
    wx.navigateTo({
        url: '/pages/logs/logs',
    })
},

wx.redirectTo(Object object)
- 功能描述
  
  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.reLaunch(Object object)

功能描述

关闭所有页面，打开到应用内的某个页面

路由跳转	全局配置-局部配置

事件传参

参数问题

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数，例如下边：

参数传递

1	<button bindtap="btnHandler" data-info="{{'参数数据'}}"> 事件传参 </button>

info 会被解析为参数的名字
字符串会被解析为参数的值

参数值获取

在事件处理函数中,通过event.target.dataset.参数名即可获得具体参数的值

btnHandler(event){
    // dataset 是一个对象,包含了所有通过 data-* 传递过来的参数项
    console.log(event.target.dataset)
    // 通过 dataset 可以访问到具体参数的值
    console.log(event.target.dataset.info)
}

参数传递-数据获取

条件渲染

<view wx:if="{{condition}}"> 来判断是否需要渲染该代码块
    
 wx:elif
 wx:else 
    
eg:
      <view wx:if="{{sex===1}}"> 男 </view>
 	  <view wx:elif="{{sex===2}}"> 女 </view>
  	  <view wx:else>保密</view>

block

如果一次性控制多个组件的展示与隐藏,可以使用一个<block></block> 标签将多个组件包装起来,并在<block> 标签上使用wx:if 控制属性

<block wx:if="sex==3">
    <button type="primary" bindtap="getEventInfo"> event </button>
    <button type="primary" bindtap="getEventInfo"> event </button>
    <button type="primary" bindtap="getEventInfo"> event </button>
</block>

注意:<block> 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染

hidden

在小程序中,直接使用hidden={{condition}} 也能控制元素的显示与隐藏

1	<view hidden={{condition}}> 条件为 true 隐藏，条件为 false 显示</view>

`hidden`

wx:if 与hidden 区别
- 运行方式不同
  - wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
  - hidden 以切换央视的方式(display: none/block)控制元素的显示与隐藏
- 使用建议
  - 频繁切换时,建议使用hidden
  - 控制条件复杂时,建议使用wx:if 搭配wx:elif wx:else 进行展示与隐藏的切换

列表渲染

wx:for

通过wx:for 可以根据指定的数组,循环渲染重复的组件结构

data: array:["a","b","c"]

<view wx:for="{{array}}">
    索引是:: {{index}},当前项是:{{item}}
</view>

默认情况下,当前循环的索引用 index 表示,当前循环项用 item 表示

wx:key

类似于Vue 列表渲染中的key，小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key 值,从而提高渲染的效率

userList: [
    { id: 1,  name: "001" },
    { id: 2, name: "002" }, 
    { id: 1, name: "001"}
]

1
2
3

<view wx:for="{{userList}}" wx:key="id">
    索引是: {{index}},当前项是:{{item.name}}
</view>

模板样式

什么是WXSS

WXSS（WeiXin Style Sheets）是一套样式语言，用于美化WXML 的组件样式,类似于网页开发中的CSS
WXSS 和CSS 的关系

WXSS 具有CSS 大部分特性,同时,WXSS 还对CSS 进行可扩充以及修改,以适应微信小程序的开发
- 扩展特性
  - rpx 尺寸单位
  - @import 样式导入
rpx 是什么

rpx(response pixel) 是微信小程序独有的,用来解决屏适配的尺寸单位
rpx 的实现原理

rpx 的实现原理: 鉴于不同设配屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕在宽度上等分为750 份(即当前屏幕的总宽度为750rpx)

样式导入

1	@import "相对路径";

全局配置

配置项

小程序根目录下的app.json 文件是小程序的全局配置文件

pages: 记录当前小程序的页面的存放路径
window*: 全局设置小程序窗口外观
tabBar*：设置小程序底部的tabBar 效果
sytle: 是否启用新版的组件样式

小窗口的组成部分

小窗口的组成部分

Window-节点配置项

属性名	类型	默认值	说明
`navigationBarTitleText`	`String`	字符串	导航栏标题文字内容
`navigationBarBackgroundColor`	`HexColor`	`#000000`	导航栏背景颜色(`16进制`)
`navigationBarTextStyle`	`String`	`white`	导航栏标题颜色,仅支持`black
`backgroundColor`	`HexColor`	`#fffff`	窗口的背景色
`backgroundTextStyle`	`String`	`dark`	下拉`loading` 的样式,仅支持`dark/light`
`enablePullDownRefresh`	`Boolean`	`false`	是否全局开启下拉刷新
`onReachBottonDistance`	`Number`	`50`	页面上拉触底事件出发时距页面底部距离,单位为`px`

`tabBar`

什么是tabBar

tabBar 是移动端应用中常见的页面效果,用于实现多页面的快速切换，小程序中通常分为两种
- 底部tabBar
- 顶部tabBar
- 注意: tabBar 只能配置最少2 个,最多5 个tab 页签,当渲染顶部tabBar 时,不显示icon，只显示文本

tabBar 的6 个组成部分

组成

含义
1. backgroundColor:tabBar 的背景色
2. selectedIconPath：选中时的图片路径
3. borderStyle：tabBar 上边框的颜色
4. iconPath:未选中时的图片路径
5. selectedColor:tab 上的文字选中时的颜色
6. color：tab 上文字的默认(未选中)颜色

tabBar 节点配置项

属性	类型	必填	默认值	描述
`position`	`String`	否	`bottom`	`tabBar` 的位置,仅支持`bottom/top`
`borderStyle`	`String`	否	`black`	`tabBar` 上边框的颜色,仅支持`black/white`
`color`	`HexColor`	否		`tab` 上文字的默认(`未选中`)颜色
`selectedColor`	`HexColor`	否		`tab` 上的文字选中时的颜色
`backgroundColor`	`HexColor`	否		`tabBar` 的背景色
`list*`	`Array`	`是`		`tab` 页签上的列表,最少`2` 个,最多`5` 个`tab`

app.json

// 全局配置项 与 window 同级别

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/swiper/swiper",
        "text": "轮播图"
      }
    ]
  },

tab 项的配置选项

属性	类型	必填	描述
`pagePath`	`String`	`是`	页面路径,页面必须在`pages` 中预先定义
`text`	`String`	`是`	`tab` 上显示的文字
`iconPath`	`String`	否	未选中时的图标路径,当`position` 为`top` 时,不显示`icon`
`selectedIconPath`	`String`	否	选中时的图标路径,当`position` 为`top` 时,不显示`icon`

`tabBar`

页面配置

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

网络请求

小程序中网络数据请求的限制

只能请求HTTPS 类型的接口

必须将接口的域名添加到信任列表中

配置域名	配置服务器

配置合法域名

配置步骤: 登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request 合法域名

服务器域名安全配置添加域名 request 合法域名校验出错解决

Get

get

wx.request({
      // 请求的接口地址,必须基于 https 协议
      url: 'https://escook.cn/api/get',
      // 请求方式
      method: "GET",
      // 发送到服务器的数据
      data: {
        name: 'zs',
        age: 22
      },
      success: (res)=>{
        // 请求成功后的回调函数
        console.log(res);
      }
    })

成功获取`get` 请求数据
`

POST

post

wx.request({
      // 请求的接口地址,必须基于 https 协议
      url: 'https://escook.cn/api/post',
      // 请求方式
      method: "POST",
      // 发送到服务器的数据
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        // 请求成功后的回调函数
        console.log(res);
      }
    })

成功获取`POST` 数据

导航跳转

声明式导航

在页面上声明一个<navigator> 导航组件
通过点击<navigator> 组件实现页面跳转

导航到tabBar

1	<navigator url="/pages/mv/mv" open-type="switchTab"> 跳转 </navigator>

导航到非tabBar

1
2
3

<navigator url="/pages/logs/logs" open-type="navigate"> 跳转 </navigator>
// 简写
<navigator url="/pages/logs/logs"> 跳转 </navigator>

后退导航

1 2	<navigator url="/pages/logs/logs" open-type="navigateBack" delta="1"> 返回上一页 </navigator> // delta = "后退层级数"

编程式导航

调用小程序的导航API，实现页面的跳转

导航到tabBar

// 页面结构
<button bindtap="gotoMessage">跳转到 tabBar </button>

// 通过编程式导航 跳转到 message
gotoMessage(){
wx.switchTab({
	url: "/pages/message/message"
})
}

跳转到非tabBar


gotoMessage(){
    wx.navigateTo({
          url: '/pages/logs/logs',
	})
}

后退导航

// 后退
wx.navigateBack()

// 

wx.navigateBack({
    detail: 1
})

生命周期

摘自官网

生命周期函数

1 2	// 发送请求可以在 onload \| onready 生命周期函数中

Vant WebApp

官方文档

1	https://vant-contrib.gitee.io/vant-weapp/#/quickstart

安装

# 初始化 packjson.json
npm init -y
# 安装
npm i @vant/weapp@1.3.3 -S --production

工作区打开外部终端	初始化`package.json`

构建npm(工具-> 构建 npm)

配置项中添加如下配置:

// 可以在 app.json | 局部页面配置项中
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

`vant-button`

定制CSS主题

css 定制

节点(作用域){
    --name: value(HexColor)
}

html{
    --background-color: red;
}

div{
    background-color: var(--background-color)
}

vant

-->  var.less
https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

<!-- less 定义方式 --> 
@button-warning-background-color: @orange;
@button-warning-border-color: @orange;

<!-- css 定义样式 -->
--button-warning-background-color: orange;
--button-warning-border-color: orange;

<!-- 小程序的根节点 page -->

API Promise 化

在小程序中,实现API Promise 化主要依赖于miniprogram-api-promise 这个第三方npm 包

1 2	npm install --save miniprogram-api-promise@1.0.4

使用

// app.js => promise 化配置

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

const wxp = wx.p = {}
// 将微信aps promise 化
promisifyAll(wx, wxp)

wx.p

// 使用 wx.p
async primaryBtn() {
    const { data: res } = await wx.p.request({
        url: 'https://www.escook.cn/api/get',
        method: 'GET',
        data: {
            name: 'zs',
            age: 18,
        },
    })
    console.log(res)
},

`get ok`

组件封装

自定义组件

// 根目录下创建 components 文件夹
// 创建自定义组件
<!--components/HavHeader/HavHeader.wxml-->
<view class="header">
    <view>
        <text>{{nav}}</text>
        <text class="more">查看更多</text>
    </view>
</view>

/* components/HavHeader/HavHeader.wxss */
.header {
    line-height: 60rpx;
}
.header .title {
    font-size: 32rpx;
    line-height: 80rpx;
    color: #666;
}

.header .more {
    float: right;
    line-height: 30rpx;
    border: 1rpx solid #333;
    padding: 10rpx 20rpx;
    font-size: 22rpx;
    border-radius: 25rpx;
}



// 数据
Component({
    /**
     * 组件的属性列表 prop(Vue)
     */
    properties: {
        title: {
            type: String,
            value: 'title默认值'
        },
        nav: {
            type: String,
            value: 'nav默认值'
        }
    },
        ...
}

// 注册组件 => 全局 | 局部

<!--头部区域-->
<NavHeader title="排行榜" nav="热门风向标"></NavHeader>

小程序的全局数据共享方案

安装

在小程序中,可使用mobx-miniprogram 配合mobx-minprogram-bindings 实现全局数据共享
mobx-miniprogram 用来创建Store 实例对象
mobx-minprogram-bindings 用来吧Store 中的共享数据或方法,绑定到组件或页面中使用

安装

1	npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意: Mobx 相关的包安装完毕后,记得删除 miniprogram_npm 目录,然后重新构建 npm

创建实例

// store/store.js
// 该文件专门创建 Store 实例对象
import { observable, action } from 'mobx-miniprogram'
export const store = observable({
    // 共享的数据
    numA: 'A',
    numB: 'B',

    // 计算属性 get关键字(表明只读)
    get sum() {
        return this.numA + this.numB
    },
    // action function 用来修改 store 中的数据
    updateNumA: action(function (step) {
        this.numA += step
    }),
})

将`Store` 中的成员绑定到页面

绑定数据

// 1. 导入 Store
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'


// 2. Page 的 onLoad
/**
     * 生命周期函数--监听页面加载
     */
onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
        store,
        fields: ['numA'],
        actions: ['updateNumA'],
    })
    console.log(this.storeBindings)
},
// 3.
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        this.storeBindings.destroyStoreBindings()
        console.log(
            'this.storeBindings.destroyStoreBindings()......................'
        )
    },

将 `Store` 中的成员绑定到组件中

自定义组件(根目录下创建 components)

`Component`

// app.json 全局注册 | 局部注册(页面级别)
"usingComponents": {
   "my-component": "./components/numbers/numbers"
}

// 自定义组件中
// 1.
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'


Component({
  behaviors: [storeBindingsBehavior], // 通过 storeBindingsBehavior 来实现自动绑定
  storeBindings: {
      store, // 指定要绑定的 Store
      fields: {
          // 指定要绑定的数据字段
          numA: () => store.numA, // 绑定字段的第 1 种方式
          numB: store => store.numB, // 绑定字段的第 2 种方式
          sum: 'sum',
      },
      actions: {
          // 指定要绑定的方法
          updateNumA: 'updateNumA',
      },
  },
})

自定义组件渲染

分包

配置分包

配置

分包配置

分包配置

"subPackages": [
    {
      "root": "pkgA",
      "name": "p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "pkgB",
      "name": "p2",
      "pages": [
        "pages/fluts/orange",
        "pages/fluts/apple"
      ]
    }
  ],

打包原则
1. 小程序会按subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中
2. 主包页可以有自己的pages
3. tabBar 页面必须在主包内
4. 分包之间不能嵌套
引用原则
- 主包无法引用分包内的私有资源
- 分包之间不能相互引用私有资源
- 分包可以引用主包内公共资源

独立分包

独立分包和普通分包的区别: 是否依赖于主包才能运行
普通分包必须依赖于主包才能运行

独立分包可以在不下载主包的情况下,独立运行

"subPackages": [
    {
      "root": "pkgA",
      "name": "p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ],
        // 配置独立分包
      "independent": true
    },
    ...

独立分包引用原则: 独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源

分包预下载

分析: 与下载分包的行为,会在进入指定的页面触发,在app.js 中,使用preloadRule 节点定义分包的预下载

配置规则

// 节点
"preloadRule": {
    // 分包预下载规则（pages节点存在路径）
    "pages/cat/cat":{
        // 触发分包预下载的页面路径
        // network 表示在指定的网络模式下进行预下载，可选值为 all(不限网络) 和 wifi(仅wifi模式下进行预下载)
        // 默认为: wifi
        "network": "all",
        // packages 表示进入页面后,预下载那些分包
        // 可以通过 root 或 name 指定预下载那些分包
        "packages":["pkgA"]
    },

预下载限制

预下载限制

自定义`tabBar`

定义

  
"tabBar": {
    // 开启自定义 tabBar
  "custom": true,
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/images/tabBar/shouye.png",
      "selectedIconPath": "/static/images/tabBar/active-shouye.png"
    },
    {
      "pagePath": "pages/zhibo/zhibo",
      "text": "直播",
      "iconPath": "/static/images/tabBar/zhiboliebiao.png",
      "selectedIconPath": "/static/images/tabBar/active-zhiboliebiao.png"
    },
    {
      "pagePath": "pages/mv/mv",
      "text": "MV",
      "iconPath": "/static/images/tabBar/MV.png",
      "selectedIconPath": "/static/images/tabBar/active-MV.png"
    },
    {
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "/static/images/tabBar/wode.png",
      "selectedIconPath": "/static/images/tabBar/active-wode.png"
    }
  ]
},

根目录下创建custom-tab-bar 文件夹,之后创建组件