微信小程式request請求的詳細介紹

談談微信小程式的資料互動---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中文網其他相關文章！