微信小程序详细笔记

1.常用组件

1.1 常用的视图组件

1.1.1 view

• 类似div

•   <view class="container1">
        <view>A</view>
        <view>B</view>
        <view>C</view>
    </view>
  

1.1.2 scroll-view

• 如果是需要竖向滚动,加scroll-y横向是x

•   <scroll-view class="container2" scroll-y>
        <view>A</view>
        <view>B</view>
        <view>C</view>
    </scroll-view>
  

1.1.3 swiper

• 轮播图 内部需要swiper-item

•   <swiper class="container3" indicator-dots
     indicator-color="white"
     indicator-active-color="gray"
     autoplay="true"
     interval="2000"
     circular="true"
     >
        <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>
  

1.2 常用是基础内容组件

1.2.1 text

• 文本组件

• 类似span

• 如果需要长按弹出复制那些框图,就需要加上selectable

•   <!-- 长按选中文字效果必须加selectable -->
    <text selectable>
    手机号支持长按选中 234567890
    </text>
  

1.2.2 rich-text

• 富文本组件

• 支持把html字符串渲染为wxml结构

• 需要nodes属性,在这个里面写

•   <rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
  

1.2.3 button

• 按钮

• open-type属性

•   <!-- button -->
    <rich-text nodes="<h1 style='color:red'>按钮</h1>"></rich-text>
    
    <view>~~~~~~通过type指定按钮类型~~~~~~~</view>
    <button>默认按钮</button>
    <button type="primary">主色调按钮</button>
    <button type="warn">警告按钮</button>
    
    <view>~~~~~~通过size指定按钮大小~~~~~~~</view>
    <button size="mini">默认按钮</button>
    <button size="mini" type="primary">主色调按钮</button>
    <button size="mini" type="warn">警告按钮</button>
    
    <view>~~~~~~通过plain镂空按钮~~~~~~~</view>
    <button size="mini" plain="true">默认按钮</button>
    <button size="mini" type="primary" plain="true">主色调按钮</button>
    <button size="mini" type="warn" plain="true">警告按钮</button>
  

1.2.4 image

• 图片

• 默认高240px 宽300px

• mode值	说明
  scaleToFill	默认 缩放模式,不保持纵横比缩放图,是图片的宽高完全拉伸至image元素
  aspectFit	缩放模式.保持原来的纵横比图片,是图片的长边能完全显示
  aspectFill	缩放模式,保持纵横比缩放图片,只保证图片的短边能够完全的显示出来
  widthFix	缩放模式,宽度不变,高度自动变化
  heightFix	缩放模式,高度不变,宽度自动变化

1.2.5 navigator

• 导航

1.3 宿主环境 API

1.3.1 事件监听API

特点：以 on 开头，用来监听某些事件的触发

举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

1.3.2 同步API

特点1：以 Sync 结尾的 API 都是同步 API

特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

举例：wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容

1.3.3 异步API

l特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果

l举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

2. 协同工作

在中大型的公司里，人员的分工非常仔细：同一个小程序项目，一般会有不同岗位、不同角色的员工同时参与设计与开发。

此时出于管理需要，我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分，使他们能够高效的进行协同工作。

3,绑定

3.1 数据绑定

• Mustache语法,和vue一样

3.2 事件绑定

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

3.2.1 事件对象的属性列表

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

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

3.2.2 target 和 currentTarget 的区别[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxcuL4Hr-1680412434624)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230312220709779.png)]

3.2.3 在事件处理函数中为data中的数据赋值

• 通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值

    CountChange(){
        this.setData({
            count:this.data.count+1,
        })
        console.log(this.data.count);
    },

<button type="primary" bindtap="CountChange">+1</button>

3.2.4 事件处理函数中传参

• 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正 常工作：

  •   <button type="primary" bindtap="CountChange(123)">+1</button>
    

  • 因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数。

• 可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

  •   <button type="primary" bindtap="btn" data-info="{{2}}">+2(事件传参)</button>
    

• info 会被解析为参数的名字

  数值 2 会被解析为参数的值

• js获取

  •         btn(e){
                console.log(e);
                console.log(e.target.dataset.info);
                let a = e.target.dataset.info;
                this.setData({
                    count:this.data.count+a,
                });
            },
    

3.2.5 bindinput的语法格式

<input bindinput="input"/>

    input(e){
        console.log(e.detail.value);
    },

3.2.6 微信小程序的条件渲染

3.2.6.1 if

• wx:if

• wx:elif

• wx:else

•   <!-- 条件渲染 -->
    <view wx:if="{{condition}}">True</view>
    <view wx:if="{{type===1}}">男</view>
    <view wx:elif="{{type===0}}">女</view>
    <view wx:else>保密</view>
    
  

3.2.6.2 block

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

  •     
      <block wx:if="{{type===1}}">
          <view>view1</view>
          <view>view2</view>
      </block>
    

  • 注意： 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

3.2.6.3 hidden

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

•   <view hidden="{{type===1}}">条件为true 隐藏</view>
  

区别

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

频繁切换时，建议使用 hidden

控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

3.2.7 列表渲染

3.2.7.1 wx:for

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

  •   <view wx:for="{{arr1}}">
          索引是:{{index}},item项是{{item}}
      </view>
    

• 使用 wx:for-index 可以指定当前循环项的索引的变量名

• 使用 wx:for-item 可以指定当前项的变量名

  •   <view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
          索引是:{{idx}},item项是{{itemName}}
      </view>
    

3.2.7.1 wx:key

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

•   <view wx:for="{{arr2}}" wx:key="id">
    	{{item.name}}
    </view>
  

4.微信css（wxss）样式

• wxss拓展特性：rpx，@import

4.1 rpx布局

• rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx
• l在较小的设备上，1rpx 所代表的宽度较小
• l在较大的设备上，1rpx 所代表的宽度较大
• 小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适

4.2 样式导入

• @import

4.3 样式

全局样式

• 在app.wxss配置全局样式

局部样式

• 在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面
• ①当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

5.全局配置

• pages

  • l记录当前小程序所有页面的存放路径

• window

  • l全局设置小程序窗口的外观

• tabBar

  • l设置小程序底部的 tabBar 效果

• style

  • l是否启用新版的组件样式

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

5.1 设置导航栏的背景色

设置步骤：app.json -> window -> navigationBarTitleText

5.2 设置导航栏的背景色

设置步骤：app.json -> window -> navigationBarBackgroundColor 不支持文本类型颜色

5.3 设置导航栏的标题颜色

设置步骤：app.json -> window -> navigationBarTextStyle

但是只有black和white两个颜色

5.4 下拉刷新

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

5.5 设置下拉刷新时的窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为: app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。

直接变成浅灰色

5.6 设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值

注意： backgroundTextStyle 的可选值只有 light 和 dark

5.7 设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

设置步骤： app.json -> window -> 为 onReachBottomDistance 设置新的数值

“onReachBottomDistance”: 50 (不用添加px单位)

注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。

5.8 TabBar

• 组成部分

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29oLxjlc-1680412434625)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230313143518377.png)]
  • 

• 在app.json里面加入tabbar

  •       "tabBar": {
            "list": [{
                "pagePath": "pages/list/list",
                "text": "list",
                "iconPath": "/images/tabs/home.png",
                "selectedIconPath": "/images/tabs/home-active.png"
            },{
                "pagePath": "pages/index/index",
                "text": "index",
                "iconPath": "/images/tabs/message.png",
                "selectedIconPath": "/images/tabs/message-active.png"
            },{
                "pagePath": "pages/logs/logs",
                "text": "logs",
                "iconPath": "/images/tabs/contact.png",
                "selectedIconPath": "/images/tabs/contact-active.png"
            }]
          }
    

  • 参数列表

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

• 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

5.8 页面配置

• 小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

• 全局配置和页面配置

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

  如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。

  • 注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

• 属性	类型	默认值	描述
  navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如 #000000
  navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
  navigationBarTitleText	String		当前页面导航栏标题文字内容
  backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
  backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
  enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
  onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

• 页面里面也可以有window等属性

6.网络请求

• 对应程序为wechat02

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

• 出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

  • ①只能请求 HTTPS 类型的接口

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


6.2 配置 request 合法域名

• 需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

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

• 注意事项：

  ①域名只支持 https 协议

  ②域名不能使用 IP 地址或 localhost

  ③域名必须经过 ICP 备案

  ④服务器域名一个月内最多可申请 5 次修改

6.3 发起GET请求

•       /**
         * 发起GET请求
         */
        getInfo(){
            wx.request({
              url: "https://www.escook.cn/api/get",
              method:"GET",
              data:{
                  name:"sz",
                  age:20
              },
              success(res){
                  console.log(res);
              }
            })
        },
  

6.4 发起post请求

        /**
     * 发起POST请求
     */
    postInfo(){
        wx.request({
          url: "https://www.escook.cn/api/post",
          method:"POST",
          data:{
              name:"sz",
              age:20
          },
          success(res){
              console.log(res);
          }
        })
    },

6.5 页面刚刚加载就发出请求

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

• 在这个里面写

6.6 跳过request合法域名校验

• 如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。

  此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。

• 注意：

  跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！]

6.7 跨域和Ajax

• 跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
• Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。

7.小程序视图与逻辑

• 对应程序wechat03

7.1 页面导航(跳转)

7.1.1 声明式导航

• 在页面声明一个导航组件
• 通过点击组件实现页面跳转

1.导航到tabbar页面

• tabBar 页面指的是被配置为 tabBar 的页面。

• 在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：

  • url 表示要跳转的页面的地址，必须以 / 开头
  • open-type 表示跳转的方式，必须为 switchTab

•   <navigator url="/pages/msg/msg" open-type="switchTab">导航到消息页面</navigator>
  

2. 导航到非 tabBar 页面

• 非 tabBar 页面指的是没有被配置为 tabBar 的页面。

• 在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：

  • url 表示要跳转的页面的地址，必须以 / 开头
  • open-type 表示跳转的方式，必须为 navigate

•   <navigator url="/pages/info/info" open-type="navigate" >导航到info页面</navigator>
  

• 或者可以不写open-type=“navigate”

3.后退导航

• 如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：

  • open-type 的值必须是 navigateBack，表示要进行后退导航
  • delta 的值必须是数字，表示要后退的层级

•   <navigator open-type="navigateBack" delta="1">后退</navigator>
  

• 注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。

7.1.2 编程式导航

• 调用小程序的API,实现页面跳转

1.导航到tabbar页面

• 调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：

• 属性	类型	是否必选	说明
  url	string	是	需要跳转的 tabBar 页面的路径，路径后不能带参数
  success	function	否	接口调用成功的回调函数
  fail	function	否	接口调用失败的回调函数
  complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

•       gotoMessage(){
             wx.switchTab({
               url: '/pages/msg/msg',
             })
         },
  

•   <button type="primary" bindtap="gotoMessage">跳转到消息页面</button>
  

2.导航到非tabbar页面

• 调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：

  • 属性	类型	是否必选	说明
    url	string	是	需要跳转到的非 tabBar 页面的路径，路径后可以带参数
    success	function	否	接口调用成功的回调函数
    fail	function	否	接口调用失败的回调函数
    complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

•       gotoInfo(){
            wx.navigateTo({
                url: '/pages/info/info',
              })
        },
  

•   <button type="primary" bindtap="gotoInfo">跳转到Info页面</button>
  

3.后退页面

• 调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

  • 属性	类型	默认值	是否必选	说明
    delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页
    success	function		否	接口调用成功的回调函数
    fail	function		否	接口调用失败的回调函数
    complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

•   <button type="primary" bindtap="back">后退</button>
  

•       back(){
             wx.navigateBack();
         },
  

7.2 导航传参

7.2.1 声明式导航传参

• navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

  • 参数与路径之间使用 ? 分隔
  • 参数键与参数值用 = 相连
  • 不同参数用 & 分隔

•   <navigator url="/pages/info/info?name=zzt&age=199">跳转到页面传参</navigator>
  

7.2.2 编程式导航传参

• 调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：

•       gotoInfo1(){
            wx.navigateTo({
              url: '/pages/info/info?name=zzt&age=199',
            })
        },
  

7.2.3 onload加载参数

• 通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下：

•       onLoad(options) {
            console.log(options);
        },
  

7.3 页面事件

7.3.1 下拉刷新事件

1.刷新方式

• 启用下拉刷新有两种方式：

  • ①全局开启下拉刷新

    • 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

  • ②局部开启下拉刷新

    • 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

• 在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

2.下拉刷新的样式

• 在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中
  • backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
  • backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

3.监听下拉动作

• 在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

  例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1：

• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gUJltSH6-1680412434626)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230313182804798.png)]

• 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sajhbDCJ-1680412704747)(C:%5CUsers%5C11969%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230313182804798.png#pic_center)]

4.停止下拉刷新

• 完成下拉刷新后,一直不自己关闭,我们需要调用wx.stopPullDownRefresh()
• 当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。

7.3.2 上拉触底

• 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

1.监听页面的上拉触底事件

• 在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。

•       /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom() {
            console.log("上拉触底");
        },
    
  

2. 配置上拉触底距离

• 上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
• 可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
• 小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

3.需要节流操作(对上拉触底进行节流处理)

• ①在 data 中定义 isloading 节流阀

  • false 表示当前没有进行任何数据请求
  • true 表示当前正在进行数据请求

• ②在 getColors() 方法中修改 isloading 节流阀的值

  • 在刚调用 getColors 时将节流阀设置 true
  • 在网络请求的 complete 回调函数中，将节流阀重置为 false

• ③在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

  • 如果节流阀的值为 true，则阻止当前请求
  • 如果节流阀的值为 false，则发起数据请求

•       data: {
            isLoading:false,
        },
  

•       this.setData({
            isLoading:true
        }) //开始时候
  

        this.setData({
            isLoading:false
       	})  //程序在获取请求结束之后
  

•       onPullDownRefresh() {
            if(this.data.isLoading) return; //判断节流
            console.log("触发事件");
            this.getColors()
        }, //判断
  

4.loading的提示效果

getColors() {

        //展示loading
        wx.showLoading({
          title: '数据加载中',
        })
        wx.request({
            url: 'https://www.escook.cn/api/color',
            method: "GET",
            success:({data: res}) => {
                console.log(res);
                this.setData({
                    colorList:[...this.data.colorList,...res.data]
                })
            },
            
            complete:()=>{
                wx.hideLoading()//取消loading
            }
        })
    },

8.生命周期

• 应用生命周期
  • 特指小程序从启动 -> 运行 -> 销毁的过程
• 页面生命周期
  • 特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

8.1 生命周期函数

• 生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
• 生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。
  • 注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

8.1.1 应用的生命周期函数

App({
  onLaunch() { //小程序初始化 就只触发一次

  },
  onHide(){ //当小程序启动,或从后台进入前台显示,会触发
      
  },
  onshow(){ //当小程序由前台进入后台触发
      
  }
})

8.1.1 页面的生命周期函数

Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
		//修改标题
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

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

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

9.wxs脚本

• ①wxs 有自己的数据类型

  • number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
  • function 函数类型、array 数组类型、 date 日期类型、 regexp 正则

• ②wxs 不支持类似于 ES6 及以上的语法形式

  • 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…

  • 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

• ③wxs 遵循 CommonJS 规范

  • module 对象

  • require() 函数

  • module.exports 对象

9.1 wxs基础语法

• 具有隔离性
• 大多用作过滤器
• IOS设备的性能好
• 不能作为组件的事件回调函数

9.1.1 内置

• wxs 代码可以编写在 wxml 文件中的 标签内，就像 Javascript 代码可以编写在 html 文件中的

9.1.2 外联的wxs

• 创建wxs文件

•   // 定义函数
    function toLower(str){
        return str.toLowerCase()
    }
    
    // 导出
    module.exports = {
        toLower:toLower
    }
  

9.1.3 使用外联的wxs

• 在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中：

  • module 用来指定模块的名称
  • src 用来指定要引入的脚本的路径，且必须是相对路径

•   <text>{{m2.toLower(str)}}</text>
    
     必须要有的属性为module和src
    <wxs module="m2" src="/utils/tool.wxs"></wxs>
  

10.自定义组件

10.1 引用组件

• 组件的引用方式分为“局部引用”和“全局引用”，顾名思义：
  • 局部引用：组件只能在当前被引用的页面内使用
  • 全局引用：组件可以在每个小程序页面中使用

10.1.1 引用局部组件

• 在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”

•       "usingComponents": {
            "my-test1":"/components/test/test"
        }
  

•   <my-test1></my-test1>
  

10.1.2 引用全局组件

•   //在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”
    
    "usingComponents": {
          "my-test1":"/components/test/test"
      }
  

10.1.3 组件和页面区别

• 从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同：
  • 组件的 .json 文件中需要声明 “component”: true 属性
  • 组件的 .js 文件中调用的是 Component() 函数
  • 组件的事件处理函数需要定义到 methods 节点中

10.1.4 组件样式隔离

• 默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构，如图所示：

  • 组件 A 的样式不会影响组件 C 的样式
  • 组件 A 的样式不会影响小程序页面的样式
  • 小程序页面的样式不会影响组件 A 和 C 的样式

• 好处

  • ①防止外界的样式影响组件内部的样式
  • ②防止组件的样式破坏外界的样式

• 组件样式隔离的注意点

  • app.wxss 中的全局样式对组件无效

  • 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

    • 建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

10.1.5 修改组件的样式隔离选项

• 默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aGHGXs8x-1680412434626)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314143931228.png)]

• 可选值

  • 可选值	默认值	描述
    isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
    apply-shared	否	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
    shared	否	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件

10.2 自定义组件的数据,方法和属性

10.2.1 data数据

    /**
     * 组件的初始数据
     */
    data: {
        count: 0,
    },

10.2.2 methods方法

•       /**
         * 组件的方法列表
         */
        methods: {
            //方法
            getCount() {  //事件处理函数
                this.setData({ 
                    count: this.data.count + 1,
                })
                console.log(this.data.count);
                this._showCount();
            },
            _showCount(){  //自定义方法
                wx.showToast({
                  title: 'count的值是'+this.data.count,
                  icon:"none"
                })
            }
        }
  

• 建议:自定义方法前面加_

10.2.3 properties属性

    /**
     * 组件的属性列表
     */
    properties: {
        max:{
            type:Number,
            value:10
        },
        num:Number
    },

• 外面传值

  •   <my-test1 num="10" mix="9"></my-test1>
    

• 在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

  • data 更倾向于存储组件的私有数据
  • properties 更倾向于存储外界传递到组件中的数据

10.2.4使用 setData 修改 properties 的值

            this.setData({
                count: this.data.count + 1,
                max: this.properties.count + 1,
            })

10.3 数据监听器

• 监听器
  • 数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUbKiG2C-1680412434626)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314145430278.png)]
  • 

10.3.1 基本使用

•   /**
         * 组件的初始数据
         */
        data: {
            n1: 0,
            n2: 0,
            num: 0
        },
    
        /**
         * 组件的方法列表
         */
        methods: {
            addN1() {
                this.setData({
                    n1: this.data.n1 + 1
                })
            },
            addN2() {
                this.setData({
                    n2: this.data.n2 + 1
                })
            }
        },
        observers: { //数据节点监听器
            "n1,n2": function(newn1, newn2){
                this.setData({
                    num: newn1 + newn2
                })
            }
        }
  

•   <button bindtap="addN1">n1+1</button>
    <button bindtap="addN2">n2+1</button>
    <view>num:{{num}}</view>
  

10.3.2 监听对象属性的变化

• 数据监听器支持监听对象中单个或多个属性的变化

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1pAuaIzQ-1680412434627)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314150512421.png)]

• 也可以用通配符

  •       observers:{
              // 'rgb.r,rgb.g,rgb.b':function(r,g,b){
              //     this.setData({
              //         fullColor:`${r},${g},${b}`
              //     })
              // }
              'rgb.**':function(obj){
                  this.setData({
                      fullColor:`${obj.r},${obj.g},${obj.b}`
                  })
              }
          }
    

10.4 纯数据字段

• 概念：纯数据字段指的是那些不用于界面渲染的 data 字段。

• 应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

• 好处：纯数据字段有助于提升页面更新的性能。

• 使用

  • 在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a8lrbbKl-1680412434627)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314152535860.png)]

10.5 自定义组件的生命周期

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

10.5.1 组件主要的生命周期函数

• 在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点如下：

• ① 组件实例刚被创建好的时候，created 生命周期函数会被触发

  • 此时还不能调用 setData
  • 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发

  • 此时， this.data 已被初始化完毕
  • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

• 在组件离开页面节点树后， detached 生命周期函数会被触发

  • 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
  • 此时适合做一些清理性质的工作

10.5.2 lifetimes 节点

• 在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

•       /**
         * 组件的生命周期函数
         */
        lifetimes:{
            created(){
                console.log("created");
            },
            attached(){
                console.log("attached");
            }
        },
  

10.5.3 组件所在页面的生命周期

• 有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。

  例如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。

  在自定义组件中，组件所在页面的生命周期函数有如下 3 个，分别是

• 生命周期函数	参数	描述
  show	无	组件所在的页面被展示时执行
  hide	无	组件所在的页面被隐藏时执行
  resize	Object Size	组件所在的页面尺寸变化时执行

• pageLifetimes 节点

  • 组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中

  •       /**
           * 组件所在页面的生命周期
           */
          pageLifetimes: {
              show: function() {
                // 页面被展示
              },
              hide: function() {
                // 页面被隐藏
              },
              resize: function(size) {
                // 页面尺寸变化
              }
            },
    

10.6 插槽

• 在自定义组件的 wxml 结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的 wxml 结构
• 

10.6.1 单个插槽

• 在小程序中，默认每个自定义组件中只允许使用一个 进行占位，这种个数上的限制叫做单个插槽。

•   <my-test4>
        <view>这里是通过插槽插进去的</view>
    </my-test4>
  

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

• 第一个代码就会插入到第二个代码

10.6.2 多个插槽

•       /**
         * 配置使用多个插槽
         */
        options:{
            multipleSlots:true //使用多个插槽
        }
  

• 开启多个插槽配置

•   <my-test4>
        <view slot="before">这里是通过插槽插进去的 before</view>
        <view slot="after">这里是通过插槽插进去的 after</view>
    </my-test4>
  

• 在使用带有多个插槽的自定义组件时，需要用 slot 属性来将节点插入到不同的 中

• 可以在组件的 .wxml 中使用多个 标签，以不同的 name 来区分不同的插槽。

  •   <view>
          <slot name="before"></slot>
          <view>这是组件的内部结构</view>
          <slot name="after"></slot>
      </view>
    

10.7 父子组件的通信

• ①属性绑定
  • 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据
• ①事件绑定
  • 用于子组件向父组件传递数据，可以传递任意数据
• ①获取组件实例
  • 父组件还可以通过 this.selectComponent() 获取子组件实例对象
  • 这样就可以直接访问子组件的任意数据和方法

10.7.1 属性绑定

1.父传子

• 属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。

  •   <view>父组件中，count的值：{{count}}</view>
      <my-test5 count="{{count}}"></my-test5>
      
      
        data: {
          count:0
        },
      
    

  •   <view>子组件中count：{{count}}</view>  
      
      
      
      properties: {
              count: Number
          },
    

  2.子组件传父组件

  • 事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：

    • ①在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

      •       syncCount(e){
                //   console.log('syncCount');
                //   console.log(e.detail.value);
            
              },
        

    • ②在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件

      •   <my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>
        

    • ③在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, { /* 参数对象 */ }) ，将数据发送到父组件

      •       //触发自定义事件
              this.triggerEvent("sync",{value:this.properties.count})
        

    • ④在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

      •       syncCount(e){
                //   console.log('syncCount');
                //   console.log(e.detail.value);
                this.setData({
                    count:e.detail.value
                })
              },
        

3.获取组件实例

• 可在父组件里调用 this.selectComponent(“id或class选择器”) ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(“.my-component”)。

•   <my-test5 count="{{count}}" bind:sync="syncCount"  class="A"></my-test5> //class选择器
    
    <button bindtap="getChild">获取子组件的实例对象</button>
  

•       getChild() {
            const child = this.selectComponent('.A');
            console.log(child);
            child.setData({
                count: child.properties.count + 1
            })
        },
  

10.8 behaviors

• behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins

  • 

• behaviors 的工作方式

  • 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
  • 每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。

10.8.1 创建behaviors

• 调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象，供所有的组件使用：
  • 

10.8.2 导入并使用 behavior

• 在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，
• 

可用的节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

11.使用npm包

• 小程序对 npm 的支持与限制

  • 目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制：

    ①不支持依赖于 Node.js 内置库的包

    ②不支持依赖于浏览器内置对象的包

    ③不支持依赖于 C++ 插件的包

11.1 安装

*  npm init -y
*  npm i @vant/weapp@1.3.3 -S --production

11.2 使用

• 安装完 Vant 组件库之后，可以在 app.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中直接使用组件
• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lagcFxP7-1680412434627)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314184449128.png)]
• 

11.3 API Promise化

• 基于回调函数的异步 API 的缺点
• 默认情况下，小程序官方提供的异步 API 都是基于回调函数实现的，例如，网络请求的 API 需要按照如下的方式调用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eU911LiK-1680412434627)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314184628777.png)]

• 缺点：容易造成回调地狱的问题，代码的可读性、维护性差！

• API Promise****化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于 Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。

11.3.1 安装

• npm i --save miniprogram-api-promise@1.0.4

• 安装完了构建

• API的promise化

  •   //app.js
      import {promisifyAll} from "miniprogram-api-promise"
      
      const wxp = wx.p = {}
      promisifyAll(wx,wxp)
    

  •       async getInfo(){
           const res = await wx.p.request({
              url: 'https://www.escook.cn/api/get',
              method:"GET",
              data:{
                  name:"zs",
                  age:20
              }
            });
        
            console.log(res);
          },
              
              //使用async await优化
    

12 全局数据共享

• 全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。
  • 开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

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

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

2.安装Mobx包

• npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
• 构建npm

3.创建实例

//在这个js文件中,专门创建store的实例对象
import {
    action,
    observable
} from 'mobx-miniprogram'

export const store = observable({
    //数据字段
    numA: 1,
    numB: 2,
    // 计算属性标志 get
    get sum() {
        return this.numA + this.numB;
    },
    //actions方法,用来修改store中的数据
    updateNum1:action(function(step){
        this.numA += step
    }),
    updateNum2:action(function(step){
        this.numB += step
    })
})

4.将store中的成员绑定到页面中


5.在页面上使用Store中的成员

•   import {createStoreBindings} from 'mobx-miniprogram-bindings'
    import {store} from '../../store/store'
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      btnHandler(e){
        console.log(e);
        this.updateNum1(e.target.dataset.step)
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.storeBindings = createStoreBindings(this,{
            store,
            fields:['numA','numB','sum'],
            actions:['updateNum1']
        }) 
      },
  

•   <view>{{numA}} + {{numB}} = {{sum}}</view>
    <van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA+1</van-button>
    <van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numA-1</van-button>
  

• data-step="{{1}} => btnHandler(step) 传参

6.将Store中的成员绑定到组件上面

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

Component({

    behaviors:[storeBindingsBehavior],

    storeBindings:{
        store,
        fields:{
            numA:()=>store.numA,
            numB:(store)=>store.numB,
            sum:'sum',
        },
        actions:{
            updateNum2:'updateNum2'
        }
    },

7.使用

    methods: {
        btnHandler2(e){
            console.log(e);
            this.updateNum2(e.target.dataset.step)
        }
    }

<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB-1</van-button>

13.分包

13.1 分包的基本知识

• 分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载
• 分包的优点
  • 对小程序进行分包的好处主要有以下两点：
    • 可以优化小程序首次启动的下载时间
    • 在多团队共同开发时可以更好的解耦协作
• 分包前项目的构成
  • 分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间
• 分包后****项目的构成
  • 分包后，小程序项目由 1 个主包 + 多个分包组成：
    • 主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
    • 分包：只包含和当前分包有关的页面和私有资源

• 分包的加载规则

• ①在小程序启动时，默认会下载主包并启动主包内页面

  • tabBar 页面需要放到主包中

• ②当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

  • 非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

13.2 使用分包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWpsblOY-1680412434628)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314195626561.png)]

  "subPackages": [
      {
          "root":"pkgA",
          "name":"p1", //给包起别名
          "pages":[
            "pages/cat/cat",
            "pages/dog/dog"
          ]
      },{
          "root":"pkgB",
          "name":"p2", //给包起别名
          "pages": [
              "pages/apple/apple",
              "pages/banana/banana"
          ]
      }
  ]
}

2 打包原则

• ①小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中
• ②主包也可以有自己的 pages（即最外层的 pages 字段）
• ③tabBar 页面必须在主包内
• ④分包之间不能互相嵌套

3.引用原则

• ①主包无法引用分包内的私有资源
• ②分包之间不能相互引用私有资源
• ③分包可以引用主包内的公共资源

13.3 独立分包

• 独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。

1.独立分包和普通分包的区别

• 最主要的区别：是否依赖于主包才能运行
• 普通分包必须依赖于主包才能运行
• 独立分包可以在不下载主包的情况下，独立运行

2. 独立分包的应用场景

• 开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：
• 当小程序从普通的分包页面启动时，需要首先下载主包
• 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

3.独立分包的配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GsMeVG2-1680412434628)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314200924209.png)]

• 通过independent:true 可以声明此包为独立分包

4.引用资源

• 独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！例如：

  ①主包无法引用独立分包内的私有资源

  ②独立分包之间，不能相互引用私有资源

  ③独立分包和普通分包之间，不能相互引用私有资源

  ④**特别注意：**独立分包中不能引用主包内的公共资源

13.4 分包预下载

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

1.配置分包的预下载

• 预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包的预下载规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S3OrCE54-1680412434628)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314201907686.png)]

•       "preloadRule": {
          "pages/contact/contact":{
              "packages": ["p1"],  //当我们进入到contact页面时候会直接预下载包
              "network": "all"    //采取网络模式 默认是wifi
          }
        },
  

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3kwQWGci-1680412434628)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230314202304202.png)]

2.分包预下载限制

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

14.自定义TabBar

详细步骤，可以参考小程序官方给出的文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

15.补充

1.预览大图

				uni.previewImage({
					current:i,
					urls:this.goods_info.pics.map(x=>x.pics_big)
				})

<image :src="item.pics_big" @click="preview(i)"></image>

2 给任务栏加徽标

      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
         index: 2, // 索引
         text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
      })