作者：微信公眾號網(wǎng)時間：2017-03-15
在一個網(wǎng)站里面發(fā)起https請求是很常見的，但是，由于微信小程序是騰訊內(nèi)部的產(chǎn)品，不能直接打開一個外部的鏈接，例如，您在微信小程序里面無法直接打開www.phpos.net網(wǎng)站，但是，在做小程序開發(fā)的時候，如果想調(diào)用這個網(wǎng)站的一個接口，這時，如何使用？因為，微信小程序里面不能直接使用瀏覽器，所以，只有使用騰訊給我們封裝好的API wx.request(object)。
wx.request其實是騰訊封裝好的一個request請求的函數(shù)，類似php語言里面的函數(shù)，在php程序里面的函數(shù)是由開發(fā)php程序的公司用c語言封裝好的一個一個的函數(shù)，我們做php開發(fā)的，只需要拿過來這些函數(shù)使用即可，不需要關心函數(shù)底層代碼，同樣，wx.request是騰訊給我們封裝好的“函數(shù)”直接拿過來用就行了，只要理解了這個“函數(shù)”里面的參數(shù)的使用即可。
下面我們將結合一個實例來詳細分析wx.request的參數(shù)的含義以及使用，最后，我們將分別用兩個實例來實踐使用一下這個函數(shù)。
參數(shù)： 1）接口地址url： 微信小程序里面的數(shù)據(jù)就是由這個url來獲取的，所以，這個url接口非常重要，一般這個接口url返回的是json數(shù)據(jù)格式，這樣不僅處理起來方便，而且，傳輸安全穩(wěn)定，容易保存。所以，一般的第三方提供的接口返回的數(shù)據(jù)都是以json格式形式返回的。
小程序手冊上說url是開發(fā)者服務器的接口，其含義是開發(fā)者自己的服務器和調(diào)用第三方的服務器上面上的接口url。
也就是說url接口地址有兩大來源分別是：開發(fā)者自己的服務器上面的接口和第三方服務器提供我們使用的接口。
可能會有問為什么會有這兩個來源呢？ 例如，您要開發(fā)一個快遞查詢小程序，這時一般都會調(diào)用第三方提供的快遞接口，因為，我們不可能為了開發(fā)一個小程序而去開發(fā)一套快遞系統(tǒng)，并添加上快遞數(shù)據(jù)，但是，我們又不是做快遞公司的，所以，無法實時動態(tài)的獲取用戶的數(shù)據(jù)信息，這些信息都掌握在好些快遞公司里面，所以，要獲取這樣的大數(shù)據(jù)，我們只能使用這些快遞公司提供的接口，來獲取快遞的數(shù)據(jù)。
如果對于一些小數(shù)據(jù)，例如，查詢唐詩宋詞，我們完全可以自己創(chuàng)建一個網(wǎng)站，然后，自己開發(fā)一個接口url自己進行調(diào)用，因為，這些數(shù)據(jù)網(wǎng)上多的是，可以自己采集到網(wǎng)站，當然，如果您的流量獲取不是從百度等搜索引擎而來的話，可以采集數(shù)據(jù)放到自己網(wǎng)站上面，然后，寫一個接口在小程序里面使用。
上面介紹的是url兩種接口，我們舉例子也是以這兩種接口來舉例子。
2）請求參數(shù)data： 當我們對url進行https請求時，實際上跟在瀏覽器打開一個網(wǎng)址是一個道理，在瀏覽器打開網(wǎng)址http://www.phpos.net/index.php?id=9（此url為模擬用的），實際上是向這個域包所在的服務器發(fā)送了一個https請求，在這個請求里面使用了參數(shù)id=9，也就是請id為9的內(nèi)容，這里的id=9就是這個url請求時的參數(shù)。
data值就是使用wx.request時，url里面的參數(shù)，也就是問號后面的參數(shù)。
格式： url:'http://www.phpos.net/index.php',
data: {
id: '2' ,
name: 'lili'
} |
上面等價于：url:'http://www.phpos.net/index.php?id=2&name=lili', |
data 數(shù)據(jù)說明：最終發(fā)送給服務器的數(shù)據(jù)是 String 類型，如果傳入的 data 不是 String 類型，會被轉換成 String 。轉換規(guī)則如下：
對于 header['content-type'] 為 'application/json' 的數(shù)據(jù)，會對數(shù)據(jù)進行 JSON 序列化
對于 header['content-type'] 為 'application/x-www-form-urlencoded' 的數(shù)據(jù)，會將數(shù)據(jù)轉換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
3) 請求的 header: https請求的頭部header是在用戶打開小程序，然后，請求url時一起傳到url所在的服務器時的頭部信息，如果學過http協(xié)議的話，這個就好理解了。
例如，我在火狐上面打開www.phpos.net,就相當于對這個網(wǎng)址所在的服務器作了https請求，在請求這個網(wǎng)址所在的服務器時，會通過http協(xié)議把頭部信息一起傳遞到這個網(wǎng)址所在的服務器，如下圖所示：
請求頭包括host、User-Agent、Accept、Accpt-Language、Referer等，請注意這些頭部信息與您請求某個網(wǎng)址是不盡相同是有差別的。
在使用wx.request時，我們就可以使用header來添加請求頭部信息，把請求頭信息一起傳遞給服務器（例如，請求www.phpos.net時，就會把這個請求頭發(fā)送給這網(wǎng)站所在的網(wǎng)址）。
也就是說我們請求一個網(wǎng)址，實際上一起跟著這個網(wǎng)址傳遞到服務器的還有“請求頭”，只是我們看不到罷了，但是，實際上是發(fā)生了，如上圖所示。
當請求完信息后，服務器再通過http協(xié)議把請求的信息返回給請求的用戶（也就是打開網(wǎng)址的用戶），此時，有一個“響應頭”返回給用戶，只是用戶感覺不到看不到罷了。
從上面可以知道請求頭和響應頭是用戶在打開一個url時，相當于向url所在的服務器發(fā)送了帶有“請求頭”的請求，等服務器處理完數(shù)據(jù)（例如，查詢數(shù)據(jù)庫數(shù)據(jù)）后，就會通過一個“響應頭”把一些重要信息返回給用戶，當然，用戶不知道這些信息，也看不到。
請求的 header格式： header: {
'content-type': 'application/json'
}, |
請注意：小程序規(guī)定header中不能設置 Referer，因為，這個請求頭的參數(shù)表示網(wǎng)址從哪里來，而在小程序里面并沒有哪個網(wǎng)址從哪里來，只有一個接口url，所以，這個請求頭的參數(shù)實際上沒有什么用處，您寫上也不會起作用。
4）函數(shù)success： 當一個https請求成功時，小程序就會自動觸發(fā)這個返回成功信息的函數(shù)，這個函數(shù)是騰訊自己封裝好的，而不是我們自己去寫的。
這個函數(shù)獲取的是從開發(fā)者服務器返回的數(shù)據(jù)（一般為json格式），因為，獲取到的數(shù)據(jù)就是我們要渲染到小程序頁面的數(shù)據(jù)，所以，這個非常重要，下面舉例來說明獲取到的“數(shù)據(jù)”。
示例： //request.wxml
<view class="btn-area">
<button bindtap="makeRequest" type="primary" disabled="{{buttonDisabled}}" loading="{{loading}}">request</button>
</view>
</view> |
//request.js
Page({
makeRequest: function() {
var self = this
wx.request({
url:'https://www.v2ex.com/api/topics/show.json?id=520',
data: {
noncestr: Date.now()
},
success: function(result) {
console.log('request success', result)
}
})
}
}) |
上面我們使用url接口是：https://www.v2ex.com/api/topics/show.json?id=520
這個url接口可以返回json格式的數(shù)據(jù)，您可以直接在瀏覽器上面打開看一下，結果如下所示：
請求成功后獲取到的數(shù)據(jù)就是success函數(shù)的參數(shù)result,打印這個數(shù)據(jù)如果如下所示：
從上圖可以知道，result是一個對象，在這個對象里面有一個data數(shù)組，在這個數(shù)組里面下標為0的元素是一個對象，在這個對象里面是從接口獲取到的數(shù)據(jù)。
所以，通過result.data[0]就可以獲取從接口url獲取到的數(shù)據(jù)了，這些數(shù)據(jù)您可以使用函數(shù)setData({...})來動態(tài)添加到小程序視圖層。
5）其它兩個函數(shù)fail和complete： fail函數(shù)：如果接口調(diào)用失敗的話，那么，小程序就會觸發(fā)這個函數(shù)，返回錯誤信息。
complete函數(shù)：接口調(diào)用結束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）
使用第三方接口url示例：//request.wxml
<view class="page-body">
<view class="page-body-wording">
<text class="page-body-text">
點擊向服務器發(fā)起請求
</text>
</view>
<view class="btn-area">
<button bindtap="makeRequest" type="primary" disabled="{{buttonDisabled}}" loading="{{loading}}">request</button>
</view>
</view> |
//request.js
Page({
makeRequest: function() {
var self = this
self.setData({
loading: true
})
wx.request({
// url: requestUrl,
url:'https://www.v2ex.com/api/topics/show.json?id=520',
data: {
noncestr: Date.now()
},
success: function(result) {
wx.showToast({
title: '請求成功',
icon: 'success',
mask: true,
duration: duration
})
self.setData({
loading:false
})
console.log('request success', result)
},
fail: function({errMsg}) {
console.log('request fail', errMsg)
self.setData({
loading: false
})
}
})
}
}) |
開發(fā)自己的接口url
有時候我們需要自己開發(fā)一個接口，來調(diào)用我們自己的服務器上面的數(shù)據(jù)，例如，一個企業(yè)的數(shù)據(jù)，一般來說第三方不會開發(fā)這樣的數(shù)據(jù)，所以，此時，企業(yè)就應當開發(fā)自己的接口，而且，開發(fā)自己的接口比使用第三方接口的例子要多很多。
下面將開發(fā)一個我們自己的接口，調(diào)取的數(shù)據(jù)是從安裝在本地的織夢系統(tǒng)搭建的網(wǎng)站里面獲取的數(shù)據(jù)。
我們的目標是獲取網(wǎng)站里面的內(nèi)容的id和標題，然后，把id和id對應的標題顯示在小程序里面，這其實是一個簡單的小程序開發(fā)，我們在小程序里面看到的數(shù)據(jù)(圖片，文字，音頻等）都是通過這樣獲取的。
接口url的php文件代碼：
//phpos.php
<?php
require('./dedecms/include/common.inc.php');
$db->Execute('al','SELECT id ,title FROM `dede_archives` order by id desc limit 0,10');
while ($row=$db->GetArray('al')) {
$arr[]=$row;
}
echo json_encode($arr);
?> |
上面是獲取最新10條更新的數(shù)據(jù)接口url，返回的數(shù)據(jù)是json格式，如下所示：
[{"id":"107","title":"PHP\u6b63\u5219\u8868\u8fbe\u5f0f\u7684\u51e0\u5219\u4f7f\u7528\u6280\u5de7"},
{"id":"106","title":"{dede:\u62db\u8058\u542f\u4e8b \u6807\u9898='\u7ec7\u68a6\u5927\u5bb6\u5ead\u65b0\u5e74\u62db\u52df\u7b2c\u4e00\u6ce2'}"},
{"id":"98","title":"DedeCMS\u4ea7\u54c1\u6388\u6743\u5728\u7ebf\u8d2d\u4e70"},
{"id":"97","title":"DedeCMS \u6700\u7ec8\u7528\u6237\u6388\u6743\u534f\u8bae"},
{"id":"96","title":"\u6211\u7684\u773c\u754c-\u4e00\u4e9b\u5173\u4e8e\u82b1\u7684\u7167\u7247"},
{"id":"95","title":"\u539f\u521b\u98ce\u666f\u56fe\u7247"},
{"id":"94","title":"\u6b66\u5937\u5c71\u7684\u7f8e\u666f\u771f\u662f\u4e0d\u9519"},
{"id":"93","title":"\u6d77\u5c9b\u98ce\u5149"},
{"id":"92","title":"DedeCMS V5.6 \u5f00\u53d1\u65e5\u5fd7\u53ca\u65b0\u5efa\u8bae\u63d0\u4ea4\u8d34"},
{"id":"91","title":"DedeCMS\u4ea7\u54c1\u76f8\u5173\u622a\u56fe"}] |
這樣在小程序里面成功調(diào)用接口url文件phpos.php后，在函數(shù)success里面獲取到的數(shù)據(jù)就是上面的最新10條數(shù)據(jù)，如下所示：
小程序里面的.wxml和.js代碼分別是：
//index.wxml
<view class="container">
<block wx:for="{{contents}}">
<view>
<text>{{item.id}}---{{item.title}}</text>
</view>
</block>
</view> |
//index.js
var app = getApp()
Page({
data: {
contents:{}
},
onLoad: function (option) {
var self = this
wx.request({
url: 'http://localhost/phpos.php',
data: {},
method: 'GET',
success: function(res){
// success
self.setData({
contents:res.data
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
}) |
結果：
上面結果表示：我們成功從我們自己網(wǎng)站里面獲取數(shù)據(jù)并顯示在小程序里面了，雖然，顯示的結果的排版不美觀，但是，我們主要實現(xiàn)的是這個功能至于排版，只需要寫上wxss就可以了，這里就不寫樣式代碼了。
