2018/5/26
1.知识了解
微信小程序自带了四种不同的请求方式
wx.request wx.uploadFile wx.downloadFile WebSocket
这里仅使用 request
wx.request 中包含了和普通 request 一样的可选择参数
url method：基础
data： 可以放入数据
header： 可以放入请求格式 比如 'Content-Type': 'application/json'
值得注意的是，wx.request 是一个异步操作。其拥有三个回调函数
success(res){} 这个函数会不论 statuscode 返回全部的服务器返回的值。
fail(){} 这个函数对访问失败后的情况作处理
complete(){} 这个函数对访问结束后的情况做处理
微信小程序访问 url 需要在 微信公众平台处进行登记。在调试过程中，也可以选择先忽略（最后一个）。
2.编写请求
继上一课。这次选择只传递 id ，让 detail 页面自行向服务器作请求获取数据
1）请求编写 serverUrl 在外侧已经定义。替换成你对应的服务器地址即可
wx.request({
url: serverUrl+id,
headers: {
'Content-Type': 'application/json'
},
success(res){
console.log(res)
that.setData({
id: id,
list: res.data.data
})
},
fail(){
},
complete(){
},
})
这样就能在终端输出相应的 json 数据
注意：上面代码定义了 that 的原因是因为 js 里面的 this 指定的是当前对象
4. 动态设置导航栏 loading 状态
因为响应不可能直接完成，所以需要 loading 来让用户明白进程位置
微信提供了以下方法 （还有另外一个 showLoading 方法）
wx:wx.showNavigationBarLoading()
wx:wx.hideNavigationBarLoading()
wx:wx.setNavigationBatTitle()
由于 wx.request 请求是异步的，所以我们应该把 show 写在 wx.request 后，把 hide 写在 success 回调函数 setData后
全部代码如下：
wx.request({
url: serverUrl+id,
headers: {
'Content-Type': 'application/json'
},
success(res){
console.log(res)
that.setData({
id: id,
list: res.data.data
})
wx:wx.hideNavigationBarLoading()
},
fail(){
},
complete(){
},
})
wx:wx.showNavigationBarLoading()
默认的 navigationTitle 可以在 json 中设置
.data.data 第一和第二个获取的值不一样。但一般来讲都是两次才能获取到正确值。