小程序跳轉、請求、帶參數請求小例子

wx.request(OBJECT)

wx.request發起的是 HTTPS 請求。一個微信小程序,同時只能有5個網絡請求連接。
具體參數說明參看微信小程序官方文檔-發起請求
例:

//當頁面加載時,請求後臺數據,並賦值給前臺顯示
Page({
    data:{
        new_list:[]
    },
    onLoad:function(){
        var that = this;
        wx.request({
            url:'http://wxcms.com/getList',
            header:{
                'content-type':'application/json',
            },
            success:function(res)
            {
                //將請求的後臺數據賦值new_list
                that.setData({
                    new_list:res.data,
                })
            }
        })
    }
})

wx.navigateTo(OBJECT)

保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
具體參數說明參看微信小程序官方文檔-跳轉

例:
wxml代碼:

<view class="lists">
    <view class="img">
     <!---這裏綁定了一個手指觸摸後馬上離開的時間,跳轉時並帶上了id參數-->
        <image src="{{img}}" bindtap="detial" data-id="{{id}}"></image>
    </view>
    <view class="info">
        <view class="title">{{title}}</view>
        <view class="time">{{time}}</view>
    </view>
</view>

js代碼:

Page({
    data:{
        new_list:[]
    },
    detial:function(event){
        //帶id跳轉到指定的頁面,這裏的event.target.dataset.id是獲取wxml頁面上的data-id參數,詳見事件說明
        wx.navigateTo({
            url:"../../pages/detail/detail?id="+event.target.dataset.id
        })
    }
 })

帶參數的wx.request(OBJECT)

上述代碼跳轉到指定頁面後:

Page({
    data:{
        info:{}
    },
    //res對象包含了跳轉頁面中的id參數,再頁面加載時,獲取id參數然後向後臺請求參數,並賦值
    onLoad:function(res)
    {   
        var that = this;
        wx.request({
            url:"http://wxcms.com/getOne",
            //這裏是 
            data:{
                id:res.id,
            },
            header:{
                'content-type':'application/json'
            },
            success:function(msg)
            {
                that.setData({
                    info:msg.data,
                })
            }
        })
    }
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章