微信小程式例項開發教程之知乎新聞

chuxue2005發表於2016-10-24
微信小程式

前面寫了幾篇文章，簡單地介紹了一下小程式。相信完整看下來的讀者，對微信小程式應該有了一定的認識。學習，需要邊學邊練，這樣掌握起來快，反正我喜歡這麼去學習一樣新的技術。學而不思則罔，思而不學則殆嘛。下面，我們一起從0開始，來做一個簡單的例項。這個例項我分成2篇文章來講解：1，完成介面、API互動 2，問題總結及注意事項。

例子描述：我們一起來做一個叫做“知乎新聞”的小程式，小程式通過zhihu的API查詢新聞，把最新的新聞標題列出來，點選標題後顯示新聞的詳細內容。
1、首頁

設計思路：
⑴ 頭部“知乎新聞”，通過設定app.json裡的window屬性就可以了。
⑵ 底部的“首頁”、“主題新聞”，通過設定app.json裡的tabBar屬性就可以了。
⑶ 圖片滾動新聞，用swiper滑塊滾動檢視元件。
⑷ 新聞列表，用view元件；其中，有一個點選新聞標題後，顯示新聞詳細內容的功能。這個功能，用navigator元件。

程式碼編寫：
⑴ app.json

  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#00a2ea",
    "navigationBarTitleText": "知乎新聞",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#353535",
    "selectedColor": "#3cc51f",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "images/icon_API.png",
      "selectedIconPath": "images/icon_API_HL.png",
      "text": "主頁"
    }, {
      "pagePath": "pages/theme/theme",
      "iconPath": "images/icon_component.png",
      "selectedIconPath": "images/icon_component_HL.png",
      "text": "主題新聞"
    }]
  },

跟pages同級建立一個images目錄，把png圖片檔案拷貝到這個目錄。然後點選開發者工具左側的“編譯”，顯示如下介面：

⑵ 新增“圖片滾動新聞”
① index.wxml裡，新增如下程式碼：

<view>
  <swiper indicator-dots="true"
  autoplay="true" interval="3000" duration="2000">
      <swiper-item >
          <image src=""  data-id="" />
          <text>title</text>
      </swiper-item>
  </swiper>
</view>

現在，介面有了，但swiper元件裡沒有圖片來源，下面需要通過呼叫zhihu的API，把圖片來源動態地獲取出來。

② index.js裡，新增如下程式碼：

  data: {
    banner: [],
    duration: 2000, // 滑動動畫時長
    indicatorDots: true, // 是否顯示皮膚指示點
    autoplay: true, // 是否自動切換
    interval: 3000 // 自動切換時間間隔
  },
 
  onLoad () {
    var that = this
    wx.request({ //呼叫API，獲取新聞資料
      url: `http://news-at.zhihu.com/api/4/news/latest`,
      headers: {
        `Content-Type`: `application/json`
      },
      success (res) {
         that.setData({
           banner: res.data.top_stories
         })
      }
    })
  },

③ 這裡需要說明下，呼叫任何API前，需要先了解API返回的資料格式。
http://news-at.zhihu.com/api/…返回的資料格式如下：

為了在swiper中動態顯示圖片，標題。index.wxml的程式碼需要修改成：

<view>
  <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{banner}}">
      <swiper-item >
          <image src="{{item.image}}"  data-id="{{item.id}}" />
          <text>{{item.title}}</text>
      </swiper-item>
    </block>
  </swiper>
</view>

編譯後，顯示的介面如下：

④ 點選滾動圖片，顯示新聞具體內容。
<image>元件裡新增bindtap屬性，修改後的程式碼如下：

<image src="{{item.image}}"  data-id="{{item.id}}"
                bindtap="bindViewTap" class="banner-image"/>

⑤ index.js需要新增相應的bindViewTap方法，如下：

  bindViewTap(e) {
    wx.navigateTo({
      url: `../detail/detail?id=` + e.target.dataset.id
    })
  },

2、detail頁面
前面的首頁，點選滾動圖片，需要顯示新聞具體內容。這時，就需要建立1個detail頁面，頁面設計如下：

⑴ 跟index目錄並級，建立detail目錄，並建立detail.wxml, detail.js 2個檔案。
① detail.js的程式碼如下：

onLoad (options) {
    var that = this
    wx.request({
      url: `http://news-at.zhihu.com/api/4/news/` + options.id,
      headers: {
        `Content-Type`: `application/json`
      },
      success (res) {
         that.setData({
           art: res.data
         })
      }
    })
  }

② wxml的程式碼如下：

<view>
    <view>
        <image src="{{art.image}}"/>
        <view>{{art.title}}</view>
        <view>{{art.image_source}}</view>
    </view>
    <view>
      {{art.body}}
    </view>
</view>

編譯後，顯示的介面如下：

③ 發現小程式對含html格式的資料，顯示有問題。目前，只能人工把html程式碼過濾掉。後期，我希望騰訊能推出html元件，這樣使用者在<html> </html>裡顯示就沒問題了。
當然，現在你可以自己寫js程式碼，把html格式的資料處理掉。

3、完善首頁的“新聞列表”
⑴ 用wx:for迴圈列出新聞，用navigator頁面連結元件顯示每一條新聞。
⑵ 新增“更多”按鈕
具體程式碼，我這裡就不列了。因為再列程式碼，這文章也忒長了吧。我喜歡簡單，簡單。寫到這裡，我覺得用寫文章的方式來講例項，效果不是很好。下面我會錄個視訊教程，手把手教你寫完這個例項。

作者名字：有漁
有漁系列文章：
有漁微信小程式系統概述《六》小程式的API
有漁微信小程式技術分析《五》Mustache語法要點總結
有漁微信小程式系統進階《四》小程式元件
有漁微信小程式系統概述《三》view層及小程式框架概述
有漁微信小程式系統概述《二》瞭解.js檔案及.json檔案
有漁微信小程式系統概述《一》認識微信小程式與HelloWorld

相關文章