实现微信小程序服务器交互及页面渲染，逻辑流程为：点击按钮--->根据绑定的事情注册函数-->发起微信请求-->判断是否返回数据，成功返回数据则显示请求成功。-->返回数据到前端页面进行渲染。而网上能够找到的教程中，常规做法是直接在onload中请求数据，不能满足现在这种需求，而使用微信官方给出的,wx.request发出请求可以实现按钮服务器交互调取数据到前端渲染。
button绑定onRequest事件，当点击button时候，触发该事件。
下面的view 主要是渲染request请求之后的数据，利用wx:for 来进行循环输出.
需要注意，我们此处用的是带滚动效果的：scroll-view，同时scroll-y=true 代表是竖向滚动。
JS代码：
Page({
data: {
motto: \'XXX\',
list:[]
},
onload:function()
{
this.onRequest();
},
onRequest:function()
{
var that = this;
wx.request({
url: \'https://api.douban.com/v2/movie/top250\',
method:GET,
header: {
\'Content-Type\': \'json\'
},
success: function (res) {
console.log(res.data.subjects);
var date = res.data.subjects;
that.setData({
list: date
})
},
fail: function () {
console.log(接口调用失败);
}
})
},
nextPage:function()
{
console.log(下拉触发该函数);
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: \'../logs/logs\'
})
},
})
代码说明：
（1）nextPage即为页面滚动函数。当下拉触底时，触发该函数。
（2）当点击Button按钮的时候，onRequest函数出发。此时请求url，并返回数据。当返回的数据存在时，走success方法。
（3）此时，赋值list :date，相当于给list赋值，可用于wxml页面进行数据渲染。
（4）此处的url为豆瓣的一个查看电影的url，可以直接借用的。
（5）list是我们等下要输入的内容，因此需要在data中体检申明
（6）onload函数在此处很重要。页面加载完成之后，调用了onrequest()函数，这样是为了渲染数据。重置要求必须使用that.setData，这里的that需要用：var that = this来申明。
碰到的错误：
1、报错：微信小程序开发-网络请求报Invalid
request 400错误：
原因：最新版的参数和以前的不同，把数据格式换一换。
// \'content-type\': \'application/json\'
\'Content-Type\': \'json\'
2、请求中的get,post必须要大写
3、如果出现找不到页面的情况，可能是app.json中，你的引入页面顺序问题。有的页面的js没有page()函数，造成页面未定义。
推荐阅读：微信小程序视图层WXS处理教程 微信小程序开发教程
参与讨论
发表评论