258资源分享网

这篇是特意分开写的。网上找的帖子大多是直接在onload中请求数据。而我想实现的是点击按钮，然后请求服务器，接着返回数据，前端页面渲染。所以搞了挺久的，在此记录一下。请求是按照微信官方给出的,wx.request在这 ...

 

 

 

这篇是特意分开写的。网上找的帖子大多是直接在onload中请求数据。而我想实现的是点击按钮，然后请求服务器，接着返回数据，前端页面渲染。所以搞了挺久的，在此记录一下。

请求是按照微信官方给出的,wx.request 
在这里，我的逻辑是：点击按钮---》根据绑定的事情注册函数--》发起微信请求--》判断是否返回数据，成功返回数据则显示请求成功。--》返回数据到前端页面进行渲染 
废话不多说，直接上代码：

一、前端页面代码：

 

<viewclass="container2">

 

<viewclass="panel">

 

<labelclass="title">请输入查询内容</label>

 

<inputclass="inputarea"/>

 

<buttonbindtap='onRequest'type="primary"class="searBtn">查询</button>

 

</view>

 

 

 

<scroll-viewclass="article-list"style="height:500px"scroll-y="true"bindscrolltolower="nextPage">

 

<blockwx:for="{{list}}">

 

<viewclass="list-item"index="{{index}}">

 

<viewclass="title">

 

<viewclass="title-name">{{item.title}}</view>

 

</view>

 

</view>

 

</block>

 

 

 

</scroll-view>>

解释：

（1）此处的button绑定onRequest事件，当点击button时候，触发该事件。  （2）下面的view 主要是渲染request请求之后的数据，利用wx:for 来进行循环输出.  （3）需要注意，我们此处用的是带滚动效果的：scroll-view，同时scroll-y="true" 代表是竖向滚动。

二、JS代码：

 

Page({

 

data:{

 

motto:'你懂我懂不懂',

 

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'

 

})

 

},