您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

微信小程序request请求的详细介绍

2024/6/24 19:09:29发布44次查看
谈谈微信小程序的数据交互---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 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>
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请求的详细介绍的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product