第五章：如何开发一款内容展现类小程序（下）

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

前面咱们搭建了一个简单的页面框架，实现了文章列表展现和跳转文章详情的功能。然而，仅有这些功能是明显不够的，所以，接下来，我将向你讲解，如何加上更多稍显复杂，但颇有必要的功能，包括加载更多文章列表，显示未读与已读状态和文章分享。

加载更多文章列表

前面，咱们在首页模拟了获取第一页文章的请求。考虑到性能问题，大部分状况下咱们不会在首页展现出全部的文章列表，在 PC 上咱们能够经过分页来实现，而在移动端，比较常见的作法是在列表末尾经过上拉或者一个加载更多按钮，来获取更多文章。这里，咱们将采用第二种作法。

加载更多的逻辑是这样的：当一次请求获取到的文章数量大于或等于咱们规定的每页数量时，按钮的文案会显示为 ”加载更多“，而且点击后会去获取下一页的文章，而若是获取到的文章数量小于咱们规定的每页数量时，按钮的文案会显示为 ”已无更多“。

这里须要解释一下，若是获取到最后一页的文章数刚好为咱们规定的每页数量时，当点击加载更多，会继续获取下一页文章，此时获取到的文章数量为 0 ，小于规定的每页数量，按钮的文案变为 ”已无更多“。

为了简化步骤，咱们模拟的下一页的文章数量小于 4 篇，这样，当咱们点击一次加载更多后，按钮文章会变为 ”已无更多“。

这里咱们须要增长两个变量，一个是 isEnd，用于标识已无更多，另外一个是 isLoading，用于防止用户连续屡次点击加载更多按钮。

经过小程序中的按钮组件的 loading 属性，能够方便地显示正在加载中的样式。

// pages/index/index.wxml
<button type="default" plain="{{true}}" loading="{{loading}}" bindtap="loadMore">
  {{loadMoreText}}
</button>
复制代码

制造静态数据，数量为 2 条，表示已无更多。

// pages/index/index.js
const lastPage = [{
  id: '5',
  title: '超新约全书',
  description: '一个以折磨人为乐趣的上帝',
  cover: 'https://xxx.xxx.xxx.jpg'
}, {
  id: '6',
  title: '2001太空漫游 2001',
  description: '现代科幻电影技术的里程碑',
  cover: 'https://xxx.xxx.xxx.jpg'
}]
 
// pages/index/index.js
let isEnd = false
Page({
  data: {
    articles: [],
    loading: false,
    loadMoreText: '加载更多'
  },
 
  onLoad: function() {
    this.getArticles(true)
  },
 
  loadMore: function(event) {
    this.getArticles()
  }
})
复制代码

从新实现 getArticles 方法：

getArticles: function(isFirstPage) {
  if (!isEnd && !this.data.loading) {
    this.setData({ loading: true })
    setTimeout(() => {
      if (isFirstPage) { 
        this.setData({
          articles: firstPage,
          loading: false
        })
      } else {
        this.setData({
          articles: firstPage.concat(lastPage),
          loading: false
        })
        if (lastPage.length < pageLimit) {
          isEnd = true
          this.setData({ loadMoreText: '已无更多' })
        }
      }
    }, 1000)
  }
}
复制代码

每一次获取到新的页面时，咱们经过 Array.concat 方法，将它拼接入到以前的文章列表后面，而后进行 setData 。这样，咱们就实现了加载更多文章列表的功能了。

显示未读与已读状态

有时候，咱们也会忘了本身曾阅读过某篇文章，虽然对于大多数人来讲这并不常见，但对于我这种记忆力不是很好的人来讲，这事情发生的频率仍是很大的。因此，我有必要为本身提高一下用户体验。

当用户在首页点击了某个文章列表项后，咱们须要将该列表项的文字颜色设置为灰色，正常状况下，他们是黑色的。

为了标记用户是否读过某篇文章，咱们在用户点击某篇文章的同时，将其文章 id 保存起来。相似这种数据，咱们通常不会保存到数据库，由于有点牛刀小试了，咱们只须要将数据保存到本地便可，只要用户不清缓存数据就不会丢失，即便请了缓存，丢失了数据，也并不会形成多大的损失。

接下来，让咱们看看如何在小程序中使用本地存储吧。

本地存储的使用及同异步接口的差别

小程序提供了两种方法让咱们操做本地存储，包括同步操做与异步操做。

同步：

添加：wx.setStorageSync

获取：wx.getStorageSync

异步：

添加：wx.setStorage

获取：wx.getStorage

关于同步和异步的区别，有个例子很好地作了说明：

同步调用就是你喊你的朋友吃饭，你朋友在忙，你就一直在那等，等你朋友忙完了，大家一块儿去。

异步调用就是你喊你的朋友吃饭，你朋友说知道了，待会忙完去找你，你就去作别的事了。

可见，异步调用的效率会比同步好，但应用到编程语言上，就要稍微多写点代码了。以获取 key 为 id 的数据为例，咱们讲解一下这两种调用方式分别是如何使用的：

同步：

var value = wx.getStorageSync('key')
console.log('id', value)
复制代码

异步：

wx.getStorage({
  key: 'id',
  success: function(res) {
    console.log('id', res.data)
  } 
})
复制代码

能够看到，使用同步操做相对于异步操做更简单也更简洁一点，异步操做主要是用在对性能有要求的场景，这里为了操做方便，咱们将使用同步操做来实现该功能。

功能实现

在前面的基础上，咱们在每一个 article 数据中再加入一个 isReaded 字段，用于标识该文章是否已被阅读。

当用户在首页点击某一篇文章时，要先判断 storage 中是否有 key 为 READED_ARTICLES （字符串常量）的记录，若是没有，则建立该记录，其 value 为数组，并将该文章的 id push 到该数组中。若是已存在名为 READED_ARTICLES 的记录，则判断该文章的 id 是否包含在其 value （数组类型）中，不存在则 push ，存在则跳过。

// pages/index/index.js
toDetailPage: function(e) {
  let id = e.currentTarget.dataset.id
  let readedArticles = wx.getStorageSync(READED_ARTICLES)
 
  if (!readedArticles) {
    wx.setStorageSync(READED_ARTICLES, [id])
  } else if(readedArticles.indexOf(id) == -1) {
    readedArticles.push(id)
    wx.setStorageSync(READED_ARTICLES, readedArticles)
  }
  this.setData({articles: this.addReadStatus(this.data.articles)})
  wx.navigateTo({
    url: `../detail/index?id=${id}`
  })
}
复制代码

上面，咱们在 setData 的时候再也不使用 this.data.articles，而是使用 this.addReadStatus(this.data.articles)，addReadStatus 是咱们本身定义的方法，它接受一个 articles 参数，并根据 localStorage 中保存的，已阅读过的文章的 id ，来给文章添加 isReaded 属性。

addReadStatus: function(articles) {
  let readedArticles = wx.getStorageSync(READED_ARTICLES)
  if (!readedArticles) {
    return articles
  }
  
  let newArticles = []
  for (let i = 0; i < articles.length; i++) {
    let article = Object.assign(articles[i])
    if (readedArticles.indexOf(article.id) != -1) {
      article.isReaded = true
    } else {
      article.isReaded = false
    }
    newArticles.push(movie)
  }
    
  return newArticles
}
复制代码

同时，咱们不要忘了另外一种状况，当用户从新打开小程序的时候，咱们也须要给文章加上 isReader 属性。即在 getArticles 方法中的 setData 里使用 addReadStatus，以下：

// pages/index/index.js
this.setData({
  articles: oldArticles.concat(this.addReadStatus(data)),
  loading: false
})
复制代码

有了 isReader 作标志，咱们就不难为不一样状态的文章加上不一样的样式了。

// pages/index/index.wxml
<button type="default" plain="{{true}}" loading="{{loading}}" bindtap="loadMore">
  {{loadMoreText}}
</button>
复制代码

到这里，咱们就完成了一个有点复杂，但又很实用的小功能了。接下让咱们再开发一个能够提升咱们应用活跃度的功能——分享。

文章分享

分享基本上是每一个应用都必不可少的功能，在小程序中实现一个常规的分享功能，是再简单不过了，但简单也意味着不够特别，若是你想要得到更多的分享量，那就须要在分享方式上下点功夫了。

接下来我将介绍两种方式来实现分享功能，一种是最常规的也是最普通的，点击右上角的菜单，使用弹出的菜单项中分享菜单项。 另外一种方法是自定义一个分享按钮，用户点击按钮后即弹出确认分享框，该方法灵活性强，而且比第一种少操做了一步。好了，让咱们开始吧。

不管使用菜单仍是自定义控件来实现分享功能，都须要咱们在要加入分享功能的 Page 中实现 onShareAppMessage(options) 方法，在该方法中设置该页面的转发信息和转发成功或失败的回调。

Page({
  onShareAppMessage: function (options) {
    return {
      title: '标题',
      path: '/page/user?id=123',
      success: function() {
        // 转发成功
        console.log(`share by: ${options.from}`)
      },
      fail: function() {
        // 转发失败
      }
    }
  }
})
复制代码

options 参数说明：

1. 使用菜单中的分享功能

使用菜单中的分享功能，咱们只需在 page 中定义 onShareAppMessage 便可。

// pages/detail/index.js onShareAppMessage: function (options) { return { title: this.data.article.title, imageUrl: this.data.article.poster, path: pages/detail/index?id=${id}, } }

2. 自定义分享组件

与使用菜单中的分享功能同样，咱们一样要实现 onShareAppMessage 方法。自定义分享组件，咱们须要借助到 button 组件的 open-type 属性，将其设置为 "share" ，当点击按钮便会弹出分享确认框。

<button open-type="share">分享<button/>
复制代码

到这里不少人会有疑惑了，难道咱们必须使用 button 组件才能实现自定义分享组件吗？button 组件那么丑……。很遗憾，咱们的确须要使用 button 组件，但也不用那么失望，虽然咱们要使用 button 组件，但谁说 button 组件就丑了呢，咱们还有 css 的嘛。如今，咱们就借助 css ，实现一个悬浮于屏幕右下角，圆形的，带背景图片的分享按钮。

<button plain="{{true}}" open-type="share" />
// pages/detail/index.wxss
.article-share-btn {
  position: fixed;
  right: 30rpx;
  bottom: 30rpx;
  width: 70rpx;
  height: 70rpx;
  background-image: url("https://cloud-minapp-1131.cloud.ifanrusercontent.com/1eNFg1HrAVjWkrNQ.png");
  background-size: 70rpx 70rpx;
  border: 0 !important;
}
复制代码

最后的效果以下：

到这里，咱们就搭建起了一个文章展现小程序基本的页面框架，同时为其加上了一些很实用的小功能，你也能够阅读小程序官方文档，找找那些你感兴趣的功能的小程序 API ，来丰富你的小程序功能吧。

相关阅读

第一章：一文了解小程序

第二章：手把手，动手编写一个简单小程序（上）

第三章：手把手，动手编写一个简单小程序（下）

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