這篇文章主要介紹了微信小程序如何通過api接口將json數(shù)據(jù)展現(xiàn)到小程序,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為武勝企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計,武勝網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。如何將接口獲取到的數(shù)據(jù)展示到微信小程序上。
1.用到的知識點
<1> wx.request 請求接口資源(微信小程序api中的發(fā)起請求部分)
<2>swiper 實現(xiàn)輪播圖的組件
<3>wx:for 循環(huán)語句
<4>微信小程序的基礎(chǔ)知識
2.實現(xiàn)原理
首先,先看一下這個請求函數(shù)
wx.request({ url: '******', //這里填寫你的接口路徑 header: { //這里寫你借口返回的數(shù)據(jù)是什么類型,這里就體現(xiàn)了微信小程序的強大,直接給你解析數(shù)據(jù),再也不用去尋找各種方法去解析json,xml等數(shù)據(jù)了 'Content-Type': 'application/json' }, data: {//這里寫你要請求的參數(shù) x: '' , y: '' }, success: function(res) { //這里就是請求成功后,進行一些函數(shù)操作 console.log(res.data) } })
3.代碼
分解圖
<1>首先上一段知乎接口數(shù)據(jù)的json格式中的開頭
"date":"20161114", "stories":[ { "images":[ "http://jb51.net.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg" ], "type":0, "id":8975316, "ga_prefix":"111422", "title":"小事 · 我和你們一樣" }, { "images":[ "http://jb51.net/7c908a5940384123fd88287dbc6a2c98.jpg" ], "type":0, "id":8977438, "ga_prefix":"111421", "title":"成長嘛,誰說就意味著一定要長大了?" },
<2>index.js中
Page({ data: { duration: 2000, indicatorDots: true, autoplay: true, interval: 3000, loading: false, plain: false }, onLoad: function () { var that = this//不要漏了這句,很重要 wx.request({ url: 'http://news-at.zhihu.com/api/4/news/latest', headers: { 'Content-Type': 'application/json' }, success: function (res) { //將獲取到的json數(shù)據(jù),存在名字叫zhihu的這個數(shù)組中 that.setData({ zhihu: res.data.stories, //res代表success函數(shù)的事件對,data是固定的,stories是是上面json數(shù)據(jù)中stories }) } }) } })
<3> index.wxml中
<view > <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">//這里邊的屬性不重要,看下邊 <block wx:for="{{zhihu}}"> <swiper-item class="banner" > <image src="{{item.image}}" data-id="{{item.b}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/> <text class="banner-title">{{item.title}}</text> </swiper-item> </block> </swiper> </view>
看完這個代碼,你會想,根據(jù)微信小程序的綁定原理,這里邊的代碼哪里調(diào)用了onLoad()這個函數(shù),不用多想,微信小程序給你省略了這些步驟。直接調(diào)用zhihu這個數(shù)組就行。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“微信小程序如何通過api接口將json數(shù)據(jù)展現(xiàn)到小程序”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)建站,關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文題目:微信小程序如何通過api接口將json數(shù)據(jù)展現(xiàn)到小程序-創(chuàng)新互聯(lián)
新聞來源:http://muchs.cn/article32/ceoisc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、響應(yīng)式網(wǎng)站、服務(wù)器托管、網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容