微信小程序开发

微信小程序开发2023.7.14-7.19

黑马程序员官方文档：https://pan.baidu.com/s/1crZTQdIZ7OSDkZIpIWkhYw&pwd=1234

vant Weapp(类似element ui的组件库):https://youzan.github.io/vant-weapp【安装时路径不要出现中文名】

一、wxml和html的区别

1.标签名称不同

• html(div、span、img、a)

• wxml(view、text、image、navigator)

2.属性节点不同

3.提供类似vue中的模板语法

• 数据绑定

• 列表渲染

• 条件渲染

二、wxss和css的区别

1.新增了rpx尺寸单位

• css中需要手动进行像素单位换算，例如rem
• wxss在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算、@Import

2.提供全局样式和局部样式

• 项目根目录中的app.wxss会作用于所有小程序页面
• 局部页面的.wxss样式仅对当前页面生效

3.wxss仅支持部分css选择器

• .class和#id

• .element

• 并集选择器、后代选择器

• ::after和::before等伪类选择器

三、js文件分类

1.app.js文件

• 是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

2.页面的.js文件

• 是页面的入口文件，通过调用Page()函数来创建并运行页面

3.普通的.js文件

• 是普通的功能文件，用来封装公共的函数或属性供页面使用

四、微信官方文档

1.学习组件链接：#https://developers.weixin.qq.com/miniprogram/dev/component/（有基础很简单）

2.学习api链接：#https://developers.weixin.qq.com/miniprogram/dev/api/（ 主要分三大类API）

• 事件监听API

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

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

• 同步API

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

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

• 异步API

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

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

五、WXML数据绑定

1.Mustache语法的格式

• 例子： {{}}

2.动态绑定

• 例子： src=“{{imgsrc}}”

3.三元运算

• 例子： {{ random>=5? ’ sx’:‘awsx’ }}

4.算术运算

• 例子： {{random*100}}

六、WXML事件绑定

1.什么是事件

​ 事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层业务的处理

2.常用的事件

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

3.事件对象的属性列表

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

4.bindtap语法格式

• 通过bindtap为组件绑定事件

<button bindtap="btnTapHandler"></button>

• 在.js定义对应的事件处理函数

Page({
 btnTapHandler(e){
 console.log(e)
 }
})

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

• 通过调用this.setData(object)方法，给页面data中的count数据重新赋值

  changeCount(){
  this.setData ({
  count:this.data.count+1
    })
  }
  

6.事件传参

• 可以为组件data-*自定义属性传参

<button bindtap="btnTapHandler" data-info="{{2}}"></button>

• 通过event.target.dataset.参数名,即可获取到具体参数的值

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

7.bindinput语法格式

• 通过bindinput为组件绑定事件

<input bindinput="inputHandler" />

• 在.js定义对应的事件处理函数

Page({
inputHandler(e){
//e.detail.value最新的值
 console.log(e.detail.value)
 }
})

8.双向绑定收集数据

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

Page({
data:{
    msg:''
},
inputHandler(e){
this.setData({
 msg:e.detail.value)
  }}
 }
})

七、WXML渲染

1.条件渲染wx:if=“{{condition}}”

• 语法格式

<view  wx:if="{{condition}}"></view>

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

2.条件渲染block和wx:if结合

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

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

<block  wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>

3.条件渲染hidden="{{condition}}"也能控制元素显示和隐藏

• 语法格式
• 不能和block结合使用

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

4.hidden和wx:if的区别

• 运行方式不同

  • wx:if以动态创建和移除元素的方式，控制元素的展示和隐藏
  • hidden：以切换样式的方式（display:none/block, 控制元素的展示和隐藏

• 使用建议

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

5.列表渲染wx:for

• 通过wx:for可以根据指定的数组，循环渲染重复的组件结构
• 默认情况下 ，索引是index,当前项是item

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

6.手动指定索引和当前项变量名

• 语法格式

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

7.wx:key的使用

• 提高渲染的效率

<view wx:for="{{array}}"  wx:key="id">
   索引是：{{idx}},当前项是：{{itemName}}
</view>

八、WXSS模板样式

1.rpx和px之间的换算

在iPhone6上，屏幕宽度为375px,共有750个物理像素，等分为750rpx,则：

• 750rpx=375px=750像素
• 1rpx=0.5px=1物理像素

2.@import的语法格式

• @import后跟需要导入的外联样式表的相对路径，用；表示语句结束

@import "/common.wxss";
.moddle-p{
padding:15px;
}

3.全局样式

• 定义在app.wxss中的样式是全局样式，作用于每个页面

4.局部样式

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

九、全局配置

1.全局配置定义

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

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

2全局配置window

• window节点常用的配置项
• onReachBottomDistance没有特殊需要建议不改

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

3.全局配置tabBar

• 底部tabBar(注：只能配置最少2个、最多5个tab标签)

• 顶部tabBar(注：当渲染顶部tabBar时，不显示icon，只显示文本)

• tabBar6个组成部分

  • backgroundColor：tabBar的背景色
  • selectedIconPath：选中时的图片路径
  • borderStyle：tabBar上边框的颜色
  • iconPath：未选中时的图片路径
  • selectedColor：tab上的文字选中时的颜色
  • 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

• 每个tab项的配置选项

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

十、页面配置

• 注：当页面配置和全局配置冲突时，根据就近原则，最终的效果以页面配置为准
• 页面配置中常用配置项

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

十一、网络数据请求

1.请求的两个限制

• 只能请求HTTPS类型的接口
• 必须将接口的域名添加到信任列表中

2.配置request合法域名

• 官方接口已换成https://applet-base-api-t.itheima.net/

3.发起GET请求和POST请求

• 语法格式

  wx.request({
  url: 'https://www.escook.cn/api/get',
  method:'GET',//这里换成POST即可
  data:{
    name:'zs',
    age:20
  },
  success:(res)=>{
       console.log(res)
  }

4.关于跨域和ajax的说明

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

• ajax的技术核心依赖于浏览器中的XMLHttpRequest这个对象，所以在小程序中不能叫"发起Ajax请求"，而是叫做"发起网络数据请求"

十二、页面事件

1.页面导航的定义

• 声明式导航

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

• 编程式导航

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

2.声明式导航

(1)导航到tabBar页面

• 在使用组件跳转到指定tabBar页面时，需要指定url属性和open-type属性
• url表示要跳转的页面的地址，必须以/开头
• open-type表示跳转的方式，必须为switchTab

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

(2)导航到非tabBar页面

• 在使用组件跳转到指定非tabBar页面时，需要指定url属性和open-type属性
• url表示要跳转的页面的地址，必须以/开头
• open-type表示跳转的方式，navigate(可以省略不写)

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

(3)后退导航

• 如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性
• open-type的值必须是navigateBack,表示进行后退导航
• delta的值必须是数字，表示要后退的层级

<navigator open-type="navigateBack" delta='1'>
退回上一页
</navigator>

3.编程式导航

(1)导航到tabBar页面

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

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

<button  bindtap="gotoMessage"></button>

gotoMessage(){
 wx.switchTab({
   url:'/pages/index/index'
  })
}

(2)导航到非tabBar页面

<button  bindtap="gotoInfo"></button>

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

(3)后退导航

<button  bindtap="gotoBack"></button>

gotoBack(){
 wx.navigateBack({
 //默认一层可以省略delta
 delta:1
 })
}

4.导航传参

（1）声明式导航传参

• url路径后面可以携带参数
• 参数与路径之间使用?分隔
• 参数键与参数值用=相连
• 不同参数用&分离

<navigator url="/pages/message/message?name=zs&age=20" >
导航到tabBar页面
</navigator>

(2)编程式导航传参

<button  bindtap="gotoInfo"></button>

gotoInfo(){
 wx.navigateTo({
  url:'/pages/info/info?name=zs&gender=男'
 })
}

(3)在onLoad中接收导航参数

• 通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取**(数据放在接收者的onLoad身上)**

onLoad:function(options){
console.log(options)
}//接收者写的业务

5.下拉刷新事件

(1)全局开启下拉刷新

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

(2)局部开启下拉刷新

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

(3)配置下拉刷新窗口的样式

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

(4)监听页面的下拉刷新事件

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

(5)停止下拉刷新效果

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

  onPullDownRefresh() {
      this.setData({
      count:0
      })
    wx.stopPullDownRefresh()
  },

6.上拉触底事件

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

• 在页面的.js文件中，通过onReachButton()函数即可监听当前页面的上拉触底事件(需要解决频繁下拉的问题)

onReachButton(){
   console.log("已触发")
}//新版本不用onReachButton：function(){}

(2)配置上拉触低距离

• 在全局或页面的.json配置文件，通过onReachButtonDistance属性来配置上拉触底的距离(默认50)

(3)对上拉触底节流处理

• 在data中定义isloading节流阀
  • false表示当前没有进行任何数据请求
  • true表示当前正在进行数据请求
• 在getColors()方法中修改isloading节流阀的值
  • 在刚调用getColors时将节流阀设置true
  • 在网络请求的complete1回调中，将节流阀重置为false
• 在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制
  • 如果节流阀的值为true，则阻止当前请求
  • 如果节流阀的值为false，则发起数据请求

十三、生命周期

1.生命周期定义

• 小程序的启动，表示生命周期的开始
• 小程序的关闭，表示生命周期的结束
• 中间小程序的运行过程，就是小程序的生命周期

2.生命周期的分类

• 应用生命周期

  • 特指小程序从启动—>运行—>销毁的过程

• 页面生命周期

  • 特指小程序中，每个页面的加载—>渲染—>销毁的过程

• 页面的生命周期范围较小，应用程序的生命周期范围较大

3.生命周期函数

• 生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行
• 生命周期函数的作用:允许程序员在特定的时间点，执行某些特定的操作。
• 注:生命周期强调的是时间段，生命周期函数强调的是时间点

3.生命周期函数函数

• 应用生命周期函数

  • 需要在app.js中声明

    生命周期函数	说明
    onLaunch	小程序初始化完成时触发，全局只触发一次
    onShow	小程序启动，或从后台进入前台显示时触发
    onHide	小程序从前台进入后台时触发
    onError	小程序发生脚本错误或 API 调用报错时触发
    onPageNotFound	小程序要打开的页面不存在时触发
    onUnhandledRejection()	小程序有未处理的 Promise 拒绝时触发
    onThemeChange	系统切换主题时触发

• 页面生命周期函数

  • 需要在页面的.js中声明

    生命周期函数	说明	作用
    onLoad	监听页面加载，一个页面只调用1次	发送请求获取数据
    onShow	监听页面显示	请求数据
    onReady	监听页面初次渲染完成，一个页面只调用1次	获取页面元素（少用）
    onHide	监听页面隐藏	终止任务，如定时器或者播放音乐
    onUnload	监听页面卸载，一个页面只调用1次	终止任务

• 页面的生命周期范围较小，应用程序的生命周期范围较大

十四、WXS的概念

1.什么是wxs

WXS是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。

wxml中无法调用在页面.js中定义的函数，但是wxml中可以调用wxs中定义的函数。

2.wxs和js的区别

• 于js语法类型，但是他们是两种完全不同的语言
• wxs有自己的数据类型
  • number数值类型、String字符串类型、Boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、regexp正则
• wxs遵循CommonJs规范
  • module对象
  • require()函数
  • module.exports对象

3.wxs基础语法

• wxml文件中的每个标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员

• 内嵌式wxs脚本

  <view> {{m1.toUpper(username)}}</view>
  
  <wxs module="m1">
  module.exports.toUpper=function(str){
    return str.toUpperCase()
  }
  </wxs>
  

• 外联式wxs脚本

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

  <!--调用m2模块的方法-->
  <view>{{m2.toLower(country)}}</view>
  <!--引入外联式文件，命名为m2-->
  <wxs src="../../utils/tools.wxs" module="m2"></wxs>
  
  //tools.wxs文件
  function toLower(str){
  return str.toLowerCase()
  }
  
  module.exports={
  toLower:toLower
  }
  

3.wxs的特点

• 与javascript不同

• 不能作为组件的事件回调

  • 不能作为事件回调 如：bindtap=“m2.toLower”
  • 必须配合Mustache语法进行使用 如：{{m2.toLower(country)}}

• 隔离性

  • 指wxs的运行环境和其他javascrpit代码是隔离的
  • wxs不能调用js中定义的函数
  • wxs不能调用小程序提供的API

• 性能好

  • 在IOS,小程序内的WXS会比js代码块2~30倍
  • 在android设备上，二者的运行效率无差异

*****案例有用小知识：

1.判断是否有还有下一页数据 ：页码值*每页显示多少条数据>=总数据条数

2.好像新版没有conplete:()=>{}了，可以在数据请求成功后面写 wx.hideLoading()、wx.stopPullDownRefresh()

十五、自定义组件

1.全局组件引用

• 在app.json全局配置文件中引用组件的方式，叫做"全局引用"

2…局部组件引用

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

3.组件和页面的区别

• 组件的.json文件中需要声明"component":true属性
• 组件的.js文件中调用的是compoonent()函数
• 组件的事件处理函数需要定义到methods节点中

4.组件样式隔离

• 组件A的样式不会影响到组件C的样式
• 组件A的样式不会影响小程序页面的样式
• 小程序页面的样式不会影响组件A和C的样式
• 注：只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

5.修改组件的样式隔离选项

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

//在组件的.js文件中新增如下配置
Component({
options:{
styleIsolation:'isolated'
}
})

//或在组件的.json文件中新增如下配置
{
"styleIsolation":"isolated"
}

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

6.自定义组件的数据、方法、属性

• 数据：data 【倾向存储私有数据】

• 方法：methods 【和vue相似】

• 属性：properties【倾向存储外界传递到组件的数据】

  • 是组件的对外属性，用来接收外界传递到组件的数据

  • 与data数据本质上没有区别，可以渲染页面

    Component({
    //属性定义
    properties:{
    、//完整定义属性的方式
     max:{ 
      type:Number, //属性值得数据类型
      value:10		//属性默认值
     }
     //简化定义属性的方式【不需指定属性默认值时，可以使用简化方式】
     max:Number   
    
    }
    })
    
    <my-test1 max="10"></my-test1>
    

7.数据监听器

• 监听器用于监听和响应任何属性和数据字段的变化，从而执行特点的操作，作用类似于vue中的watch监听器

  Component({
  data:{n1:0,n2:0,sum:0},
  methods:{
  addN1(){this.setData({n1:this.data.n1+1})},
  addN2(){this.setData({n2:this.data.n2+1})},
  }
  observers:{
       'n1,n2':function(n1,n2){//监听n1和n2的变化
        this.setData({sum:n1+n2})
       }
  }
  })
  

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

  Component({
  observers:{
       '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){//监听A和B的变化
        //触发监听的3种情况
        【为属性A赋值】 使用setData设置this.data.对象.属性A时触发
        【为属性B赋值】 使用setData设置this.data.对象.属性B时触发
        【直接为对象赋值】 使用setData设置this.data.对象时触发
       }
  }
  })
  

• 如果监听对象的属性太多了，可以使用通配符**来监听对象中所有属性的变化

  Component({
  observers:{
       '对象.**':function(obj){//监听A和B的变化
         fullColor:`${obj.r},${obj.g},${obj.b}`
       }
  }
  })
  

8.纯数据字段

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

• 某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用

• 提高渲染的性能

• 使用规则

  Component({
  options:{
  //pureDataPattern为正则表达式
   		pureDataPattern:/^_/
       },
       data：{
       a:true,//普通数据字段
       _b:true//纯数据字段
  }
  })
  

9.组件的生命周期

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

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

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

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

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

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

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

• lifetimes节点

  Component({
  lifetimes:{
   attached(){},
   detached(){}
  }
  })
  

10.组件所在页面的生命周期

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

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

• pageLifetimes节点

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

11.插槽

• 单个插槽

  • 只允许使用一个进行占位

    //组建的封装者
    <view >
      <view>这里是组件的内容节点</view>
      <slot></slot>
    </view>
    
    
    //组建的使用者
    <test1 >
      <view>这里是slot的内容</view>
    </test1>
    

• 多个插槽

  Component({
  options:{
  	multipleSlots:true//启动多个插槽
  },
  properties:{},
  methods:{}
  })
  
  
  //组件的封装者
  <view>
   <slot name="before"></slot>
   <view>这里是组件的内容节点</view>
   <slot class="after"></slot>
  </view>
  
  
  
  //组建的使用者
  <test1 >
    <view slot="before">这里是before的slot的内容</view>
    <view slot="after">这里是after的slot的内容</view>
  </test1>
  

12.组件通信

父子组件之间的3种通信方式

• 属性绑定

  • 用于父组件向子组件得指定属性设置数据，仅能设置JSON兼容的数据

  • 只能传递普通类型的数据，无法将方法传递给子组件

    //父组件.js
    data:{
      count:0
    }
    
    <test1 count="{{count}}">父组件的wxml</test1>
    
    //子组件的.js文件
    properties：{
    	count:Number
    }
    <view>{{count}}子组件得wxml</view>
    
    

• 事件绑定

  • 用于子组件向父组件传递数据，可以传递任意数据

  • 步骤一：

    //在父组件中定义syncCount方法
    syncCount(){
     console.log("父组件的内容")
    }
    

  • 步骤二

    <!--在父组件的wxml中，定义自定义事件的形式-->
    <!--第一种推荐使用,结构清晰-->
    <test1  bind:sync="syncCount"></test>
    <test1  bindsync="syncCount"></test>
    

  • 步骤三

    //子组件的js代码
    methods：{
    		//triggerEnvent('自定义事件名称',{/*参数对象*/})
    	this.triggerEnvent('sync',{value:this.properties.count})
    
    }
    

  • 步骤四

    //在父组件的js中
    //在父组件中定义syncCount方法
    syncCount(){
     //console.log("父组件的内容")
     	this.setData({
     		count:e.detail.value
    	 })
    }
    

• 获取组件实例

  • 父组件还可以通过this.selectComponent()获取子组件实例对象
  • 这样就可以直接访问子组件得任意数据和方法

//这些都在父组件的页面里面写的
//test子组件组件
<test class="customA" id="cA"></test>
<button bintap="getChild">获取子组件实例</botton>
getChild(){
	const child=this.selectComponent('.customA')//可以传递id选择器#cA,但是不能提供标签选择器如my-test3
	child.setData({count:child.properties.count+1})//调用子组件得setData
	child.addCount()//调用子组件得方法
}

• behaviors

  • 实现组件间代码共享的特性，类型于vue.js中的"mixins"
  • 每个组件可以引用多个behavior,behavior也可以引用其他behavior
  • 每个behavior可以包含一组属性、数据、生命周期函数和方法；组件引用它时，它的属性、数据、方法会被合并到组件中
  • 同名规则的覆盖和组合规则(https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html))

  //需要创建一个新的文件夹
  module.exports=Behavior({
  //属性节点
  	properties:{},
  	//私有数据节点
  	data:{username:'zs'},
  	//事件处理函数和自定义方法节点
  	methods:{},
  	//其他节点
  })
  
  
  //导入并使用Behavior
  const myBehavior=require("../../Behavior/xxxx")
  Component({
  	//将导入的Behavior实例对象，挂载到behaviors数组节点中，即可生效
  	behaviors:[myBehavior]
  	//其他节点
  })
  
  <test1>{{username}}</test>
  
  

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

十六、小程序API的Promise化

• 在app.js导入文件

import {promisifyAll} from 'miniprogram-api-promise'
const wxp=wx.p={}
promisifyAll(wx,wxp)

• 调用Promise化之后的异步API

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

asyn getInfo(){
	const {data:res}=await wx.p.request({
	methods:'GET',
	url:'',
	data:{name:'zs',age:'20'}
	})


}

十七、全局数据共享

1.什么是全局数据共享

• 是为了解决组件之间数据共享的问题

2.安装mobx相关的包

npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

3.导入创建store

//在这个js文件中，专门来创建Store的实例对象
import {action, observable} from 'mobx-miniprogram'
export const store=observable({
//数据字段
  numA:1,
  numB:2,
//计算属性
get sum(){
  return this.numA+this.numB
},
//actions方法，用来修改store中的数据
 updateNumA1:action(function(step){
  this.numA+=step
})
})

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

//页面的.js文件
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
  onLoad(options) {
 this.storeBindings=createStoreBindings(this,{
   store,
   fields:['numA','numB','sum'],
   actions:['updateNum1']
 })
  },

  onUnload() {
    this.storeBindings.detroyStoreBindings()
  }
  
  })

5.在页面使用store中的成员

<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>

   btnHandler(e){
     this.updateNumA1(e.target.dataset.step)
   },

6.将store中的成员绑定到组件中

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


// component/test/test.js
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:[
     {
       numA:()=>store.numA,//第一种写法
       numB:(store)=>store.numB,//第二种写法
       sum:'sum'//第三种写法

     }
    ],
    actions:{
      updateNum2:'updateNum2'
    }
  }
 
  })

7.在组件中使用store中的成员

<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>

methods:{
   btnHandler(e){
     this.updateNumA2(e.target.dataset.step)
   }, 
   }

十八、分包

1.分包基础

• 打包原则
  • tarBar必须在主包里面
  • tarBar必须在主包里面
  • 主包也可以有自己的pages

//在app.js
"subPackages": [
    {
      "root": "pkgA",
      "name": "p1",
      "pages":[
        "pages/cat/cat"
      ]
    }
  ],

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

2.独立分包

• 与普通分包的区别

  • 普通分包必须依赖于主包才能运行
  • 独立分包可以不下载主包的情况下，独立运行
  • 是否有"independent"：true

• 引用原则

  • 主包无法引用独立分包内的私有资源
  • 独立分包之间不能相互引用私有资源
  • 独立分包和普通分包之间不能相互引用私有资源
  • 注:独立分包中不能引用主包内的公共资源

3.分包预下载

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

 "preloadRule": {
    "pages/message/message":{
      "packages": ["p1"],
      "network": "all"//使用几G网络
    }
  }

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

十九、自定义tabBar

1.使用流程https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

• 配置信息
• 添加tabBar代码文件
• 编写tabBar代码

二十、案例的错题

案例文档：https://applet-base-api-t.itheima.net/docs-uni-shop/index.htm#

gitee源码：https://search.gitee.com/?skin=rec&type=repository&q=uni-shop2刘龙彬

接口地址：https://www.showdoc.com.cn/128719739414963/2513235043485226(或https://www.aliyundrive.com/s/7srGJUnkfKR密:9v4b)

第一个问题：

第二问题：拿不到token，要自己模拟，然后我放弃了

总结：受后端的限制，下次爬也要写一个后端真受不了了，从登录开始就没怎么写，因为token的限制，搞了个失败品，留到毕设（说不定那天用到了呢），不过敲这种还蛮有意思，越敲越接近生活的东西了
`