小程序二
11.网络数据请求
1.发起GET请求
// 发起GET请求
onTapGet () {
wx.request({
// 请求地址，必须是以https://开头
// 必须是配置在request合法域名
url: 'https://www.escook.cn/api/get',
// 请求方式
method: 'GET',
// 请求参数
data: {
name: 'zs',
age: 22
},
// 请求成功的回调
success: (res) => {
console.log(res)
}
})
}
2.发起post请求
// 发起GET请求
onTapPost () {
wx.request({
// 请求地址，必须是以https://开头
// 必须是配置在request合法域名
url: 'https://www.escook.cn/api/post',
// 请求方式
method: 'POST',
// 请求参数
data: {
name: 'lisi',
age: 18
},
// 请求成功的回调
success: (res) => {
console.log(res)
}
})
}
- 声明式导航
1.导航到 tabBar 页面
在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：
-
url 表示要跳转的页面的地址，必须以 / 开头
-
open-type 表示跳转的方式，必须为 switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
- 导航到非 tabBar 页面
-
url 表示要跳转的页面的地址，必须以 / 开头
-
open-type 表示跳转的方式，必须为 navigate
-
为了方便, 非 tabBar 页码的跳转时 open-type 也可以省略
<navigator url="/pages/info/info" open-type="navigate">跳转到info页面</navigator>
<navigator url="/pages/info/info" >跳转到info页面</navigator>
3.后退导航
如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
-
open-type 的值必须是 navigateBack ，表示要进行后退导航
-
delta 的值必须是数字，表示要后退的层级
<navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>
注意：
- 为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1
- tabBar 页面是不能实现后退的效果的. 因为, 当我们跳转到 tabBar 页面，会关闭其他所有非 tabBar 页面,所以当处于 tabBar 页面时, 无页面可退
13.编程式导航
1.导航到 tabBar 页面
调用wx.switchTab(Object object)方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下
image.png
示例代码如下：
<!--
编程式导航
跳转至tabBar页面
-->
<button bindtap="gotoMessage">跳转到messae页面</button>
/*
通过编程式导航
跳转至tabBar页面
message页面
*/
gotoMessage () {
wx.switchTab({
// 代表要跳转的路径
url: '/pages/message/message',
})
},
- 导航到非 tabBar 页面
调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。
其中 Object 参数对象的属性列表, 如下：
image.png
示例代码如下：
<!--
编程式导航
跳转至非 tabBar页面
-->
<button bindtap="gotoInfo">跳转到Info页面</button>
/*
通过编程式导航
跳转至非tabBar页面
Info页面
*/
gotoInfo () {
wx.navigateTo({
url: '/pages/info/info',
})
},
3.后退导航
调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。
其中 Object 参数对象可选的, 属性列表如下：
image.png
示例代码如下：
<!--
通过编程式导航实现后退导航
-->
<button bindtap="goBack">编程式导航实现后退</button>
/*
通过编程式导航实现后退导航
*/
goBack () {
// 如果不传递参数就是返回上一页
// 如果要传递参数则是传递 delta数字型， 代表返回的层级。
wx.navigateBack()
},
注意： tabBar 页面是不能实现后退的效果的.
- 因为, 当我们跳转到 tabBar 页面，会关闭其他所有非 tabBar 页面,所以当处于 tabBar 页面时, 无页面可退
14.导航传参
- 声明式导航传参
navigator组件的 url 属性用来指定将要跳转到的页面的路径。
<!--
声明式导航传参
参数与路径之间使用 ? 分隔
参数键与参数值用 = 相连
不同参数用 & 分隔
-->
<navigator url="/pages/info/info?name=zs&age=20">跳转至info页面</navigator>
- 编程式导航传参
wx.navigateTo(Object object) 方法跳转页面
<!--
编程式导航传参
-->
<button bindtap="gotoInfo2">跳转到info页面</button>
/*
编程式导航传递参数
*/
gotoInfo2 () {
wx.navigateTo({
url: '/pages/info/info?name=李&gender=男',
})
},
- 在 onLoad 中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到
/**
* 页面的初始数据
*/
data: {
// 导航传递的参数
query: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 通过声明式导航和编程式导航 都可以
// 在onLoad声明周期函数中获取传递的参数
console.log(options);
// 将导航传递的参数转存在data中
this.setData({
query: options
})
},
15.下拉刷新事件
1.开启下拉刷新:
- 在json 配置文件中，将 enablePullDownRefresh设置为 true
2.. 配置下拉刷新窗口的样式
- backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
- backgroundTextStyle用来配置下拉刷新 loading 的样式，仅支持dark 和light
3.监听页面的下拉刷新事件
- 在页面的 js 文件中，通过 onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
4.停止下拉刷新的效果
- 调用 wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。
16.上拉触底事件
1.监听页面的上拉触底事件
在页面的 js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。
2.配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance节点来配置上拉触底的距 离。
3.对上拉触底进行节流处理
①在 data 中定义 isLoading 节流阀
- false 表示当前没有进行任何数据请求
- true 表示当前正在进行数据请求
② 在 getColors() 方法中修改 isloading 节流阀的值
- 在刚调用 getColors 时将节流阀设置 true
- 在网络请求的 complete 回调函数中，将节流阀重置为 false
③ 在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制
- 如果节流阀的值为 true ，则阻止当前请求
- 如果节流阀的值为 false ，则发起数据请求
