談談微信小程式的資料互動---wx.request
官方文件中明確說明，wx.request發起的是https的請求，如果你的伺服器是http站點，那需要做配置。可以參考文章：http轉https教學
但如果你沒有服務端或不想寫後台程式碼，這裡是可以呼叫我提供的接口，本文會介紹使用方法。
首先，我們應該從服務端開始準備，我用的是java。框架是spring+springMVC+spring data 。
介面https://www.itit123.cn/itdragon/findAll 的controller層
原始碼：
@RequestMapping(value="findAll")
@ResponseBody
public Object listWxDatas(@RequestParam(value = "page", defaultValue = "1") int pageNumber,
@RequestParam(value = "pageSize", defaultValue = PAGE_SIZE) int pageSize,
@RequestParam(value = "sortType", defaultValue = "auto") String sortType,
ServletRequest request){
pageSize = pageSize > 10? 10 : pageSize;
try {
Map<string> searchParams = Servlets.getParametersStartingWith(request, "search_");
Page<wxdata> WxDatas = wxDataService.getWxData(searchParams, pageNumber, pageSize, sortType);
List<map>> resultList = new ArrayList<map>>();
for (WxData WxData : WxDatas) {
Map<string> resultMap = new HashMap<string>();
resultMap.put("id", WxData.getId());
resultMap.put("title", WxData.getTitle());
resultMap.put("content", WxData.getContent());
resultMap.put("src", WxData.getImageUrl());
resultMap.put("time", WxData.getCreatedDate());
resultList.add(resultMap);
}
return gson.toJson(resultList);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}</string></string></map></map></wxdata></string>登入後複製
程式碼大致邏輯是一次最多查10個數據，並以id降序排序輸出結果。程式碼並沒有把整個物件放在一個集合中，而是把需要的內容（id，文章標題，預讀內容，主圖，創建時間）放在一個map，在放到集合轉成json格式回傳資料。 （註：程式碼只針對現在的需求（查詢資料），後續做下拉刷新，上拉加載，搜尋排序時，可能會修改程式碼 。分頁查詢：微信小程式入門五上滑載入下拉刷新）。
服務端介面程式碼準備好後，不能急著上線測試，可以用google瀏覽器的 postman。
查看列印結果，以確保成功
#然後開始在微信小程式端，準備一個測試頁面來進行數據互動。
test.wxml：
<view>
<textarea></textarea>
</view>
<button>request</button>
登入後複製
test.js：
Page({
data: {
textdata: "测试 wx.request",
},
RequestData: function () {
var that = this;
wx.request({
url: 'https://www.itit123.cn/itdragon/findAll',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header 默认是application/json
success: function (res) {
// 操作json数据
var text ="";
for(var i in res.data) {
text += i + "." + res.data[i].title + "\r\n";
}
that.setData({ textdata: text});
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})登入後複製
測試頁面的效果圖：
測試沒有問題，那就在list.js中修改程式碼。
可以依照自己的需求修改。 （我只是將func改成了ajax）
// pages/list/list.js
var app = getApp();
Page({
data:{
msgList:[]
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var that = this
app.ajax.req('/itdragon/findAll',{},function(res){
that.setData({
msgList:res
})
});
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})登入後複製
因為傳回的資料結構，剛好是我需要的格式，所以直接賦值了。
效果圖：
這章學習要點：
1.wx.request 的使用 微信官方文件 。
2.如何為變數賦值 var that = this; that.setData({變數名稱：變數值})。
3.開發的思路。
以上是微信小程式request請求的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
