上一章介紹了微信小程式的UI框架 weui-wxss 這章就談談微信小程式的資料互動---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, Object> searchParams = Servlets.getParametersStartingWith(request, "search_");
			Page<WxData> WxDatas = wxDataService.getWxData(searchParams, pageNumber, pageSize, sortType);
			List<Map<String, Object>> resultList = new ArrayList<Map<String,Object>>();
			for (WxData WxData : WxDatas) {
				Map<String, Object> resultMap = new HashMap<String, Object>();
				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;
	}
 

程式碼大致邏輯是一次最多查10條資料，並以id降序排序輸出結果。程式碼並沒有把整個物件放在一個集合中，而是把需要的內容（id，文章標題，預讀內容，主圖，建立時間）放在一個map，在放到集合轉成json格式返回資料。（注：該程式碼只針對於現在的需求（查詢資料），後續做下拉重新整理，上拉載入，搜尋排序時，可能會修改程式碼 。分頁查詢：微信小程式入門五上滑載入下拉重新整理）。

服務端介面程式碼準備好後，不能著急上線測試，可以用google瀏覽器的 postman。

檢視列印結果，以確保成功

然後開始在微信小程式端，準備一個測試頁面來進行資料互動。

test.wxml：

<view>
    <textarea value="{{textdata}}"/>
</view>
<button bindtap="RequestData" value="Button">request</button>
 

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.開發的思路。