微信小程序--ajax服務(wù)器交互及頁面渲染
這篇是特意分開寫的。網(wǎng)上找的帖子大多是直接在onload中請求數(shù)據(jù)。而我想實(shí)現(xiàn)的是點(diǎn)擊按鈕，然后請求服務(wù)器，接著返回?cái)?shù)據(jù)，前端頁面渲染。所以搞了挺久的，在此記錄一下。請求是按照微信官方給出的,wx.request在這 ...
這篇是特意分開寫的。網(wǎng)上找的帖子大多是直接在onload中請求數(shù)據(jù)。而我想實(shí)現(xiàn)的是點(diǎn)擊按鈕，然后請求服務(wù)器，接著返回?cái)?shù)據(jù)，前端頁面渲染。所以搞了挺久的，在此記錄一下。
請求是按照微信官方給出的,wx.request
在這里，我的邏輯是：點(diǎn)擊按鈕---》根據(jù)綁定的事情注冊函數(shù)--》發(fā)起微信請求--》判斷是否返回?cái)?shù)據(jù)，成功返回?cái)?shù)據(jù)則顯示請求成功。--》返回?cái)?shù)據(jù)到前端頁面進(jìn)行渲染
廢話不多說，直接上代碼：
一、前端頁面代碼：
-
<view class="container2"> -
<view class="panel"> -
<label class="title">請輸入查詢內(nèi)容</label> -
<input class="inputarea"/> -
<button bindtap='onRequest' type="primary" class="searBtn">查詢</button> -
</view> -
<scroll-view class="article-list" style="height:500px" scroll-y="true" bindscrolltolower="nextPage"> -
<block wx:for="{{list}}"> -
<view class="list-item" index="{{index}}"> -
<view class="title"> -
<view class="title-name">{{item.title}}</view> -
</view> -
</view> -
</block> -
</scroll-view>>
解釋：
（1）此處的button綁定onRequest事件，當(dāng)點(diǎn)擊button時(shí)候，觸發(fā)該事件。 （2）下面的view 主要是渲染request請求之后的數(shù)據(jù)，利用wx:for 來進(jìn)行循環(huán)輸出. （3）需要注意，我們此處用的是帶滾動(dòng)效果的：scroll-view，同時(shí)scroll-y="true" 代表是豎向滾動(dòng)。
二、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("接口調(diào)用失敗"); -
} -
}) -
}, -
nextPage:function() -
{ -
console.log("下拉觸發(fā)該函數(shù)"); -
}, -
//事件處理函數(shù) -
bindViewTap: function () { -
wx.navigateTo({ -
url: '../logs/logs' -
}) -
}, -
})
解釋：
（1）list是我們等下要輸入的內(nèi)容，因此需要在data中體檢申明
（2）onload函數(shù)在此處很重要。頁面加載完成之后，調(diào)用了onrequest()函數(shù)，這樣是為了渲染數(shù)據(jù)。重置要求 必須使用that.setData，這里的that需要用：var that = this來申明。
（3）當(dāng)點(diǎn)擊Button按鈕的時(shí)候，onRequest函數(shù)出發(fā)。此時(shí)請求url，并返回?cái)?shù)據(jù)。當(dāng)返回的數(shù)據(jù)存在時(shí)，走success方法。
（4）此時(shí)，賦值list :date，相當(dāng)于給list賦值，可用于wxml頁面進(jìn)行數(shù)據(jù)渲染。
（5）nextPage即為頁面滾動(dòng)函數(shù)。當(dāng)下拉觸底時(shí)，觸發(fā)該函數(shù)
（6）此處的url為豆瓣的一個(gè)查看電影的url，可以直接借用的。
效果圖：
三、碰到的問題：
1、報(bào)錯(cuò)：微信小程序開發(fā)-網(wǎng)絡(luò)請求報(bào)Invalid request 400錯(cuò)誤：
原因：最新版的參數(shù)和以前的不同，把數(shù)據(jù)格式換一換。
-
// 'content-type': 'application/json' -
'Content-Type': 'json'
2、請求中的get,post必須要大寫
3、如果出現(xiàn)找不到頁面的情況，可能是app.json中，你的引入頁面順序問題。有的頁面的js沒有page()函 數(shù)，造成頁面未定義
end
雖然忙活到12點(diǎn)，但是感覺受益匪淺?？啾频某绦蛟?，也只有獲取知識時(shí)候的那點(diǎn)快感聊以自慰了。
