WeChat 文章详情页

2020-03-04 本文已影响0人 Nian糕

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于七月老师的书籍《微信小程序开发：入门与实践》，由个人总结并编写，关于更多微信小程序开发中的各项技能，以及常见问题的解决方案，还请大家购买书籍进行学习实践，该系列博文的发布已得到七月老师的授权许可

授权许可

0 系列文章目录

01 WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
 02 WeChat 文章列表页面（一）
03 WeChat 文章列表页面（二）
04 WeChat 模块、模板与缓存

1 跳转文章详情页面

新建文章详情页，在 app.json 的 page 数组下新增页面路径 ``，保存之后，开发工具会自动生成 post-detail 详情页，在 post.wxml 中增加 view 容器包裹 template 模板，并注册跳转文章详情页事件，这里没有在 template 或 block 标签上注册事件，是因为它们在编译之后“消失”了

<!--pages/post/post.wxml-->
<block wx:for="{{postList}}" wx:for-index="idx" wx:for-item="item">
  <view catchtap="onTapToDetail" data-post-id="{{item.postId}}">
    <template is="postItemTpl" data="{{...item}}" />
  </view>
</block>

我们在 post.js 文件中添加 onTapToDetail 事件，通过传入的 event 事件对象，获取到传入的 postId，其中 currentTarget 代表事件绑定的当前组件，而 dataset 对象里包含当前组件中所有属性名以 data- 开头的自定义属性值

// pages/post/post.js
import { DBPost } from '../../db/DBPost.js'

Page({
  ...
  onTapToDetail(event) {
    const postId = event.currentTarget.dataset.postId
    console.log(postId)
    wx.navigateTo({
      url: `post-detail/post-detail?id=${postId}`
    })
  }
})

在 post-detail 页面中获取 postId

// pages/post/post-detail/post-detail.js
Page({
  data: {},
  onLoad: function (options) {
    let postId = options.id
  }
})

运行效果

2 跳转文章详情页面

现在我们主要的代码编辑工作集中在 post-detail 这个页面上，但每当保存刷新小程序后，项目都将从欢迎页面启动，我们不得不依次点击启动页面、文章列表，才能进入到文章详情页面以浏览文章详情的效果，这样非常不方便我们调试页面

官方提供了一个【自定义编译】功能，可用于定义小程序的启动页面，点击【普通编译】，随后在弹出的菜单中选择【添加编译模式】，将启动页面设置为 pages/post/post-detail/post-detail，启动参数可设为 id=4，若是有多个参数，可使用 & 进行连接

我们在文章详情页中拿到了 postId，接下来需要根据这个 postId 去缓存数据库中读取文章详细数据，并将数据用于构建文章详情页，在 DBPost.js 文件中修改 constructor 构造函数，增加一个构造参数 postId，并将其保存到 this 变量中，随后增加 getPostItemById 方法，用于获取指定 id 的文章数据

// db/DBPost.js
class DBPost {
  constructor(postId) {
    this.storageKeyName = 'postList'
    this.postId = postId
  }
  ...
  // 获取指定id的文章数据
  getPostItemById() {
    let postsData = this.getAllPostData()
    const len = postsData.length
    for(let i = 0; i < len; i++) {
      if(postsData[i].postId == this.postId) {
        return {
          // 当前文章在缓存数据库数组中的序号
          index: i,
          data: postsData[i]
        }
      }
    }
  }
}

随后我们在 post-detail.js 中获取指定 id 的文章数据，并使用 this.setData 绑定该数据

// pages/post/post-detail/post-detail.js
import { DBPost } from "../../../db/DBPost"
Page({
  data: {},
  onLoad: function (options) {
    let postId = options.id
    this.dbPost = new DBPost(postId)
    this.postData = this.dbPost.getPostItemById().data
    this.setData({
      post: this.postData
    })
  }
})

3 编写文章详情页面

<!--pages/post/post-detail/post-detail.wxml-->
<view class="container">
  <image class="head-image" src="{{post.postImg}}"/>
  <text class="title">{{post.title}}</text>
  <view class="author-date">
    <view class="author-box">
      <image class="avatar" src="{{post.avatar}}" />
      <text class="author">{{post.author}}</text>
    </view>
    <text class="date">{{post.dateTime}}</text>
  </view>
  <text class="detail">{{post.detail}}</text>
</view>

/* pages/post/post-detail/post-detail.wxss */
.container {
  display: flex;
  flex-direction: column;
}
.head-image {
  width: 750rpx;
  height: 460rpx;
}
.title {
  font-size: 20px;
  margin: 30rpx;
  letter-spacing: 2px;
  color: #4b556c;
}
.author-date {
  display: flex;
  flex-direction: row;
  margin-top: 15rpx;
  margin-left: 30rpx;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.author-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.avatar {
  height: 50rpx;
  width: 50rpx;
}
.author {
  font-weight: 300;
  margin-left: 20rpx;
  color: #666;
}
.date {
  color: #919191;
  margin-right: 38rpx;
}
.detail {
  color: #666;
  margin: 40rpx 22rpx 0;
  line-height: 44rpx;
  letter-spacing: 1px;
  font-size: 14px;
}

保存并刷新页面后，文章详情页将正确地显示出来，如下图所示

运行效果

在 post.json 文件中配置导航栏文字

{
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "标题"
}

在 post-detail.js 文件中动态设置导航栏文字为文章标题

Page({
  ...
  onReady: function() {
    wx.setNavigationBarTitle({
      title: this.postData.title
    })
  }
})

运行结果

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub WeChat_05 上了，有需要的同学可自行下载

End of File

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^