作者:木子林,來自公眾號:快樂的小碼農(nóng)
最近一段時間微信小程序向個人開發(fā)者開放了申請,于是自己開始學(xué)習(xí)如何開發(fā)小程序,由于對后臺開發(fā)不熟悉,所以自己碰到了許多坑。
自己碰到的第一個坑就是如何實(shí)現(xiàn)與小程序的后臺通信,根據(jù)微信小程序官方文檔的說法,網(wǎng)絡(luò)通信需要通過wx.request發(fā)起網(wǎng)絡(luò)請求,官方文檔的寫法是:
-
wx.request({
-
url: 'test.php', //僅為示例,并非真實(shí)的接口地址
-
data: {
-
x: '' ,
-
y: ''
-
},
-
header: {
-
'content-type': 'application/json'
-
},
-
success: function(res) {
-
console.log(res.data)
-
}
-
})
但是在實(shí)際的操作中是url微信要求必須是https協(xié)議的。
下面我以一個例子來完成微信小程序從后臺請求數(shù)據(jù):
-
打開微信官方小程序開發(fā)IDE,在app.json文件中新建一個頁面
-
{
-
"pages":[
-
"pages/index/index",
-
"pages/todos/todos"//在這里新建一個頁面
-
-
],
-
"window":{
-
"backgroundTextStyle":"light",
-
"navigationBarBackgroundColor": "#fff",
-
"navigationBarTitleText": "WeChat",
-
"navigationBarTextStyle":"black"
-
}
-
}
2.加上上面的一段代碼保存后我們就可以看到在pages文件夾下多了一個頁面
然后在todos.js中進(jìn)行數(shù)據(jù)請求,請求代碼如下:
-
Page({
-
onLoad: function () {
-
var that = this;
-
wx.request({
-
url: 'https://www.***.***/index.php',//此處填寫你后臺請求地址
-
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
-
// header: {}, // 設(shè)置請求的 header
-
success: function (res) {
-
// success
-
console.log(res.data);//在控制臺輸出在遠(yuǎn)程后臺請求到的數(shù)據(jù)
-
},
-
fail: function (res) {
-
// fail
-
},
-
complete: function (res) {
-
// complete
-
}
-
})
-
}
-
})
3.第三步就是編寫后臺響應(yīng)程序來響應(yīng)微信小程序的前臺請求,我的后臺使用php寫的,后臺響應(yīng)的文件index.php如下:
-
<?php
-
$data = array(
-
'tid' => 100,
-
'name' => 'IT學(xué)習(xí)筆記',
-
'site' => 'www.icvo.net');
-
-
$response = array(
-
'code' => 200,
-
'message' => 'success for request',
-
'data' => $data,
-
);
-
-
echo json_encode($response);//生成json文件
-
?>
4.這時候,我們就可以在控制臺看到我們請求的json數(shù)據(jù)了
這樣,一次成功的微信小程序從后臺請求數(shù)據(jù)就成功了。
|