微信開發實戰之知日報

前言

看了這麼多的小程式入門，想必各位看官也差不多對小程式已經有了一定的了解。這篇文章就不再主講入門，現在我們要透過一個知乎日​​報的小程式去實踐一下，加深對微信小程式API的理解。

好了，下面我們就開始吧。

實戰開始

先看看我們今天要做的知乎日報的成果。
如下圖。不過由於篇幅問題，今天只講首頁的完成，裡麵包含了與後端的交互，頁面的佈局，數據的渲染，事件響應等，基本上囊括瞭如何製作一個單頁所有開發。

知乎日報小程式首頁

#1.資源準備

知乎日報-簡短版API：

new
s-at.zhihu.com/api/4/news/latest 今日热文
news.at.zhihu.com/api/4/news/
before
/  更多往日热文

上面這兩個位址是我們今天要做的首頁的API，我們將發起request請求，拿回資料做渲染。

2.首頁JS

下面我們將開始寫程式碼，請保持首頁目錄結構跟我下圖一致。

首頁三個檔案

好，首先我們先寫JS檔,程式碼如下，而且我都加了詳細的註解。

// index.js

//index.js
//获取应用实例
var app = getApp()
var utils = require('../../utils/util.js');
//初始化数据
Page({
  data: {
    list: [],
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  //onLoad方法，程序启动自执行，请求知乎日报今日热闻接口
  onLoad: function () {
    var that = this;
    wx.request({
      url: 'http://news-at.zhihu.com/api/4/news/latest',
      headers: { // http头数据
        'Content-Type': 'application/json'
      },
      success: function (res) { //请求成功后的回调
         that.setData({   // 设置返回值
           banner: res.data.top_stories,  //banner图片数据
           list: [{ header: '今日热闻' }].concat(res.data.stories)  //热闻数据list
         })
      }
    })
    this.index = 1;   //方便下拉点击更多时的计数下标，暂可忽略
  },
  //下拉滚动条，点击更多的响应
  loadMore: function (e) {
    if (this.data.list.length === 0) return
    var date = this.getNextDate()
    var that = this
    that.setData({ loading: true });
    wx.request({  // 再次发起请求，请求上一天的热闻
      url: 'http://news.at.zhihu.com/api/4/news/before/' + (Number(utils.formatDate(date)) + 1),  //此此API需要带日期
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {  // 成功回调
         that.setData({
           loading: false,
           list: that.data.list.concat([{ header: utils.formatDate(date, '-') }]).concat(res.data.stories)
         })
      }
    })
  },
  //事件处理函数
  bindViewTap: function(e) {
    wx.navigateTo({
      url: '../detail/detail?id=' + e.target.dataset.id
    })
  },
  //转换时间函数
  getNextDate: function (){
    var now = new Date()
    now.setDate(now.getDate() - this.index++)
    return now
  },

})

這裡我們簡單講下幾個要點：

2.1 設定data值

目前微信小程式只能支援

this.setData({....});

無法直接指定一個值

this.data.xxxx = '';  //记住，这样是不行的。

2.2 onLoad

這是頁面生命週期裡的一個監聽頁面載入的方法，就是說每一次進入這個頁面開始都要執行這裡面的方法，和JS中load一樣。

2.3 和服務端互動

微信小程式中和後端互動也是採用的請求接口，具體樣例如下，我已經加了註解了，想必都能看懂。

wx.request({
  url: 'test.php', //接口地址
  data: {  // 参数
     x: '' ,
     y: ''
  },
  header: {  // 头信息
      'Content-Type': 'application/json'
  },
  success: function(res) {  // 成功 回调
    console.log(res.data)
  }
})

3.首頁佈局 index.html

好了，寫完了和後端互動的js程式碼，這樣我們就拿到了數據，現在我們開始寫頁面的佈局。

其實微信小程式在渲染頁面這塊，採用的也是一種模板引擎的方式。而且頁面取值方式都比較通用。和其他一些頁面模板引擎都是差不多的。

好，我們開始吧。這個頁面佈局還是比較簡單的。

佈局分割

3.1 banner區塊

首先，我們去找下文檔，會有專門的banner元件，
swiper(點擊可以跳到文件)

我們就用這個swiper元件寫咱們的bannner模組，這裡有個注意點

#在swiper 元件中只會放置<swiper-item/>元件，其他節點會自動刪除。

// index.html banner模块代码

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <!-- 循环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>
     <!-- 循环bannner图片结束-->
  </swiper>

3.2 熱聞列表模組

其實下面的一個熱聞列表也就是一個list循環，這邊怎麼做循環呢，同樣我們可以查詢API文檔可得。
利用 wx-for 屬性，但這只是一個屬性，我們需要把它加到一個標籤上面才能執行，為了承載這個屬性，微信小程式專門定義了一個無其他作用的標籤 。

另外注意，微信小程式裡有很多預設：

在元件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的資料重複渲染該元件。預設陣列的目前項目的下標變數名稱預設為index，陣列目前項目的變數名稱預設為item，如果需要修改的話，使用 wx:for-item 可以指定陣列目前元素的變數名稱。

所以對下面的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>

另外，這裡有個更多的點擊回應，使用的是 bindtap 屬性指定回應方法名稱。

4.樣式表 index.wxss

這就不單獨說了，跟平常寫的 css幾乎沒啥差別。最後也會放出原始碼給大家下載。

5. 寫在最後

這篇小文，只是帶領大家做一個和服務端進行交互的小demo，加深下對微信小程式的前前後後的理解。
後續的正在coding中....
敬請期待。

【相關推薦】

1. 微信公眾號平台原始碼下載

2. 小豬cms(PigCms)微電商系統營運版（獨立微店商城+三級分銷系統）

3. 微信人脈王v3. 4.5高階商業版微信魔術方塊源碼

以上是微信開發實戰之知日報的詳細內容。更多資訊請關注PHP中文網其他相關文章！