微信小程序学习笔记

目录

前情提要

开发模式

1. 申请小程序开发账号
2. 安装小程序开发者工具
3. 创建和配置小程序项目

小程序官方组件展示

注册开发者账号

1. 网址：https://mp.weixin.qq.com/

获取appID

1. appid是一长串的字符，还有一个secret也是需要的，这里我的就不展示出来了

微信小程序开发工具

1. 下载稳定版最新版就好了，就在微信小程序开发里面

代码构成

项目结构

1. pages：页面文件夹
2. app.js：项目入口文件
3. app.json：全局配置文件
4. utils：工具模块文件夹
5. app.wxss：全局样式文件
6. project.config.json：项目配置文件
7. sitemap.json：用来配置小程序及其页面是否允许被微信索引

页面组成

1. .js：页面脚本文件
2. .json：页面配置文件
3. .wxml：页面模板结构文件
4. .wxss：页面样式表文件

json配置文件

1. app.json文件：全局配置
2. project.config.json文件：个性化配置
3. sitemap.json文件：用来配置小程序及其页面是否允许被微信索引
4. 每个页面文件夹中的.json文件：配置本页面窗口外观

app.json

1. 作用：当前小程序的全局配置
2. 配置项：
   1. pages：当前小程序所有页面的路径
   2. window：全局定义小程序所有页面的背景色、文字颜色等
   3. style：组件样式版本
   4. sitemapLocation：指明sitemap.json的位置

WXML

1. 类似于HTML
2. 区别：
   1. 标签名不同
   2. 属性节点不同
   3. 提供了类似于Vue中的模板语法

WXSS

1. 样式语言，类似于css
2. 区别：
   1. 新增rpx
   2. 仅支持部分CSS选择器

.js文件

1. app.js：小程序的入口文件，通过调用App()函数来启动整个小程序
2. 页面的.js文件：通过调用Page()函数啦创建并运行页面
3. 普通.js文件：封装公共函数或属性

开发流程

1. 新建小程序页面：在app.json->中新建页面的存放路径，小程序开发者工具会自动创建页面文件夹
2. 修改项目首页：app.json->pages数组中排第一的就是项目首页

小程序的宿主环境

通信环境

1. 渲染层（WXSS和WXML）和逻辑层（js脚本）之间的通信：有微信客户端（Native）进行转发
2. 逻辑层（js脚本）和第三方服务器之间的通信：由微信客户端（Native）进行转发

运行机制

1. 小程序启动
2. 页面加载

组件

组件分类

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

视图容器类组件

1. view
   1. 类似于div，块级元素
2. scroll-view
   1. 可滚动的视图区域
   2. 具体用例：

// 纵向滚动
<scroll-view scroll-y></scroll-y>
// 横向滚动
<scroll-view scroll-x></scroll-y>

3. swiper和swiper-item
   1. 轮播图容器组件和轮播图item组件
   2. 具体用例：

<swiper circular>
  <swiper-item>A</swiper-item>
  <swiper-item>B</swiper-item>
  <swiper-item>C</swiper-item>
</swiper>

3. 常用属性：

属性	类型	默认值	说明
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	是否采用衔接滑动

基础内容组件

1. text
   1. 文本组件，类似于span，行内元素
   2. 可通过selectable属性，实现长按选中文本内容的效果
2. rich-text
   1. 富文本组件
   2. 通过nodes属性节点，把HTML字符串渲染为对应的UI结构
   3. 具体用例：

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

其他常用组件

1. button
   1. 按钮组件
   2. 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
   3. 具体用例：

// 通过type指定按钮类型
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warm">警告按钮</button>

// size="mini" 小尺寸
<button size="mini">小尺寸按钮</button>

// plain 镂空
<button plain>镂空按钮</button>

2. image
   1. 图片组件
   2. 默认宽300px、高240px
   3. mode属性：指定图片的裁剪和缩放模式

mode值	说明
scaleToFill	（默认值），图片填满image元素
aspectFit	图片长边完全显示
aspectFill	图片短边完全显示
widthFix	宽度不变，image元素高度随图片变化
heightFix	高度不变，image元素宽度随图片变化

4. 具体用例：

<imgae src="/images/1.png" mode="aspectFill"></imgae>

3. navigator
   1. 页面导航组件，类似于a标签

API

1. 事件监听API
   1. 以on开头，用来监听某些事件的触发
   2. 例：wx.onWindoeResize(function callback)监听窗口尺寸变化的事件
2. 同步API
   1. 以Sync结尾
   2. 可以通过含糊返回值直接获取
   3. 例：wx.setStorageSync(‘key’, ‘value’)向本地存储中写入内容
3. 异步API
   1. 需要通过success、fail、complete接受调用的结果
   2. 例：wx.request()发起网络请求，通过success回调函数接收数据

模板与配置

WXML模板语法

数据绑定

1. 在data中定义数据
2. 在WXML中使用数据
3. 具体用例：

// 页面的.js文件中
Page({
  data:{
    // 字符串类型
    info:'string data',
    // 数组类型
    msgList:[{msg:'hello'},{msg:'world'}],
    // 图片地址
    imgSrc:'https://img2.baidu.com/it/u=2750810294,3836014703&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
    // 数学运算
    randomNum':Math.random() * 10,
  }
})

<!-- // .wxml文件中 -->

<!-- 数据使用 -->
<view>{{info}}</view>
<view>{{msgList[0].msg}}</view>

<!-- 动态绑定图片地址 -->
<image src="{{imgSrc}}"></image>

<!-- 三元表达式 -->
<view>{{ randomNum >= 5 ? randomNum * 100 : 'little than 5' }}</view>

事件绑定

1. 常用事件：

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

3. 事件对象的属性列表：

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

5. 事件绑定用例以及改变data中的值：

// .js文件中
Page({
  // 数据
  data:{
    count:0,
  },

  // 按钮的处理函数
  btnTapHander(e){
    // e.currentTarget是绑定了相关事件的触发对象
    console.log(e.currentTarget);
    // dataset是一个对象， 包含了所有通过data-*传递过来的参数项
    console.log(e.target.dataset.info)
    // 修改data中数据的值
    this.setData({
      count:this.data.count + e.target.dataset.info
    })
  }

  // input的处理函数
  iptHander(e){
    // input中的值可以在e.detail.value中获取
    console.log(e.detail.value)
  }
})

<!-- .wxml文件中 -->

<!-- 通过data-*来传递参数 此处的参数名为info 参数值为2-->
<button bindtap="btnTapHander" data-info="{{2}}">按钮</button>

<!-- value是输入框中的值 -->
<input value="{{msg}}" bindinput="iptHander"></input>

条件渲染

1. 具体用例：

<!-- if判断 -->
<view wx:if="{{ type === 1}}"> 男 </view>
<!-- else if 判断 -->
<view wx:elif="{{ type === 2 }}"> 女 </view>
<!-- else 条件 -->
<view wx:else> 不明 </view>

<!-- block不是一个组件，不会在页面中作任何渲染 -->
<block wx:if="{{true}}">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</block>

<!-- hidden是控制元素的显示与隐藏 条件渲染是控制元素的渲染与移除 -->
<view hidden="{{ condition }}">显示隐藏</view>

列表渲染

1. 索引的默认名是index
2. 项的默认名是item
3. 每一项的key值最好要有，可以提升渲染效率
4. 具体用例：

<!-- .wxml文件中 -->
<!-- wx:for 控制列表渲染 wx:for-index 指定索引名 wx:for-item 指定项名 wx:key 指定id-->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="id">
  索引是：{{idx}} 项中的内容是：{{itemName.name}}
</view>

// .js文件中
Page({
  data:{
    array:[
      { id: 1, name: 'red' },
      { id: 2, name: 'green' },
      { id: 3, name: 'blue' },
    ]
  }
})

WXSS模板样式

rpx

1. rpx把所有设备的屏幕，在宽度上等分为750份

import

1. wxss支持样式导入
2. 具体用例：

/* @import后面跟相对路径 */
@import "common.wxss";

全局配置

常用配置项

1. pages
2. window
3. tabBar：设置小程序底部的tabBar效果
4. style

window

1. 常用配置：

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

tabBar

1. 通常分为底部tabBar和顶部tabBar
2. tabBar中只能配置最少2个，最多5个tab页签
3. 当渲染顶部tabBar是，不显示icon，只显示文本
4. tabBar节点的配置项：

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

6. 每个tab项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径
text	String	是	tab上显示的文字
iconPath	String	否	未选中时的路径
selectedIconPath	String	否	选中时的路径

8. 具体用例：

// app.json中
{
  "pages": [
    // 在tabBar中有对应路径的路径要放在前面
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/index"
  ],
  "tabBar":{
    "list":[{
      // 页面的路径在pages中必须有
      "pagePath":"pages/index/index",
      "text":"首页",
      "iconPath":"/images/tabs/home.png",
      "selectedIconPath":"/images/tabs/home-active.png"
    },{
      "pagePath":"pages/logs/logs",
      "text":"日志",
      "iconPath":"/images/tabs/log.png",
      "selectedIconPath":"/images/tabs/log-active.png"
    },{
      "pagePath":"pages/test/index",
      "text":"测试",
      "iconPath":"/images/tabs/test.png",
      "selectedIconPath":"/images/tabs/test-active.png"
    }]
  }
  // ...省略了window、style、sitemapLocation
}

页面配置

1. 配置项跟全局配置的是一样的

网络数据请求

1. 处于安全性方面的考虑，小程序对数据接口的请求做出了如下两个限制：
   1. 只能请求HTTPS类型的接口
   2. 必须将接口的域名添加到信任列表中
   3. 但是在开发的时候可以申请暂停以上两个限制
2. 配置request合法域名
   1. 在小程序管理后台中进行request合法域名的配置
   2. 域名只支持https协议
   3. 域名不能使用IP地址或localhost
   4. 域名必须经过ICP备案
   5. 服务器域名一个月内最多可申请5次修改
3. 发送请求

wx.request({
  // 请求的接口地址
  url: 'https://www.escook.cn/api/get',
  // 请求方式 GET POST ...
  method: 'GET',
  data:{
    name: 'xiaoming',
    age: 22
  },
  // 请求成功的回调函数
  success: (res) => {
    console.log(res)
  }
})

4. 在页面刚加载时请求数据

// .js文件中 生命周期函数--监听页面加载
onLoad: function(options) {
  // getSwiperList 和 getGridList是事先定义好的请求函数
  this.getSwiperList()
  this.getGridList()
},

5. 跳过request合法域名校验（仅限开发与调试阶段）

   1. 可以临时开启[开发环境不校验请求域名、TLS版本及HTTPS证书]选项，跳过request合法域名的校验

6. 因为微信小程序的宿主是微信，所以没有跨域问题，且称“Ajax”为“网络数据请求”。

视图与逻辑

页面导航

声明式导航

1. 通过点击导航组件进行导航
2. 导航到tabBar页面：url指定页面地址（以/开头），**open-type=“switchTab”**表示跳转方式，不可省略

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

3. 导航到非tabBar页面：url指定页面地址（以/开头），**open-type=“navigate”**表示跳转方式，可省略

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

4. 后退导航，open-type=“navigateBack”,delta=“<数字>”,默认后退一层

<navigator open-type="navigateBack" delta="2">返回两页</navigator>

5. 传递参数：url后面可以携带参数，方式是：?分隔参数与路径，键值用=相连，不同参数用&分隔

<navigator url="/pages/info/info?name=kkt&age=20" open-type="navigate">导航到info页面</navigator>

编程式导航

1. 导航到tabBar页面：调用wx.switchTab(Obiect object)方法即可，Object参数对象如下：

属性	类型	是否必选	说明
url	string	是	跳转路径
success	function	否	成功回调
fail	function	否	失败回调
complete	function	否	结束回调

// 页面结构
<button bindtap="gotoMeaasge">跳转到消息页面</button>

// 编程式导航
gotoMeaasge() {
  wx.switchTab({
    url:'pages/message/message'
  })
}

2. 导航到非tabBar页面：调用wx.navigateTo(Object object)方法即可，Object参数对象如下：

属性	类型	是否必选	说明
url	string	是	跳转路径
success	function	否	成功回调
fail	function	否	失败回调
complete	function	否	结束回调

// 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>

// 编程式导航
gotoInfo() {
  wx.navigateTo({
    url:'pages/info/info'
  })
}

3. 后退导航：调用wx.navigateBack(Object object)方法即可，Object参数对象如下：

属性	类型	是否必选	说明
delta	number	否（默认值为1）	返回的页数，若delta大于现有的页数，则返回到首页
success	function	否	成功回调
fail	function	否	失败回调
complete	function	否	结束回调

// 页面结构
<button bindtap="gotoBack">后退</button>

// 编程式导航
gotoBack() {
  wx.navigateBack()
}

4. 传递参数：url后面可以携带参数，方式是：?分隔参数与路径，键值用=相连，不同参数用&分隔

// 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>

// 编程式导航
gotoInfo() {
  wx.navigateTo({
    url:'pages/info/info?name=kkt&age=20'
  })
}

获取参数

1. 在onLoad中接受导航参数

/**
* 生命周期函数--监听页面函数
*/
onLoad:function(option) {
  // option就是传递过来的参数
}

页面事件

下拉刷新

1. 下拉刷新的开启方式与样式可以看前面的
2. 监听页面的下拉刷新事件：在页面的.js文件中，onPullDownRefresh()函数用于监听下拉刷新
3. 停止下拉刷新：下拉刷新的效果得主动停止，否则不会主动停止的，调用wx.stopPullDownRefresh()即可手动停止

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function(){
  // TO DO
  // 处理完事件后 手动停止下拉刷新
  wx.stopPullDownRefresh();
}

上拉触底事件

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

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function(){
  // TO DO 因为不断上拉就会不断触发 建议在增加节流操作
}

2. 配置上拉触底距离：
   1. 上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离；
   2. 可以在全集或页面的.json配置文件中，通过onReachBottomDistance属性来配置
   3. 默认是50px
3. 添加loading提示效果：
   1. wx.showLoading({title: ‘数据加载中…’}) 此方法开启loading提示效果，title是提示文本
   2. wx.hideLoading() 隐藏提示效果
4. 节流处理

生命周期

1. 应用生命周期函数：需要在app.js中声明

// app.js文件
App({
  // 小程序初始化完成时，实行此函数，全局只触发一次，可以完成一些初始化的工作
  onLaunch: function(options){},
  //小程序启动，或从后台进入前台显示时触发
  onShow: function(options){},
  // 小程序从前台进入后台时触发
  onHide: function(){}
})

2. 页面的生命周期函数：需要在页面的.js文件中进行声明

// 页面.js文件
Page({
  onLoad: function(options){}, // 监听页面加载，一个页面只调用1次
  onShow: function( ){}, // 监听页面显示
  onReady: function(){}, // 监听页面初次渲染完成，一个页面只调用1次
  onHide: function(){}, // 监听页面隐藏
  onUnload: function(){} // 监听页面卸载，一个页面只调用1次
})

WXS脚本

概念与应用场景

WXS（WeiXin Script）是小程序独有的一套脚本语言。因为wxml中无法调用在页面的.js中定义的函数，且wxml中可以调用wxs中定义的函数，所以wxs的典型应用场景是“过滤器”

语法

wxs类似于JavaScript，但是有以下几个不同之处：

1. wxs的数据类型：number（数值）、strig（字符串）、boolean（布尔类型）、object（对象类型）、function（函数类型）、array（数组类型）、date（日期类型）、regexp（正则）
2. wxs不支持ES6以上的语法形式：不支持let、const、解构赋值、展开运算符、箭头函数、对象属性简写…
3. 遵循CommomJs规范：module对象、require（）函数、module.exports对象

使用方法（有点类似于nodejs，用来写工具）

1. 使用方法类似于

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
    // 将文本转换为大写形式
    module.exports.toUpper = function(str){
  		return str.toUpperCase()
		}
</wxs>

// 定义wxs脚本
// tool.wxs文件
function toLower(str){
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

// 使用外联的wxs脚本
// .wxml文件
<view>{{m2.toLower(country)}}</view>

// 使用module来指定模块名称 src来指定引入的脚本
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

注意事项

1. wxs不能调用js中定义的函数
2. wxs不能调用小程序提供的api

自定义组件

创建&使用

1. 在任意一个文件夹上右键就会看到“新建Component”这个选项，点击就会在该文件夹下面自动生成指定名称的.wxml、.wxss、.js、.json文件
2. 局部引用&&全局引用：区别仅在于在哪里引入组件，在app.json中引入的是全局组件，在页面的.json问价中引入的是局部引用

// 在页面的.json文件中 或者 在app.json文件中 引入组件
{
  "usingComponents":{
    "test": "/components/test/test" // "组件名": "路径"
  }
}
 
// 在页面的.wxml文件中 使用组件
<test></test>

3. 注意事项：组件的事件处理函数需要定义到methods结点中（methods是在组件文件夹下面的.js文件中的），自定义方法建议以“_”开头

样式隔离

1. 默认情况下class选择器会有样式隔离效果，组件内外互不干扰（id选择器、属性选择器、标签选择器没有）
2. 隔离效果可以人工干预，通过修改组件的.js文件或者.json文件中的styleIsolation
3. styleIsolation的可选值

可选值	默认值	描述
isolated	是	启用样式隔离，class指定的样式不会相互影响
apply-shared	否	页面wxss的class样式可以影响到自定义组件
shared	否	页面wxss的class样式影响到自定义组件，自定义组件的wxss的class样式也会影响到页面或者其他不是isolated的自定义组件

// 组件的.js文件中
Component({
  options: {
    styleIsolation: 'isolated',
  }
})

// 组件的.json文件中
{
  "styleIsolation": "isolated",
}

properties属性

1. 用来接收外界传递到组件中的数据（父传子）
2. 但是properties跟data是本质上相同的，且都是可读可写的，用全等符号来他们都是一样的

数据监听器

1. 作用：监听和相应任何属性和数据字段的变化，从而执行特定的操作
2. 基本用法：

// 组件的.js文件中 
// 监听什么字段就是什么 如果监听的是属性则形式如下：对象.属性 如果监听的是变量则：变量
// 如果想监听对象的所有属性则：对象.**
Component({
  observer: {
    '字段A， 字段B': function(字段A的新值，字段B的新值){
      //DO SOMETHING
    }
  }
})

纯数据字段

1. 不用于界面渲染的data字段
2. 适用对象：那些既不会展示在界面上，又不会传递给其他组件的数据适合被设置为纯数据字段
3. 好处：有助于提升页面更新性能
4. 使用规则：

// 组件的.js文件中
Component({
  options: {
    // 指定所有 _开头的数据字段为纯数据字段 这个是自己用正则表达式配置的规则
    pureDataPattern: /^_/
  },
  datd: {
    a: true, //普通数据字段
    _a: true, // 纯数据字段
  }
})

组件的生命周期

组件的生命周期函数

1. created（组件实例刚刚被创建）：还不能调用setData
2. attached（组件实例进入页面节点树）：this.data已被初始化完毕
3. ready（组件在视图层布局完成）
4. moved（组件实例被移动到节点树的另一个位置）
5. detached（组件实例被从页面节点树移除）：适合做一些清理操作
6. error（组件方法抛出错误）

生命周期函数定义在哪里

1. 生命周期函数可以在组件的.js文件中的lifetimes字段内进行声明
2. 组件所在页面的生命周期函数，需要定义在pageLifetimes节点中
3. 什么是组件所在页面的生命周期：自定义组件的行为依赖于页面状态的变化时，就需要用到组件所在页面的生命周期函数

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

Component({
  Lifetimes: {
    attacthed() {},
    detached() {},
  },
  pageLifetimes: {
    show: function() {},
    hide: function() {},
    resize: function() {},
  }
})

插槽

1. 插槽用于承载组件使用者提供的wxml结构。默认为单个插槽，可以开启多个插槽。
2. 单个插槽：

<!-- 组件封装者 -->
<view>
  <view>组件内部</view>
<!--   用slot节点进行占位 在组件内部放哪儿都行 -->
  <slot></slot>
</view>

<!-- 组件的使用者 以下就是上面那个封装好的组件的使用-->
<component-tag-name>
  <view>这一部分内容将会被放到组件内部的slot节点中</view>
</component-tag-name>

3. 多个插槽：

// 组件的.js文件中
Component({
  options: {
    multipleSlots: true // 开启多个插槽
  },
})

<!-- 组件封装者 -->
<view>
  <view>组件内部</view>
  <!--   用slot节点进行占位 在组件内部放哪儿都行 多个插槽需要使用name进行命名 -->
  <slot name="before"></slot>
  <slot name="after"></slot>
</view>

<!-- 组件的使用者 以下就是上面那个封装好的组件的使用 需要确定插到name为什么的槽中-->
<component-tag-name>
  <view slot="after">这一部分内容将会被放到name为after的slot节点中</view>
  <view slot="before">这一部分内容将会被放到name为before的slot节点中</view>
</component-tag-name>

父子组件间通信

属性绑定

1. 父向子传递“JSON兼容”的数据，传不了方法

// 父组件的.js文件
data： {
  count: 0
}

// 父组件的wxml文件
<test count="{{count}}"></test>

// 子组件的.js文件
proprtties: {
  count: Number
}

// 子组件的.wxml文件
<text>{{count}}</text>

事件绑定

1. 子向父传递任意数据
2. 实现步骤如下：
   1. 在父组件的.js文件中，定义一个函数，这个函数将传递给子组件
   2. 在父组件的wxml中，通过自定义事件的形式，进行函数传递
   3. 在子组件的.js文件中，通过调用this.triggerEvent(‘自定义事件名称’,{/参数对象/})，将数据发送到父组件
   4. 在父组件的.js文件中，通过e.deatil获取子组件传递过来的数据

// 在父组件的.js文件中定义一个函数 通过e.detail来进行接收
syncCount(e) {
  console.log(e.detail);
}

// 在父组件的wxml中使用如下结构传递函数 bind：自定义事件名称="要传递的函数名称"
<test count="{{count}}" bind:sync="syncCount"></test>

// 在子组件的.js文件中，通过this.triggerEvent('自定义事件',{/*参数对象*/})来发送数据至父组件
method: {
  addCount() {
    this.triggerEvent('sync',{value: this.properties.count})
  }
}

获取组件实例

1. 父通过this.selectComponent(‘id或class选择器’)获取子组件实例对象，从而访问子组件的任意数据和方法

// wxml文件中
<test class="custom"></test>

// js文件中
const child = this,selectComponent('.custom');
console.log(child);

behavior

1. 本质是代码的封装共享
2. 每个behavior可以包含一组属性、数据、生命周期函数和方法
3. 创建behavior，调用Behavior(Object object)方法即可, module.exports将behavior共享出去
4. 导入并使用：使用require导入，挂载后即可生效
5. 同名字段的覆盖和组合规则：参考官网

// 单独的js文件中 例：behaviors文件夹下的my-behavior.js文件
module.exports = Behavior({
  properties: {},
  data: {},
  methods :{},
})

// 某组件的js文件中
const myBehavior = require("../../behaviors/my-behavior");

Component({
  // 挂载
  behaviors: [myBehavior],
  // ...
})

Vant Weapp

1. 具体用法参考官网，不难，但是要小心

全局数据共享

1. 也叫状态管理，为了解决组件之间的数据共享问题
2. mobx官方地址在这里：https://github.com/wechat-miniprogram/mobx-miniprogram-bindings，引入mobx包什么的看文档就好了

// store文件夹下的store.js文件中 
import { observable, action } from 'mobx-miniprogram'

export const atore = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  // 计算属性 形式：get 函数名
  get Sum() {
    return this.numA + this.numB
  },
  // actions方法 store中的数据仅能用action方法来进行修改 形式：函数名 action(fun)
  updateNum1: action(function(step) {
    this.numA += step
  }),
  updateNum2: action(function(step) {
    this.numB += step
  }),
})

// 页面的wxml结构 wxml结构中数据的获取使用改变参考前面的就好 一样的
// 因为是状态管理 所以变量都是实时更新的

// 某页面的js文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({
  onLoad: function() {
    // 固定用法 field里面放数据 actions里面放方法
    // 这样做了之后 数据跟方法都已经是引出来了 可以直接在wxml文件中使用
    this.storeBindings = createStoreBindings(this, {
      // 数据源
      store,
      // 计算属性 字段
      fields: ['numA', 'numB', 'sum'],
      // 方法
      actions: ['updateNum1']
    })
  },
  onUnload:function() {
    // 页面卸载时销毁storeBindings
    this.storeBindings.destroyStoreBindings()
  }
})

// 某组件的js文件 
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "./store";

Component({
  // 在组件里面是要用behaviors的
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    // 数据源
    store,
    // 数据字段 计算属性 左边是自己定义的名字 右边是引用store中的数据 方式有三种 都行的
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: "sum",
    },
    // action方法 左边是自己定义的名字 右边是store中的方法 这样之后就是指向同一个方法了
    actions: {
      buttonTap: "update",
    },
  },
});

分包

1. 分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需加载
2. 优点：优化小程序首次启动的下载时间，在多团队开发时可以更好地解耦操作
3. 分包后项目构成：1个主包+多个分包
   1. 主包：包含项目启动页面和TabBar页面，以及公共资源
   2. 分包：有关页面、私有资源
4. 分包体积限制：
   1. 整个小程序不超过16M
   2. 单个包不能超过2M

// app.json文件中
{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  // 这一项是配置分包的
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}