首先先看看我們今天要做的知乎日報(bào)的成果。
如下圖。不過由于篇幅問題,今天只講首頁的完成,里面包含了與后端的交互,頁面的布局,數(shù)據(jù)的渲染,事件響應(yīng)等,基本上囊括了如何制作一個(gè)單頁所有開發(fā)。
知乎日報(bào)-簡要版 API:
http://news-at.zhihu.com/api/4/news/latest 今日熱文
http://news.at.zhihu.com/api/4/news/before/ 更多往日熱文
上面這兩個(gè)地址是我們今天要做的首頁的API,我們將發(fā)起request請求,拿回?cái)?shù)據(jù)做渲染。
下面我們將開始編寫代碼,請保持首頁目錄結(jié)構(gòu)跟我下圖一致。
好,首先我們先寫JS文件,代碼如下,而且我都加了詳細(xì)的注釋。
// index.js //index.js //獲取應(yīng)用實(shí)例 var app = getApp() var utils = require('../../utils/util.js'); //初始化數(shù)據(jù) Page({ data: { list: [], duration: 2000, indicatorDots: true, autoplay: true, interval: 3000, loading: false, plain: false }, //onLoad方法,程序啟動(dòng)自執(zhí)行,請求知乎日報(bào)今日熱聞接口 onLoad: function () { var that = this; wx.request({ url: 'http://news-at.zhihu.com/api/4/news/latest', headers: { // http頭數(shù)據(jù) 'Content-Type': 'application/json' }, success: function (res) { //請求成功后的回調(diào) that.setData({ // 設(shè)置返回值 banner: res.data.top_stories, //banner圖片數(shù)據(jù) list: [{ header: '今日熱聞' }].concat(res.data.stories) //熱聞數(shù)據(jù)list }) } }) this.index = 1; //方便下拉點(diǎn)擊更多時(shí)的計(jì)數(shù)下標(biāo),暫可忽略 }, //下拉滾動(dòng)條,點(diǎn)擊更多的響應(yīng) loadMore: function (e) { if (this.data.list.length === 0) return var date = this.getNextDate() var that = this that.setData({ loading: true }); wx.request({ // 再次發(fā)起請求,請求上一天的熱聞 url: 'http://news.at.zhihu.com/api/4/news/before/' + (Number(utils.formatDate(date)) + 1), //此此API需要帶日期 headers: { 'Content-Type': 'application/json' }, success: function (res) { // 成功回調(diào) that.setData({ loading: false, list: that.data.list.concat([{ header: utils.formatDate(date, '-') }]).concat(res.data.stories) }) } }) }, //事件處理函數(shù) bindViewTap: function(e) { wx.navigateTo({ url: '../detail/detail?id=' + e.target.dataset.id }) }, //轉(zhuǎn)換時(shí)間函數(shù) getNextDate: function (){ var now = new Date() now.setDate(now.getDate() - this.index++) return now }, })
this.setData({....});
this.data.xxxx = ''; //記住,這樣是不行的。
這是頁面生命周期里的一個(gè)監(jiān)聽頁面加載的方法,就是說每一次進(jìn)入這個(gè)頁面開始都要執(zhí)行這里面的方法,和JS中l(wèi)oad一樣。
微信小程序中和后端交互也是采用的請求接口,具體樣例如下,我已經(jīng)加了注釋了,想必都能看懂。
wx.request({ url: 'test.php', //接口地址 data: { // 參數(shù) x: '' , y: '' }, header: { // 頭信息 'Content-Type': 'application/json' }, success: function(res) { // 成功 回調(diào) console.log(res.data) } })
好了,寫完了和后端交互的js代碼,這樣我們就拿到了數(shù)據(jù),現(xiàn)在我們開始寫頁面的布局。
其實(shí)微信小程序在渲染頁面這塊,采用的也是一種模板引擎的方式。而且頁面取值方式都比較通用。和其他一些頁面模板引擎都是差不多的。
首先,我們?nèi)フ蚁挛臋n,會(huì)有專門的banner組件,
swiper(點(diǎn)擊可以跳轉(zhuǎn)文檔)
我們就用這個(gè)swiper組件寫咱們的bannner模塊,這里有個(gè)注意點(diǎn)
在 swiper 組件中只可放置<swiper-item/>組件,其他節(jié)點(diǎn)會(huì)被自動(dòng)刪除。
// index.html banner模塊代碼 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}"> <!-- 循環(huán)bannner圖片開始--> <block wx:for="{{banner}}"> <swiper-item class="banner" > <image src="{{item.image}}" data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/> <text class="banner-title">{{item.title}}</text> </swiper-item> </block> <!-- 循環(huán)bannner圖片結(jié)束--> </swiper>
其實(shí)下面的一個(gè)熱聞列表也就是一個(gè)list循環(huán),這邊怎么做循環(huán)呢,同樣我們可以查詢API文檔可得。
利用 wx-for 屬性,但是這只是一個(gè)屬性,我們需要把它加到一個(gè)標(biāo)簽上面才能執(zhí)行,為了承載這個(gè)屬性,微信小程序?qū)iT定義了一個(gè)無其他作用的標(biāo)簽 <block>。
所以對下面的item.header不要驚訝,item哪來的。
<view class="news-item-container"> <block wx:for="{{list}}" wx:for-index="id"> <text wx:if="{{item.header}}" class="sub-title">{{item.header}}</text> <navigator wx:else url="../detail/detail?id={{item.id}}"> <view class="news-item" > <view class="news-item-left"> <text class="news-item-title">{{item.title}}</text> </view> <view class="news-item-right"> <image src="{{item.images[0]}}" class="news-image"/> </view> </view> </navigator> </block> <button type="primary" class="load-btn" size="mini" loading="{{loading}}" plain="{{plain}}" bindtap="loadMore"> 更多 </button> </view>
另外,這里有個(gè)更多的點(diǎn)擊響應(yīng),使用的是 bindtap 屬性指定響應(yīng)方法名。
這個(gè)就不單獨(dú)說了,跟平時(shí)寫的 css幾乎沒啥區(qū)別。最后也會(huì)放出源代碼給大家下載。
這篇小文,只是帶領(lǐng)大家做一個(gè)和服務(wù)端進(jìn)行交互的小demo,加深下對微信小程序的前前后后的理解。
后續(xù)的正在coding中....
敬請期待。
github代碼地址:https://github.com/XuXiaoGH/wechat-app-zhihudaily
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)