小程序模板网

微信小程序--ajax服务器交互及页面渲染

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

 
 
 

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

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

一、前端页面代码:

 

		
  1. <view class="container2">
  2.  
  3. <view class="panel">
  4.  
  5. <label class="title">请输入查询内容</label>
  6.  
  7. <input class="inputarea"/>
  8.  
  9. <button bindtap='onRequest' type="primary" class="searBtn">查询</button>
  10.  
  11. </view>
  12.  
  13.  
  14.  
  15. <scroll-view class="article-list" style="height:500px" scroll-y="true" bindscrolltolower="nextPage">
  16.  
  17. <block wx:for="{{list}}">
  18.  
  19. <view class="list-item" index="{{index}}">
  20.  
  21. <view class="title">
  22.  
  23. <view class="title-name">{{item.title}}</view>
  24.  
  25. </view>
  26.  
  27. </view>
  28.  
  29. </block>
  30.  
  31.  
  32.  
  33. </scroll-view>>

解释:

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

二、JS代码:

 

		
  1. Page({
  2.  
  3. data: {
  4.  
  5. motto: '你懂我懂不懂',
  6.  
  7. list:[]
  8.  
  9. },
  10.  
  11. onload:function()
  12.  
  13. {
  14.  
  15. this.onRequest();
  16.  
  17. },
  18.  
  19. onRequest:function()
  20.  
  21. {
  22.  
  23. var that = this;
  24.  
  25. wx.request({
  26.  
  27. url: 'https://api.douban.com/v2/movie/top250',
  28.  
  29. method:"GET",
  30.  
  31. header: {
  32.  
  33. 'Content-Type': 'json'
  34.  
  35. },
  36.  
  37. success: function (res) {
  38.  
  39. console.log(res.data.subjects);
  40.  
  41. var date = res.data.subjects;
  42.  
  43. that.setData({
  44.  
  45. list: date
  46.  
  47. })
  48.  
  49. },
  50.  
  51. fail: function () {
  52.  
  53. console.log("接口调用失败");
  54.  
  55. }
  56.  
  57. })
  58.  
  59. },
  60.  
  61. nextPage:function()
  62.  
  63. {
  64.  
  65. console.log("下拉触发该函数");
  66.  
  67. },
  68.  
  69. //事件处理函数
  70.  
  71. bindViewTap: function () {
  72.  
  73. wx.navigateTo({
  74.  
  75. url: '../logs/logs'
  76.  
  77. })
  78.  
  79. },
  80.  
  81. })

解释:

(1)list是我们等下要输入的内容,因此需要在data中体检申明

(2)onload函数在此处很重要。页面加载完成之后,调用了onrequest()函数,这样是为了渲染数据。重置要求  必须使用that.setData,这里的that需要用:var that = this来申明。

(3)当点击Button按钮的时候,onRequest函数出发。此时请求url,并返回数据。当返回的数据存在时,走success方法。

(4)此时,赋值list :date,相当于给list赋值,可用于wxml页面进行数据渲染。

(5)nextPage即为页面滚动函数。当下拉触底时,触发该函数

(6)此处的url为豆瓣的一个查看电影的url,可以直接借用的。

效果图:

三、碰到的问题:

1、报错:微信小程序开发-网络请求报Invalid  request 400错误:

原因:最新版的参数和以前的不同,把数据格式换一换。

 

		
  1.  
  2. // 'content-type': 'application/json'
  3.  
  4.  
  5. 'Content-Type': 'json'

2、请求中的get,post必须要大写

3、如果出现找不到页面的情况,可能是app.json中,你的引入页面顺序问题。有的页面的js没有page()函  数,造成页面未定义

end

虽然忙活到12点,但是感觉受益匪浅。苦逼的程序猿,也只有获取知识时候的那点快感聊以自慰了。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18304.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询