微信小程序——部分知识点复习

1、生命周期调用函数

2、组件事件处理函数

3、tabBar标签栏的配置

4、条件渲染

5、列表渲染

6、轮播图的联动效果实现

7、页面跳转方式

8、数据缓存

9、Socket连接

10、picker组件

1、生命周期调用函数

常见的生命周期函数有onLaunch、onLoad、onReady、onShow、onHide、onUnload

onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onLoad：页面加载时触发，一个页面只会调用一次。通过参数options可以获取打开当前页面路径中的参数。

onReady：页面初次渲染完成的时候调用。一个页面只会调用一次，代表页面已经准备妥当，此时可以与视图层进行交互。

onShow：当前页面显示时触发。例如从后台切入前台。

onHide：当页面隐藏时触发。例如从后台切入前台。

onUnload：页面卸载时触发。例如使用API中的wx.redirectTo()或wx.navigateBack()跳转其他页面触发。

2、组件事件处理函数

组件事件处理函数用于为组件绑定事件，通常为组件绑定事件有两种 "bind事件类型" 和"catch事件类型"

bind方式，不会阻止冒泡事件向上冒泡，而catch可以阻止冒泡事件向上冒泡

2.1、e.target和e.currentTarget的区别

<view bindtap="viewtap" id="outer">
outer
<view id="inner">inner</view>
</view>

 viewtap:function(e){console.log(e.target.id+"-"+e.currentTarget.id)}

单击outer会输出outer-outer，单击inner会输出inner-outer，而父元素绑定了viewtap事件，子元素没有绑定viewtap事件，因此

e.target指向的是触发事件的元素；
e.currentTarget指向的是添加监听事件的元素；

3、tabBar标签栏的配置

tabBar用于实现页面底部的标签栏，主要属性如下，其中list是一个数组，数组中的每一个元素都是一个标签按钮对象，设置对应的属性时，可以跳转到对应的标签页。其中list种至少有两个元素，最多不超过五项

属性	说明
color	未选择时，底部导航栏颜色
selectedColor	选中时，底部导航栏颜色
borderStyle	底部导航边框颜色
backgroundColor	底部导航背景色
list	导航配置数组
pagePath	页面访问地址
iconPath	未选择时图片路径
selectedIconPath	选中时图片路径
text	导航图标下方文字

标签栏示例代码如下：

"tabBar": {"color": "#FF000000","selectedColor": "#ff4c91","borderStyle": "white","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "images/invite.png","selectedIconPath": "images/invite.png","text": "邀请函"},{"pagePath": "pages/picture/picture","iconPath": "images/marry.png","selectedIconPath": "images/marry.png","text": "照片"},{"pagePath": "pages/video/video","iconPath": "images/video.png","selectedIconPath": "images/video.png","text": "美好时光"},{"pagePath": "pages/map/map","iconPath": "images/map.png","selectedIconPath": "images/map.png","text": "婚礼地点"},{"pagePath": "pages/guest/guest","iconPath": "images/guest.png","selectedIconPath": "images/guest.png","text": "宾客信息"}]},

4、条件渲染

wx:if、wx:elif、wx:else，可以用其来控制标签的显示与隐藏

代码示例

<view><block wx:if="{{num1>num2}}"><text>比较结果:第一个数大</text></block><block wx:elif="{{num1<num2}}"><text>比较结果:第二个数大</text></block><block wx:else="{{num1==num2}}"><text>比较结果:两数相等</text></block>
</view>

注意：使用wx:if和组件设置hidden属性都可以实现元素的隐藏与显示，二者有什么区别？

（1）wx:if 是遇 true 显示，hidden 是遇 false 显示。

（2）wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

（3）如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

（4）如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多

5、列表渲染

在组件上，使用wx:for绑定一个数据，遍历次数据，就可以使用数组中的各项元素重复渲染该组件。

// index.js中的数据部分data: {gender:[{name:'男',value:'0',checked:true},{name:'女',value:'1',checked:false}]}<!-- index.wxml中的渲染部分 -->
<view><text>性别：</text><radio-group name="gender"><label wx:for="{{gender}}" wx:key="value"><radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}</label></radio-group>
</view>

在渲染列表中，可以使用item表示数组的当前项，使用index表示当前项的下标。wx:key表示每一项的唯一标识，此代码中value的值都是唯一的，也可以用保留关键字*this标识将每一项本身作为唯一标识。

在列表渲染中，设置wx:key可以在数据改变后在页面中重新渲染时，使原有的组件保持自身的状态，而不是重新创建，提高了列表渲染时的效率。

6、轮播图的联动效果实现

1、swiper组件

swiper组件是滑块视图容器，经常用于实现轮播图，在音乐播放器小程序中可以实现标签页的切换。

属性：

属性	类型	说明
indicator-dots	Boolean	是否显示页面的指示点，默认为false
indicator-color	Color	指示点的颜色
indicator-active-color	Color	选中的指示点颜色
autoplay	Boolean	是否自动切换，默认为false
current	Number	当前所在滑块的index,默认为0
current-item-id	String	当前所在滑块的item-id
interval	Number	自动切换时间间隔（ms）
duration	Number	滑动动画时长（ms）
bindchange	EventHandle	current改变时会触发change事件
circular	Boolean	是否采用衔接滑动，默认false

（1）自动播放的轮播图实现

<swiper class="content-info-slipe" indicator-color="rgba(255,255,255,4)" indicator-active-color="#fff"  indicator-dots  autoplay><swiper-item><image src="/images/test3.jpg"></image></swiper-item><swiper-item ><image src="/images/test2.jpg"></image></swiper-item><swiper-item ><image src="/images/test1.jpg"></image></swiper-item>
</swiper>

（2）单击上面一栏的标签，定位当前current的位置，改变下面的轮播页面（参考音乐播放器标签页的切换）

主要代码片段

<view class="tab"><view class="tab-item {{tab==0 ? 'active' : ''}} " bindtap="changeItem"  data-item="0">音乐推荐</view><view class="tab-item {{tab==1 ? 'active' : ''}}"   bindtap="changeItem" data-item="1">播放器</view><view class="tab-item  {{tab==2 ? 'active' : ''}} " bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content" ><swiper current="{{item}}"  bindchange="changeTab"><swiper-item >  <include src="play.wxml"/>  </swiper-item><swiper-item >  <include src="info.wxml"/> </swiper-item><swiper-item>   <include src="playlist.wxml"/> </swiper-item></swiper>
</view>

数据和事件绑定部分：changeItem绑定事件函数用来把当前view标签里data-item属性里的值给item，再将item作为current的属性值，便可以单击实现标签页的转换。changeTab函数用来将current的值给tab，再利用三目表达式（tab==0 ? 'active' : ''）可以给当前单击的标签设置样式。

Page({data: {item:0,tab:0},changeItem:function(e){this.setData({item:e.target.dataset.item})},changeTab:function(e){this.setData({tab:e.detail.current})}
})

7、页面跳转方式

1、wx.switchTab

wx.switchTab用于页面跳转，且只能跳到tabBar页面，并关闭其他的tabBar页面

常用属性

属性	类型	说明
url	string	需要跳转的tabBar页面的路径（需要在app.json的tabBar字段定义的页面）路径后不能带有参数
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数(成功失败都会执行）

2、wx.navigateTo和wx.redirectTo

(1)wx.navigateTo 用于跳转到应用内的某个页面，且保留当前页面。跳转页面后，单击左上角可以返回上一个页面。需要注意的是,wx.navigateTo只能跳转到非标签页。另外，使用wx.navigateTo可以回到原页面。

(2)wx.redirectTo 用于跳转到应用内的某个页面，且关闭当前页面，不能返回上一个页面，只能跳到非标签页

属性与wx.switchTab的一样，只不过wx.navigateTo和wx.redirectTo的url属性值路径可以带参数，例如url:detail?id=1

3、wx.reLaunch

wx.reLaunch关闭所有页面，打开到应用内的某个页面。既能跳到标签页，又能跳到非标签页

8、数据缓存

1、异步缓存

名称	说明
wx.setStorage()	将数据存储在本地缓存中指定的key中
wx.getStorage()	从本地缓存中异步获取指定key的内容
wx.getStorageInfo()	异步获取当前stroage的相关信息
wx.removeStroage()	从本地缓存中移除指定的key

2、同步缓存（Sync为同步的标识）

名称	说明
wx.setStorageSync()	wx.setStorage()的同步版本
wx.getStorageSync()	wx.getStorage()的同步版本
wx.getStorageInfoSync()	wx.getStorageInfo()的同步版本
wx.removeStroageSync()	wx.removeStorage()的同步版本

注意：异步方式通过传入回调函数执行结果，而同步方式通过返回值获取结果。

如果发生错误，异步方式会执行fail回调函数返回错误，而同步方式则通过try.....catch捕获异常来获取错误信息。

9、Socket连接

wx.sendSocketMessage() 用于通过WebSocket连接发送数据。

wx.connectSocket() 用于创建服务器连接。

wx.onSocketMessage() 监听WebSocket接收到服务器的消息事件。

wx.onSocketOpen() 用来设置WebSocket连接打开的回调函数。

wx.closeSocket() 在已经连接成功后才能关闭连接。

10、picker组件

picker组件是从底部弹起的滚动选择器，目前支持5种选择器，通过mode方法来区分

分别是普通选择器(mode=”selector”)、多列选择器(mode=”multiSelector”)、时间选择器（mode=”time”）和市区选择器(mode=”regin”),默认为普通选择器。

例子：爱好选择

<!-- index.wxml中的 -->
<picker range="{{array}}" value="{{index}}" bindchange="pickerChange"><view>你的爱好是:（点我选择）{{array[index]}}</view>
</picker>// index.js中的代码
const app = getApp()
Page({data:{array:['跑步','唱歌','打篮球','跳舞'],index:1},pickerChange:function(e){this.setData({index:e.detail.value})}
})