wx.request(Object object)
发起 HTTPS 网络请求。(获取网络数据库)
object属性
(1)String url:网络地址
(2)String/Object data:请求的参数
(3)function success:接口调用成功的回调函数
资讯类小案例
<!-- wxml -->
<view class="View">
<view class="viewList" wx:for="{{requestData}}" wx:key="index">
<view class="new">
<view class="newPic">
<image src="{{item.picurl}}"></image>
</view>
<view class="newContent">
<view class="newTitle">{{item.title}}</view>
<view class="newTime">{{item.posttime}}</view>
</view>
</view>
</view>
<view class="btnView">
<button type="primary" size="mini" plain bindtap="prePage">上一页</button>
<button type="primary" size="mini" plain bindtap="nextPage">下一页</button>
</view>
</view>
/* wxss */
.new{
display: flex;
background: pink;
margin: 10px 10px;
}
.newPic{
flex: 20%;
height: 100px;
}
.newPic image{
width: 100%;
height: 100%;
}
.newContent{
flex: 80%;
border: 2px solid black;
display: flex; /*设置弹性盒布局 */
flex-direction: column; /*主轴方向为垂直 */
justify-content: space-between; /*主轴方向均匀分布*/
}
.newTime{
color: gray;
}
.btnView{
display: flex;
justify-content: center;
margin: 40px;
}
// js 已省略部分生命周期函数
Page({
data: {
requestData:[],
page:1
},
prePage:function(){
var p = this.data.page
if(p>1)
{ p--} // 页码自减
this.setData({
page:p
})
this.getList(this.data.page);//调用getList方法进行网络请求
},
nextPage:function(){
var p = this.data.page
p++ // 页码自增
this.setData({
page:p
})
this.getList(this.data.page);//调用getList方法进行网络请求
},
getList:function(p){
//将wx.request封装在getList方法中以便直接调用并添加形参 p传递数值
wx.request({
url:"http://edu.newsight.cn/wxList.php", //网络路径
data:{ //参数列表
num:5, //数据数量
page:p //页码 ,具体参数需要根数据库而定
},
success:res=>{ //接口调用成功后的回调函数
console.log(res.data)
this.setData({ //将获取到的数据放入data中
requestData:res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getList(1);
},
})