首頁 > 官网开云 > 小程序常見問題

Runlin微信小程序係列教程一：從零開始寫一個demo《下》

時間：2016-10-16 19:14:00

上一節實現了循環列表數據渲染到視圖，並給列表每一項添加了路由導航到新頁麵查看更多細節，但是目前我們的數據都是虛擬的，現在我們就開始利用微信的request請求來接收豆瓣電影接口提供的數據。

API: wx.request(OBJECT)

參數有7個(ge) ，這裏主要講一下幾個(ge) 重要的：

url : 請求的地址
data: 攜帶的數據
method : 請求方式，默認為get
success: 請求成功的回調函數

了解了網路請求的方法後，我們就不需要我們原來模擬的那些數據了，把所有的假數據統統幹掉，留一個空的數據用來放數據即可。

data:{

moivelist:[],

loading:false

}

現在頁麵進來的時候隻展示了一個標題，因為數據為空了循環不出來了，現在需要我們在頁麵進來的時候發送一個請求來接受數據。

豆瓣提供的API：[Title]https://developers.douban.com/wiki/?title=movie_v2#search

具體參數和接口請自行查閱，使用方法：https://api.douban.com + 對應的接口 + 參數(如果需要的話)

例子：https://api.douban.com/v2/movie/top250

我們以請求排行250 這個接口為例：

onLoad: function() {
var url=https://api.douban.com/v2/movie/top250;
var that = this;//確保回調函數this的指向正確,後麵會以es6的箭頭函數代替

wx.request({
url：url, //KEY和KEY值相同可簡寫為url
data: {}, //不要求數據
header: { 'Content-Type': 'application/json' },
//成功時的回調，res為返回值，需要儲存到我們的data數據裏麵
success: function(res) {
that.setData({
moivelist: res.data.subjects,
loading: true
})
}
})
}

寫完後，頁麵進來的時候就會發送請求，並將數據保存到moiveList,並通過循環把數據展示出來，但是如果網絡差的話，會有一段真空期是沒有數據的，我們需要給用戶一個提示。

給頁麵添加一個loading

<loading hidden="{{loading}}">
加載中....
</loading>

我們讓這個loading一開始就是顯示的，當數據加載成功後，才讓他消失。我們通過將hidden綁定到{{loading}}上，更改{{loading}}的布爾值來實現這個效果。一開始{{loading}}的值是false的，也就是不隱藏；success後將他設置為true，從而實現這個效果。
這樣我們這個頁麵就做好了，另一個頁麵同理，改變一下接口就行了，我們主要看一下detail這個文件。
我們現在可以實現網絡請求了，在之前我們detail的數據都是外麵從列表傳過來的，我們是這麽寫的。

我靠這麽長一段代碼，真的需要嗎？我們現在就可以簡寫了，我們隻需要傳一個參數就可以了。

把template模板裏麵wxml裏麵上述代碼改成下麵的

我們隻需要一個這個電影的ID就行了，我們可以根據這個ID自己請求數據

//在detail.js的Onload函數中獲取到頁麵傳過來的ID

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

這樣就完成了，現在我們在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="請輸入搜索內(nei) 容" 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: "取消"
})
}
},
//失去焦點事件
quick: function(event) {
if (!event.detail.value) {
this.setData({
cancel: "取消"
})
} else {
this.setData({
search: event.detail.value
})
}
},
//點擊搜索事件
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的值，如果為空，則讓按鈕的值為“取消”；不為空則為“搜索”。

* 根據按鈕的值綁定點擊事件，為取消則讓鍵盤下去(手機才行）為“搜索”則發送網絡請求，並將接收的數據保存以便循環展示出來。

到此，幾個文件就都寫好了，現在來對代碼優化一下。

1. wxml：我們已經創建了一個通用的模板了，好像沒得優化了。

2. css : 可以發現我們幾個列表都用了一個模板，因此對應的CSS代碼也是一樣的，我們可以把這部分CSS代碼放到app.wxss公共樣式裏麵，其他頁麵對應的WXSS那部分都可以刪除了。

3. js:wx.request時用到了基本相同的東西，可以放到一個單獨的js裏麵。

創建一個(ge) util文件夾，在裏麵創建一個(ge) util.js文件，用來放我們(men) 的方法。

function getData(address,datas,cb){
wx.request({
url: address,
data:datas,
header: { 'Content-Type': 'application/json' },
success: cb
})
}

module.exports = {
getData: getData
}