(>>>>在公衆號中輸入彩蛋號，即可獲取測試源碼與視頻講解的下載地址)
一、實驗目的
以訂餐爲例，小程序實現：1）用戶訂餐；2）得到並返回用戶數據；3）提示訂餐結果。
二、實驗內容
1、用戶訂餐。
2、得到並返回用戶數據。
3、提示訂餐結果。
4、界面顯示。
三、小程序端與服務器端源代碼分析
1、小程序——用戶訂餐、提示訂餐結果
formSubmit: function (e) {
var a = Number(e.detail.value.input)//標的,強轉爲數值
var index1 =Number(e.detail.value.foodCategory)
var index2 = Number(e.detail.value.orderNum)
var d =this.data.array[index1];
var f =this.data.array1[index2];//e.detail.value.orderNum
wx.showModal({
title: '這是您的訂餐信息',
content: '' + d +':' + f+'份',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定');
util.showBusy('請求中...')
var that =this
qcloud.request({
url: `${config.service.host}/weapp/demo`,
login: true,
success(result) {
util.showSuccess('請求成功完成')
console.log(result.data.data.msg);
wx.showToast({
//title:JSON.stringify(result.data.data.msg),
title: JSON.stringify('訂餐登記成功，請等待消息！'),
icon: 'success',
duration:2000
});
},
fail(error) {
util.showModel('請求失敗', error);
console.log('request fail', error);
}
})
}
}
})
}
2、服務器端——得到並返回用戶數據
publicfunction index() {
//得到用戶信息，並返回用戶信息
$result = LoginService::check();
$res ='';
if ($result['loginState'] === Constants::S_AUTH) {
$this->json([
'code' =>0,
'data' => [
'msg' => $result['userinfo']
]
]);
} else {
$this->json([
'code' => -1,
'data' => [
'msg' => $res
]
]);
}
}
四、實驗總結與經驗
1、遇到的問題
在開發過程中，如果發現登錄失敗，其中的一個原因可能是開發環境被暫停，我們可以通過以下方法回覆：
1） 再次上傳代碼：可以激活服務器；
2） 重啓開發工具；
3） 如果仍然不能登錄，檢查數據庫是否恢復了初始狀態，如果是的，則檢查程序是否調用了自己添加的數據表，即添加表。
2、總結
本次實驗取得了以下功能：
1） 實現了小程序端的界面，用戶可以通過小程序與服務器交互；
2） 服務器端取得了用戶信息，向小程序回發消息；
3） 小程序接收服務器回覆的信息，並通過wx.showToast()向用戶提示信息。
五、源代碼下載及視頻解析
在“豆豆諮詢”公衆號裏，輸入彩蛋號即可獲得下載地址：
1、 源代碼下載的彩蛋號（免費）：6004；
2、 視頻講解下載的彩蛋號（免費）：6005；
六、技術服務
如果有疑問或者需要幫助，請加入QQ羣（羣名稱：豆豆諮詢，羣號：625686304）；或者公衆號douAsk，公衆號名稱爲“豆豆諮詢”。掃描以下二維碼，關注“豆豆諮詢”。
技術QQ羣名稱：豆豆諮詢，
羣號：625686304
VIP羣號：621402447
微信公衆號名稱：豆豆諮詢，微信公衆號：douAsk
如果覺得有幫助，請動動手指，分享該文章！