跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨城的问题。
Ajax技术的核心是依赖于测览器中的XMLhttpRequest这个对象,由于小程序的宿主环境是微信客户端。所以小程序中不能叫做“发起Ajax请求”。而是叫做“发起网络数据请求”。
只能请求 HTTPS 类型的接口
必须将接口的域名添加到信任列表中(微信开发者中心登录操作)
域名不能使用 IP 地址或 localhost
域名必须经过 ICP 备案
如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。 此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项,跳过 request 合法域名的校验。
发起简单的get请求
toGet(){
wx.request({
url: 'https://www.escook.cn/api/get', // 请求的接口要求 https 备案 不能是ip地址
method:'GET', // 请求的方式
data:{ // 发送给服务器的数据
name:'zs',
age:22
},
success:(res) =>{ // 请求成功之后的回调函数
console.log(res.data);
}
})
},
发起简单的post请求
toPost(){
wx.request({
url: 'https://www.escook.cn/api/post', // 请求的接口要求 https 备案 不能是ip地址
method:'POST', // 请求的方式
data:{ // 发送给服务器的数据
name:'ls',
gender:'男'
},
success:(res) =>{ // 请求成功之后的回调函数
console.log(res.data);
}
})
},
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数,示例代码如下:
onLoad(options) {
this.toGet()
this.toPost()
},
我们在创建一个新页面是时js页面除了帮我们创建生命周期函数以外还自动预留了页面事件函数
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
全局开启下拉刷新 在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为 true
局部开启下拉刷新 在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true
在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效果。
下拉刷新相关配置:
{
"enablePullDownRefresh": true,
"backgroundColor": "#ebebeb",
"onReachBottomDistance": 50,
"backgroundTextStyle": "dark"
}
当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。
示例代码如下:
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
this.setData({
count:0 // 下拉刷新后重置数据 count为0
})
setTimeout(() => { // 稍等300ms后 下拉层恢复原样
wx.stopPullDownRefresh()
},300)
},
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。
定义请求数据的方法:
getColorList(){
this.setData({
isLoading:false // 关闭节流阀 开始执行此次函数时 期间再次执行就会失效
})
wx.showLoading({
title: '请求数据响应中', // 展示loading效果
})
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:({data : res}) => {
// 对象结构 请求回调回来的的data 就是 res 再给res.data 就是需要的数据
// {要从对象拿到那一项数据(key) :起个名字} :{对象数据}
// 不然就需要 res.data.data 可能是扩展运算符里 只让有 一个点
this.setData({
colorList : [...this.data.colorList,...res.data] // 把新增请求过来的数据汇总到一块
})
},
// 网络请求 无论成功还是失败都会执行的回调
complete: () =>{
wx.hideLoading() // 关闭等待动画
this.setData({
isLoading:true // 开启节流阀 可以根据此布尔值 再次发起请求
})
},
// 网络请求失败 发生的回调
fail:()=>{
}
})
},
刚进入页面的时候请求下数据
onLoad(options) {
this.getColorList()
},
上拉触底时请求更多数据 根据节流阀判断 是否还在请求中 如果还在请求中就屏蔽掉此次操作
来实现 节流效果
onReachBottom() {
if(this.data.isLoading){
this.getColorList()
}
},
在页面中渲染数据:
wx:key="index"
style="background-color: rgba({{item}});"
class="colorB">
{{item}}
样式美化:
.colorB{
border: 1px solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}