Detailed introduction of WeChat mini program request request

Talk about the data interaction of WeChat applet---wx.request

The official document clearly states that wx.request initiates an https request. If your server is an http site, you need to do configuration. You can refer to the article: http to https tutorial

But if you don’t have a server or don’t want to write background code, you can call the interface I provided here. This article will introduce how to use it.

First of all, we should start preparing from the server side. I use java. The framework is spring+springMVC+spring data.

The controller layer of the interface https://www.itit123.cn/itdragon/findAll

Source code:

@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>

The general logic of the code is to check up to 10 pieces of data at a time, and Sort the results by id in descending order. The code does not put the entire object in a collection, but puts the required content (id, article title, pre-read content, main image, creation time) in a map, and then puts it in the collection and converts it into json format to return the data. (Note: This code is only for the current needs (query data). In the future, the code may be modified when doing pull-down refresh, pull-up loading, and search and sorting. Paging query: Getting Started with WeChat Mini Program 5: Swipe up to load and pull down to refresh).

After the server interface code is ready, you cannot rush to go online for testing. You can use postman of Google browser.

Check the printing results to ensure success

Then start preparing a test page on the WeChat applet Perform data interaction.

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 () {
    // 页面关闭
  }
})

Rendering of the test page:

If there is no problem in the test, then modify the code in list.js.

Can be modified according to your own needs. (I just changed func to 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(){
    // 页面关闭
  }
})

Because the returned data structure is exactly the format I need, I assigned it directly.

Rendering:

Learning points in this chapter:

1. Use of wx.request WeChat official documentation.

2. How to assign a value to a variable var that = this; that.setData({variable name: variable value}).

3. Development ideas.

The above is the detailed content of Detailed introduction of WeChat mini program request request. For more information, please follow other related articles on the PHP Chinese website!