Runlin微信小程序系列教程一：從零開始寫一個demo《下》
上一節(jié)實現(xiàn)了循環(huán)列表數(shù)據(jù)渲染到視圖，并給列表每一項添加了路由導(dǎo)航到新頁面查看更多細(xì)節(jié)，但是目前我們的數(shù)據(jù)都是虛擬的，現(xiàn)在我們就開始利用微信的request請求來接收豆瓣電影接口提供的數(shù)據(jù)。API: wx.request(OBJ ...
上一節(jié)實現(xiàn)了循環(huán)列表數(shù)據(jù)渲染到視圖，并給列表每一項添加了路由導(dǎo)航到新頁面查看更多細(xì)節(jié)，但是目前我們的數(shù)據(jù)都是虛擬的，現(xiàn)在我們就開始利用微信的request請求來接收豆瓣電影接口提供的數(shù)據(jù)。
API: wx.request(OBJECT)
參數(shù)有7個，這里主要講一下幾個重要的：
- url : 請求的地址
- data: 攜帶的數(shù)據(jù)
- method : 請求方式，默認(rèn)為get
- success: 請求成功的回調(diào)函數(shù)
了解了網(wǎng)路請求的方法后，我們就不需要我們原來模擬的那些數(shù)據(jù)了，把所有的假數(shù)據(jù)統(tǒng)統(tǒng)干掉，留一個空的數(shù)據(jù)用來放數(shù)據(jù)即可。
現(xiàn)在頁面進(jìn)來的時候只展示了一個標(biāo)題，因為數(shù)據(jù)為空了循環(huán)不出來了，現(xiàn)在需要我們在頁面進(jìn)來的時候發(fā)送一個請求來接受數(shù)據(jù)。
豆瓣提供的API：[Title]https://developers.douban.com/wiki/?title=movie_v2#search
具體參數(shù)和接口請自行查閱，使用方法：https://api.douban.com + 對應(yīng)的接口 + 參數(shù)(如果需要的話)
例子：https://api.douban.com/v2/movie/top250
我們以請求 排行250 這個接口為例：
onLoad: function() {var url=https://api.douban.com/v2/movie/top250;var that = this;//確?；卣{(diào)函數(shù)this的指向正確,后面會以es6的箭頭函數(shù)代替wx.request({url：url, //KEY和KEY值相同可簡寫為urldata: {}, //不要求數(shù)據(jù)header: { 'Content-Type': 'application/json' },//成功時的回調(diào)，res為返回值，需要儲存到我們的data數(shù)據(jù)里面success: function(res) {that.setData({moivelist: res.data.subjects,loading: true})}})}
寫完后，頁面進(jìn)來的時候就會發(fā)送請求，并將數(shù)據(jù)保存到moiveList,并通過循環(huán)把數(shù)據(jù)展示出來，但是如果網(wǎng)絡(luò)差的話，會有一段真空期是沒有數(shù)據(jù)的，我們需要給用戶一個提示。
給頁面添加一個loading
<loading hidden="{{loading}}">加載中....</loading>
###這樣我們這個頁面就做好了，另一個頁面同理，改變一下接口就行了，我們主要看一下detail這個文件。
###我們現(xiàn)在可以實現(xiàn)網(wǎng)絡(luò)請求了，在之前我們detail的數(shù)據(jù)都是外面從列表傳過來的，我們是這么寫的。
我靠這么長一段代碼，真的需要嗎？我們現(xiàn)在就可以簡寫了，我們只需要傳一個參數(shù)就可以了。
把template模板里面wxml里面上述代碼改成下面的
我們只需要一個這個電影的ID就行了，我們可以根據(jù)這個ID自己請求數(shù)據(jù)
onLoad: function(options) {var that = this;var address = 'https://api.douban.com/v2/movie/subject/';wx.request({url: address + options.id,data: {},header: { 'Content-Type': 'application/json' },success: function(res) {that.setData({item: res.data,loading: true})}})}
這樣就完成了，現(xiàn)在我們在tabBar新增一個搜索頁面。記住新頁面都要添加到app.json中，這里就不再闡述了，頁面大概這個樣子
<import src="../temple/temple.wxml"></import>
<loading hidden="{{loading}}">
加載中....
</loading>
<view class="searchWrap">
<view class="inputWrap">
<icon type="search" size="20"/>
<input placeholder="請輸入搜索內(nèi)容" value="{{content}}" type="text" placeholder-style="custom-placeholder-style" placeholder-class="custom-placeholder-class" bindinput="inputing" bindblur="quick"/>
</view>
<view class="cancel" bindtap="searching">{{cancel}}</view>
</view>
<scroll-view class="main" scroll-y="true" bindscrolltoupper="" bindscrolltolower="" bindscroll="" scroll-into-view="" scroll-top="">
<block wx:for="{{moivelist}}">
<template is="try" data="{{item}}"></template>
</block>
</scroll-view>
下面的列表跟前面一樣，就多個了Input和按鈕而已，同樣的wxss樣式我們就不管了，只看js。
主要代碼如下：
data: {moivelist: [],loading: true,cancel: "取消",search: ""},inputing: function(event) {if (event.detail.value) {this.setData({cancel: "搜索"})} else {this.setData({cancel: "取消"})}},//失去焦點(diǎn)事件quick: function(event) {if (!event.detail.value) {this.setData({cancel: "取消"})} else {this.setData({search: event.detail.value})}},//點(diǎn)擊搜索事件searching: function() {if (this.data.cancel === "取消") {wx.hideKeyboard()} else {this.setData({loading: false})wx.request({url: url + this.data.search,data: {},header: { 'Content-Type': 'application/json' },success: function(res) {that.setData({moivelist: res.data.subjects,loading: true})}})}}
看起來寫了很多，其實就2件事：
* 判斷Input的值，如果為空，則讓按鈕的值為“取消”；不為空則為“搜索”。
* 根據(jù)按鈕的值綁定點(diǎn)擊事件，為取消則讓鍵盤下去(手機(jī)才行）為“搜索”則發(fā)送網(wǎng)絡(luò)請求，并將接收的數(shù)據(jù)保存以便循環(huán)展示出來。
到此，幾個文件就都寫好了，現(xiàn)在來對代碼優(yōu)化一下。
1. wxml：我們已經(jīng)創(chuàng)建了一個通用的模板了，好像沒得優(yōu)化了。
2. css : 可以發(fā)現(xiàn)我們幾個列表都用了一個模板，因此對應(yīng)的CSS代碼也是一樣的，我們可以把這部分CSS代碼放到app.wxss公共樣式里面，其他頁面對應(yīng)的WXSS那部分都可以刪除了。
3. js:wx.request時用到了基本相同的東西，可以放到一個單獨(dú)的js里面。
創(chuàng)建一個util文件夾，在里面創(chuàng)建一個util.js文件，用來放我們的方法。
function getData(address,datas,cb){
wx.request({
url: address,
data:datas,
header: { 'Content-Type': 'application/json' },
success: cb
})
}
module.exports = {
getData: getData
}
我們定義了一個方法，并通過module.exports將他導(dǎo)出，其他頁面需要使用方法時，需要先導(dǎo)入
var util = require("../../utils/utils.js")
使用時：util.getData(參數(shù)1，參數(shù)2，參數(shù)3)
如：
onLoad: function() {util.getData(url,{},(res)=>{this.setData({moivelist: res.data.subjects,loading: true})})}
到此我們整個APP就算基本完成了，后續(xù)如果還有補(bǔ)充則再繼續(xù)添加。
代碼參見demo4 ， 網(wǎng)址為：https://github.com/linrunzheng/wx-samll-demo
