第四章：如何开发一款内容展示类小程序（上）

作者：知晓云 - 小程序开发快人一步

1. 项目简介

这一章节，我将一步一步教大家如何搭建一个文章展示小程序，从最开始使用静态数据，逐渐添加加载更多数据、分享、记录阅读信息等功能，一点点解答开发一个内容展示类小程序所需的基本功能的实现方法。

2. 搭建简单的页面

这里，我们先从最简单的搭建页面框架开始。

首先，我们先理清我们所需要的页面。我们这里只需要用到一个文章列表展示页，和一个文章详情页。在列表页选择一篇文章，点击便进入详情页。

理清了我们需要的页面后，在项目的 pages 文件夹中创建相应的页面，并且在 app.json 文件中进行声明。

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/detail/index"
  ],
}

文章列表

列表循环

我们需要在文章列表展示页将我们文章的简要信息，以列表的形式展示出来。这里主要会用到小程序的 wx:for 属性。在小程序组件上使用 wx:for 属性绑定一个数组，即可使用数组中各项的数据对该组件进行重复渲染，配合 wx:for 一起用的属性如下：

• wx:for： 指定需要遍历的数组
  wx:for-item：遍历数组时，指定当前项的别名
  wx:for-index：当前遍历到数组的第几个
  wx:key：主要用于性能优化

除了 wx:for 属性，其它并非必须要使用的。我们通过一个例子，来看看它是如何使用的：

<view wx:for="{
  
  {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
  
  {idx}}: {
  
  {itemName.message}}
</view>

页面生命周期

一般情况下，我们都会从服务器获取文章列表数据，这就涉及到了在页面的哪个生命周期去获取数据。

一个页面的生命周期如下表所示：

我们可以通过一个简单的试验来了解这些生命周期的触发时机。

首先新建三个页面 index 页面，test 页面和 another 页面。在 index 页面添加一个 navigator 组件，url 指向 test 页面；在 test 页面添加一个 navigator 组件，url 指向 another 页面，同时在其 js 文件中，添加以下代码：

Page({
  onLoad: function (options) {
    console.log('onLoad')  
  },
 
  onReady: function () {
    console.log('onReady')
  },
 
  onShow: function () {
    console.log('onShow')
  },
 
  onHide: function () {
    console.log('onHide')
  },
 
  onUnload: function () {
    console.log('onUnload')
  },
})

当点击 index 页面的 navigator 组件时，跳转到 test 页面，此时会依次触发 onLoad, onShow, onReady 方法，再点击 test 页面上的 navigator 组件时，跳转到 another 页面，则会触发 onHide 方法；点击返回，页面回到 test 页面，此时会触发 onShow 方法；再次点击返回，回到 index 页面，则会触发 onUnload 方法。

了解了不同生命周期的触发时机后，我们就可以很好地选择一个适合的时机发起我们的数据请求了。如果你只想在页面载入的时候拉取一次数据，你可以选择 onLoad；如果你的数据会在其它页面被改到，你需要更频繁地更新数据，你可以选 onShow；如果你想在页面渲染完成后加载获取数据，那就选择 onReady。后面拉取文章列表信息，我是选择在 onLoad 的时候加载的。

功能实现

为了更清晰地讲解如何开发文章列表展示功能，我们会使用一些静态数据来替代真实的数据库数据。

这里先定义第一页的数据，为了方便，我们规定一页就只有四条数据。

// pages/index/index.js
const firstPage = [{
  id: '1',
  title: '装修秘诀',
  description: '文艺气息爆棚的精致白色现代家',
  cover: 'http://xxx.xxx/xxx.jpg', 
},
 ...
{
  id: '4',
  title: '咖啡指南',
  description: '咖啡制作终极指南',
  cover: 'http://xxx.xxx/xxx.jpg', 
}]

我们在 data 中加入 articles 属性，用于存放获取到的文章列表数据，并且在 onLoad 方法中调用获取数据的方法，通过使用 setTimeout 来模拟请求数据的效果。

// pages/index/index.js
Page({
  data: {
    articles: [],
  },
  onLoad: function() {
    this.getArticles()
  },
  getArticles: function() {
    setTimeout(() => {
      this.setData({
        articles: firstPage,
      })
    }, 1000)
  },

编写好 javascript 逻辑，获取到我们需要的数据后，我们就可以在 wxml 里将数据赋给 wx:for ，渲染文章列表。

// pages/index/index.wxml
<view wx:for="{
  
  {articles}}" wx:for-item="article" wx:key="id">
  <image  s