最終效果：

效果圖

實(shí)現(xiàn)：

1.首先最開始，我們新聞頁面所需要的所有信息（文字、圖片、時(shí)間等）都需要調(diào)用后臺(tái)接口獲取，此時(shí)需要使用官方文檔的wx.request這個(gè)API，注意！！請(qǐng)事先在后臺(tái)添加request請(qǐng)求域名，否則會(huì)報(bào)域名不合法的錯(cuò)誤。

2.在初始化函數(shù)中寫如下代碼（將返回的數(shù)據(jù)放在本地緩存是為了后面詳情頁使用）：

初始化函數(shù)

3.(1)可以看到，頁面主要由上半部分的輪播圖和下部分的新聞列表組成，點(diǎn)擊均可跳轉(zhuǎn)詳情頁。WXML的代碼為：

輪播圖部分

列表部分

(2)其中輪播圖部分跳轉(zhuǎn)詳情是通過swiperClick這個(gè)方法，在這個(gè)方法中我們要獲取輪播圖當(dāng)前的下標(biāo)swiperCurrent以決定跳到哪個(gè)詳情。而當(dāng)前下標(biāo)是在swiperChange方法里得到的，具體代碼為：

data數(shù)據(jù)

swiperChange方法

swiperClick方法

列表跳到新聞頁則是通過組件navigator的url屬性跳轉(zhuǎn)。這兩種跳轉(zhuǎn)都需要傳一個(gè)index值，在swiperClick中index就是當(dāng)前的swiperCurrent，在navigator中我們則通過wx:for-index賦值去獲取。

4.新聞詳情頁的效果圖如下：

新聞詳情頁

5.新聞詳情頁的頁面結(jié)構(gòu)比較簡單，主要代碼為下：

wxml

js

我們可以看到，e.index可以獲取傳遞過來的下標(biāo)，然后在本地緩存中通過下標(biāo)取出我們需要的信息，賦給數(shù)組。

小提示：

這里還有個(gè)小小的問題，就是通常請(qǐng)求回的數(shù)據(jù)中包含大量html格式，在排版上，還需要經(jīng)過富文本解析，讓它變得更美觀。我將富文本解析代碼放在app.js中。

富文本解析

一個(gè)簡易新聞閱讀類的小程序這樣就可以實(shí)現(xiàn)了，至于WXSS代碼我就不貼了。大家可以根據(jù)自己想要的效果進(jìn)行調(diào)整。