微信小程序开发初学：request网络请求及资讯类小案例

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);
    },
})