前言
看了那么多的小程序入門瞬痘，想必各位看官也差不多對(duì)小程序已經(jīng)有了一定的了解螟凭。這篇文章就不再主講入門，現(xiàn)在我們要通過(guò)一個(gè)知乎日?qǐng)?bào)的小程序去實(shí)踐一下晶通，加深對(duì)微信小程序API的理解坟桅。
對(duì)了华望，入門可以看這篇文章，里面有工具的初步使用介紹：
http://www.reibang.com/p/37dfcea4a2f8 微信小程序開(kāi)發(fā)入門教程
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信小程序開(kāi)發(fā)工具下載
https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 微信小程序官方文檔
http://doc.pietian.com/ 微信小程序開(kāi)發(fā)文檔離線下載地址
好了仅乓，下面我們開(kāi)始吧赖舟。
實(shí)戰(zhàn)開(kāi)始
首先先看看我們今天要做的知乎日?qǐng)?bào)的成果。
如下圖夸楣。不過(guò)由于篇幅問(wèn)題宾抓，今天只講首頁(yè)的完成，里面包含了與后端的交互豫喧，頁(yè)面的布局石洗，數(shù)據(jù)的渲染，事件響應(yīng)等紧显，基本上囊括了如何制作一個(gè)單頁(yè)所有開(kāi)發(fā)讲衫。
1. 資源準(zhǔn)備
知乎日?qǐng)?bào)-簡(jiǎn)要版 API：
http://news-at.zhihu.com/api/4/news/latest 今日熱文
http://news.at.zhihu.com/api/4/news/before/ 更多往日熱文
上面這兩個(gè)地址是我們今天要做的首頁(yè)的API，我們將發(fā)起request請(qǐng)求孵班，拿回?cái)?shù)據(jù)做渲染涉兽。
2.首頁(yè)JS
下面我們將開(kāi)始編寫(xiě)代碼招驴，請(qǐng)保持首頁(yè)目錄結(jié)構(gòu)跟我下圖一致。
好枷畏，首先我們先寫(xiě)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í)行丹允，請(qǐng)求知乎日?qǐng)?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) { //請(qǐng)求成功后的回調(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ā)起請(qǐng)求雕蔽，請(qǐng)求上一天的熱聞
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
},
})
這里我們簡(jiǎn)單講下幾個(gè)要點(diǎn)：
2.1 設(shè)置data值
目前微信小程序只能支持
this.setData({....});
無(wú)法直接指定一個(gè)值
this.data.xxxx = ''; //記住，這樣是不行的宾娜。
2.2 onLoad
這是頁(yè)面生命周期里的一個(gè)監(jiān)聽(tīng)頁(yè)面加載的方法批狐，就是說(shuō)每一次進(jìn)入這個(gè)頁(yè)面開(kāi)始都要執(zhí)行這里面的方法，和JS中l(wèi)oad一樣前塔。
2.3 和服務(wù)端交互
微信小程序中和后端交互也是采用的請(qǐng)求接口嚣艇，具體樣例如下，我已經(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)
}
})
3.首頁(yè)布局 index.html
好了，寫(xiě)完了和后端交互的js代碼寂屏，這樣我們就拿到了數(shù)據(jù)贰谣，現(xiàn)在我們開(kāi)始寫(xiě)頁(yè)面的布局。
其實(shí)微信小程序在渲染頁(yè)面這塊迁霎，采用的也是一種模板引擎的方式吱抚。而且頁(yè)面取值方式都比較通用。和其他一些頁(yè)面模板引擎都是差不多的考廉。
好秘豹，我們開(kāi)始吧。這個(gè)頁(yè)面布局還是比較簡(jiǎn)單的昌粤。
3.1 banner塊
首先既绕，我們?nèi)フ蚁挛臋n，會(huì)有專門的banner組件婚苹，
swiper(點(diǎn)擊可以跳轉(zhuǎn)文檔)
我們就用這個(gè)swiper組件寫(xiě)咱們的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圖片開(kāi)始-->
<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>
3.2 熱聞列表模塊
其實(shí)下面的一個(gè)熱聞列表也就是一個(gè)list循環(huán)，這邊怎么做循環(huán)呢谭企，同樣我們可以查詢API文檔可得廓译。
利用 wx-for 屬性评肆，但是這只是一個(gè)屬性，我們需要把它加到一個(gè)標(biāo)簽上面才能執(zhí)行非区，為了承載這個(gè)屬性瓜挽，微信小程序?qū)ｉT定義了一個(gè)無(wú)其他作用的標(biāo)簽 <block>。
另外注意征绸，微信小程序里有很多默認(rèn)：
在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組久橙，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index管怠，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item淆衷，如果需要修改的話，使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名渤弛。
所以對(duì)下面的item.header不要驚訝祝拯，item哪來(lái)的。
代碼如下：
<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)方法名。
4.樣式表 index.wxss
這個(gè)就不單獨(dú)說(shuō)了晴氨，跟平時(shí)寫(xiě)的 css幾乎沒(méi)啥區(qū)別康嘉。最后也會(huì)放出源代碼給大家下載。
5. 寫(xiě)在最后
這篇小文籽前，只是帶領(lǐng)大家做一個(gè)和服務(wù)端進(jìn)行交互的小demo凄鼻，加深下對(duì)微信小程序的前前后后的理解。
后續(xù)的正在coding中....
敬請(qǐng)期待聚假。
github代碼地址：https://github.com/XuXiaoGH/wechat-app-zhihudaily
