欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

微信小程序入门（三）request请求

发布：2018-01-25 17:18浏览： 次来源：网络 作者：tianshu

上一章介绍了微信小程序的UI框架 weui-wxss 这章就谈谈微信小程序的数据交互---wx.request

官方文档中明确说明，wx.request发起的是https的请求，如果你的服务器是http站点，那需要做配置。可以参考文章：http转https教程

但如果你没有服务端或者不想写后台代码，在这里是可以调用我提供的接口，本文中会介绍使用方法。

 

首先，我们应该从服务端开始准备，我用的是Java。框架是spring+springMVC+spring data 。

接口 https://www.itit123.cn/itdragon/findAll 的controller层 源码：

 
  1. @RequestMapping(value="findAll")  
  2.     @ResponseBody  
  3.     public Object listWxDatas(@RequestParam(value = "page", defaultValue = "1") int pageNumber,  
  4.             @RequestParam(value = "pageSize", defaultValue = PAGE_SIZE) int pageSize,  
  5.             @RequestParam(value = "sortType", defaultValue = "auto") String sortType,   
  6.             ServletRequest request){  
  7.         pageSize = pageSize > 10? 10 : pageSize;  
  8.         try {  
  9.             Map<String, Object> searchParams = Servlets.getParametersStartingWith(request, "search_");  
  10.             Page<WxData> WxDatas = wxDataService.getWxData(searchParams, pageNumber, pageSize, sortType);  
  11.             List<Map<String, Object>> resultList = new ArrayList<Map<String,Object>>();  
  12.             for (WxData WxData : WxDatas) {  
  13.                 Map<String, Object> resultMap = new HashMap<String, Object>();  
  14.                 resultMap.put("id", WxData.getId());  
  15.                 resultMap.put("title", WxData.getTitle());  
  16.                 resultMap.put("content", WxData.getContent());  
  17.                 resultMap.put("src", WxData.getImageUrl());  
  18.                 resultMap.put("time", WxData.getCreatedDate());  
  19.                 resultList.add(resultMap);  
  20.             }  
  21.             return gson.toJson(resultList);  
  22.         } catch (Exception e) {  
  23.             e.printStackTrace();  
  24.         }    
  25.         return null;  
  26.     }  


 

代码大致逻辑是一次最多查10条数据，并以id降序排序输出结果。代码并没有把整个对象放在一个集合中，而是把需要的内容（id，文章标题，预读内容，主图，创建时间）放在一个map，在放到集合转成json格式返回数据。（注：该代码只针对于现在的需求（查询数据），后续做下拉刷新，上拉加载，搜索排序时，可能会修改代码 。分页查询：微信小程序入门五上滑加载下拉刷新）。

如果先要看后端全部代码：参考 https://blog.csdn.net/qq_19558705/article/details/52251519

服务端接口代码准备好后，不能着急上线测试，可以用google浏览器的 postman。

微信小程序入门（三）request请求(图1)

 

查看打印结果，以确保成功

微信小程序入门（三）request请求(图2)

 

然后开始在微信小程序端，准备一个测试页面来进行数据交互。

test.wxml：

 
  1. <view>  
  2.     <textarea value="{{textdata}}"/>  
  3. </view>  
  4. <button bindtap="RequestData" value="Button">request</button>  

 

 

test.js： 
 
  1. Page({  
  2.   data: {  
  3.     textdata: "测试 wx.request",  
  4.   },  
  5.   RequestData: function () {  
  6.     var that = this;  
  7.     wx.request({  
  8.       url: 'https://www.itit123.cn/itdragon/findAll',  
  9.       data: {},  
  10.       method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
  11.       // header: {}, // 设置请求的 header 默认是application/json  
  12.       success: function (res) {  
  13.         // 操作json数据  
  14.         var text ="";  
  15.         for(var i in res.data) {  
  16.           text += i + "." + res.data.title + "\r\n";  
  17.         }  
  18.         that.setData({ textdata: text});  
  19.       },  
  20.       fail: function () {  
  21.         // fail  
  22.       },  
  23.       complete: function () {  
  24.         // complete  
  25.       }  
  26.     })  
  27.   },  
  28.   onLoad: function (options) {  
  29.     // 页面初始化 options为页面跳转所带来的参数  
  30.   },  
  31.   onReady: function () {  
  32.     // 页面渲染完成  
  33.   },  
  34.   onShow: function () {  
  35.     // 页面显示  
  36.   },  
  37.   onHide: function () {  
  38.     // 页面隐藏  
  39.   },  
  40.   onUnload: function () {  
  41.     // 页面关闭  
  42.   }  
  43. })  

测试页面的效果图：

 

微信小程序入门（三）request请求(图3)

 

测试没有问题，那就在list.js中修改代码。

对于wx.request请求，这篇博客中有进行简单的封装。https://blog.csdn.net/chenbalala/article/details/53045480

可以根据自己的需要修改。（我只是将func改成了ajax）

 
  1. // pages/list/list.js  
  2. var app = getApp();  
  3.   
  4. Page({  
  5.   data:{  
  6.     msgList:[]  
  7.   },  
  8.   onLoad:function(options){  
  9.     // 页面初始化 options为页面跳转所带来的参数  
  10.     var that = this  
  11.     app.ajax.req('/itdragon/findAll',{},function(res){    
  12.       that.setData({  
  13.         msgList:res  
  14.       })  
  15.     });  
  16.   },  
  17.   onReady:function(){  
  18.     // 页面渲染完成  
  19.   },  
  20.   onShow:function(){  
  21.     // 页面显示  
  22.   },  
  23.   onHide:function(){  
  24.     // 页面隐藏  
  25.   },  
  26.   onUnload:function(){  
  27.     // 页面关闭  
  28.   }  
  29. })  

因为返回的数据结构，正好是我需要的格式，所以直接赋值了。

 

效果图：

微信小程序入门（三）request请求(图4)

 

这章学习点：

1.wx.request 的使用 微信官方文档 。

2.如何给变量赋值 var that = this; that.setData({变量名：变量值})。

3.开发的思路。





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有