微信小程序，前端大夢想（五）
微信小程序之綜合應用-訪問網絡加載數據
移動端訪問網絡加載數據時必不可少的功能，本章將接入豆瓣電影API，以列表的形式展現數據，支持下拉刷新及點擊查看詳情。重點包括：
l 訪問網絡
l 跳轉畫面及傳參
l 下拉刷新的方法
一、 Wx.request(object)訪問網絡
l wx.request發起的是 HTTPS 請求，不支持http請求
object參數說明:
data 數據說明 最終發送給服務器的數據是 String 類型，如果傳入的 data 不是 String 類型，會被轉換成 String 。轉換規則如下：
- 對於 header[‘content-type‘] 為 ‘application/json‘ 的數據，會對數據進行 JSON 序列化
- 對於 header[‘content-type‘] 為 ‘application/x-www-form-urlencoded‘ 的數據，會將數據轉換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
示例代碼：
註意事項:
- content-type 默認為 ‘application/json‘
- 要註意 method 的 value 必須為大寫（例如：GET）；
- url 中不能有端口；
- request 的默認超時時間和最大超時時間都是 60s
- request 的最大並發數是 5
- 網絡請求的 referer 是不可以設置的，格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程序的 appid，{version} 為小程序的版本號，版本號為 0 表示為開發版。
二、 跳轉頁面,目前有5種方式
l wx.navigateTo(OBJECT)
保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
OBJECT 參數說明：
示例代碼：
l wx.redirectTo(OBJECT)
關閉當前頁面，跳轉到應用內的某個頁面。
OBJECT 參數說明：
l wx.reLaunch(OBJECT)
微信客戶端 6.5.6 版本開始支持
關閉所有頁面，打開到應用內的某個頁面。
OBJECT 參數說明：
l wx.switchTab(OBJECT)
跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
OBJECT 參數說明：
示例代碼：
三、 下拉刷新
App.json文件可以配置全局設置，其中window對象可以設置頁面對下拉刷新是否支持
頁面相關事件處理函數
- onPullDownRefresh: 下拉刷新
- 監聽用戶下拉刷新事件。
- 需要在config的window選項中開啟enablePullDownRefresh。
- 當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
- onReachBottom 滾動頁面到底部，加載新的內容(開發文檔中沒有提到)
了解了以上知識開始我們的案例吧，效果圖如下:
項目結構如下:
重點代碼如下:
App.json:
Playing.js代碼:
// pages/palying/palying.js
var functions = require(‘../functions.js‘)
var url = ‘https://api.douban.com/v2/movie/in_theaters‘
var pageSize = 5
Page({
data: {
films: [], //保存獲得的json數據
hasMore: true, //上拉加載更多提示標示
showLoading: true, //數據加載標示
start: 0 //初始加載條目
},
//頁面加載
onLoad: function () {
var that = this
functions.fetchFilms.call(that, url, ‘‘, 0, pageSize, function(data){
that.setData({
showLoading: false
})
})
},
//下拉刷新
onPullDownRefresh: function () {
var that = this
functions.fetchFilms.call(that, url, ‘‘, 0, pageSize, function(data){
that.setData({
showLoading: false
})
})
},
//上拉加載更多
onReachBottom:function(){
var that = this
functions.fetchFilms.call(that, url, ‘‘, that.data.start, pageSize, function(data){
})
},
//點擊進入詳細畫面事件
viewDetail: function(e){
var ds = e.currentTarget.dataset;
wx.navigateTo({
url: ‘../detail/detail?id=‘ + ds.id + ‘&title=‘ + ds.title + ‘&type=ing‘
})
}
})
//點擊進入詳細畫面事件
viewDetail: function(e){
var ds = e.currentTarget.dataset; //取出頁面參數
wx.navigateTo({ //跳轉頁面
url: ‘../detail/detail?id=‘ + ds.id + ‘&title=‘ + ds.title + ‘&type=ing‘
})
}
})
頁面參數如下:
豆瓣電影API說明：
https://developers.douban.com/wiki/?title=movie_v2#in_theaters
微信小程序，前端大夢想（五）