微信小程序51~60
1.界面交互-loading提示框
loading提示框用于增加用户体验， 对应的API有两个：
- wx.showLoading()显示loading提示框
- wx.hideLoading()关闭loading提示框
Page({getData () {//显示loading提示框wx.showLoading({//提示内容不会自动换行，多出来的内容会被隐藏title: '数据加载中...',//展示透明蒙层，防止触摸穿透mask: true,}),wx.request({// 接口地址url: 'url',//接口方式method: 'GET',//请求参数data: {},//请求头header: {},// API调用成功以后，执行的回调，res是服务器响应的数据success: (res) => {console.log(res);},// API调用失败以后，执行的回调fail: (err) => {console.log(err);},// API不管调用成功还是失败，都会执行执行的回调cpmplete: (res) => {//隐藏效果，和展示配套使用wx.hideLoading()}})}
})2.界面交互-模态对话框-消息提示框
- wx.showModal() :模态对话框，常用于询问用户是否执行一些操作。例如：询问用户是否退出登录，是否删除商品
- wx.showToast() :消息提示框，根据用户的某些操作来告知操作的结果。例如：退出成功给用户提示，提示删除成功等。
Page({async delHandler () {//shouModal显示模块对话框const res = await wx.showModal({title: '提示',content: '是否删除该商品？'})if (confirm) {wx.showToast({title: '删除成功',icon: none,duration: 2000})}else{wx.showToast({title: '取消删除',icon: error,duration: 2000})}}
})
3.本地存储
使用API将数据存储在用户的设备上，以便小程序运行时和下次启动时快速地读取这些数据
注意：对象类型的数据，可以直接进行存储获取，无需使用JSON.stringify()、JSON.parse()转换
同步API
Page({//将数据存储到本地setStorage (){wx.setStorageSync('num', 1)wx.setStorageSync( 'obj', {name: 'tom', age: 10 })},//获取存储到本地的数据getStorage (){const num = wx.getStorageSync('num')const obj = wx.getStorageSync('obj')console.log(num)console.log(obj);},//删除本地存储的数据removeStorage () {wx.removeStorageSync('num')},//清空本地存储的全部数据clearStorage () {wx.clearStorageSync()}})异步API
Page({//将数据存储到本地setStorage (){//异步wx.setStorage({key: 'num',data: 1}),wx.setStorage({key: 'obj',data: { name: 'jerry', age:18 }})},//获取存储到本地的数据getStorage (){//异步const { data } = await wx.getStorage({key: 'obj'})console.log(data);},//删除本地存储的数据removeStorage () {//异步wx.removeStorage({key: 'num'})},//清空本地存储的全部数据clearStorage () {//异步wx.clearStorage()}})4.路由与通信
实现页面跳转的方式
- 声明式导航：navigator组件
- 编程式导航：使用小程序提供的API
路径后可以带参数，参数与路径之间使用？分隔，参数键与参数值用 = 相连，不同参数用 & 分隔，例如: path?key=value&key2=value2
参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收
wx.switchTab()方法路径后面不能带参数
5.页面处理函数-上拉加载
上拉加载：当用户滑动页面到底部时，会自动加载更多的内容，以便用户继续浏览
实现方式：
- 在app.json或者page.json中配置距离页面底部的距离：onReachBottomDistance; 默认 50px
- 在页面.js中定义onReachBottomDistance事件监听用户上拉加载
"onReachBottomDistance": 100
Page({data: {numList: [1, 2, 3, 4]},// 监听用户上拉加载onReachBottom () {// console.log('监听用户上拉加载');const addList = this.data.numList[this.data.numList.length - 1]const newList = [addList + 1, addList + 2, addList + 3]this.setData({numList : [...this.data.numList, ...newList]})}
})
6.页面处理函数-下拉刷新
下拉刷新：当用户下拉页面时，页面会自动刷新，以便用户获取最新内容。
实现方式：
- 在app.json或者page.json中开启允许下拉，同时可以配置窗口、loading样式等
- 在页面.js中定义onPullDownRefresh事件监听用户下拉刷新
{"usingComponents": {},"onReachBottomDistance": 100,"enablePullDownRefresh": true,"backgroundColor": "#efefef","backgroundTextStyle":"light"
}
onPullDownRefresh () {this.setData({newList: [1, 2, 3]})//为了使完成下拉后loading效果回弹if(this.data.numList.length === 3) {wx.stopPullDownRefresh()}}
7.增强 scroll-view
使用scroll-view实现上拉加载更多和下拉刷新功能
<scroll-view scroll-y class="scroll-y"lower-threshold="100"bindscrolltolower="getMore"enable-back-to-top="true"refresher-enabledrefresher-default-style="black"refresher-background="#f7f7f8"bindrefresherrefresh="refreshHnadler"refresher-triggered="{{isTriggered}}"
><view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
</scroll-view>
8.自定义组件-创建和注册组件
小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
开发中常见的组件有两种：
- 公共组件：将页面内的功能模块抽取成自定义组件，以便在不同的页面中重复使用
- 页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护
建议一个组件一个文件夹
公共组件：
放在项目根目录的components文件夹中
公共组件进行全局注册：在app.json文件中配置usingComponents进行注册，注册后可以在任意页面使用
页面组件：
放在对应页面的目录下
页面组件进行局部注册：在页面的json中配置usingComponents进行注册，注册后只能在当前页面使用
在usingComponents进行组件注册时，需要提供自定义组件的组件名和自定义组件文件路径
在将组件注册好以后，直接将自定义组件的组件名当成组件标签名使用即可。
"usingComponents": {"custom-checkbox" : "./components/custom-checkbox/custom-checkbox"}
9.组件的数据以及方法
组件的数据以及方法需要在组件.js的Component方法中进行定义，Component创建自定义组件
- data：定义组件的内部数据
- methods：在组件中事件处理程序需要写到methods中才行
10.组件的属性
控制文本信息以及文本显示的位置
Properties是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和data一同用于组件的模板渲染
<custom-checkbox label="我已阅读并同意 用户协议和隐私协议 " position="right" />
