微信小程序實例開發教程之知乎新聞

時間 2019-11-07

原文原文鏈接

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

例子描述：咱們一塊兒來作一個叫作「知乎新聞」的小程序，小程序經過zhihu的API查詢新聞，把最新的新聞標題列出來，點擊標題後顯示新聞的詳細內容。
一、首頁html

設計思路：
⑴ 頭部「知乎新聞」，經過設置app.json裏的window屬性就能夠了。
⑵ 底部的「首頁」、「主題新聞」，經過設置app.json裏的tabBar屬性就能夠了。
⑶ 圖片滾動新聞，用swiper滑塊滾動視圖組件。
⑷ 新聞列表，用view組件；其中，有一個點擊新聞標題後，顯示新聞詳細內容的功能。這個功能，用navigator組件。json

代碼編寫：
⑴ 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裏，添加以下代碼：api

<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裏，添加以下代碼：app

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
    })
  },

二、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格式的數據處理掉。

三、完善首頁的「新聞列表」
⑴ 用wx:for循環列出新聞，用navigator頁面連接組件顯示每一條新聞。
⑵ 添加「更多」按鈕
具體代碼，我這裏就不列了。由於再列代碼，這文章也忒長了吧。我喜歡簡單，簡單。寫到這裏，我以爲用寫文章的方式來說實例，效果不是很好。下面我會錄個視頻教程，手把手教你寫完這個實例。

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