微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

详情 - 功能完善

本文配套视频地址：

https://v.qq.com/x/page/f0555nfdi14.html

开始前请把

ch4-3

分支中的

code/

目录导入微信开发工具

这一节中，我们把详情的其他功能完善起来：下一篇、 分享、 返回列表。

Step 1. 增加

下一篇

功能

增加

下一篇

的功能，我们需要在视图中绑定一个事件，来触发代码中的响应函数，此函数会调用接口，返回下一篇文章内容数据。

1、修改视图文件

detail.wxml

，增加相应的绑定事件

<button class="footbar-btn clearBtnDefault" bindtap="next">下一篇</button>

2、修改代码

detail.js

，增加绑定事件对应的

next

及相关函数：

next(){
this.requestNextContentId()
.then(data => {
let contentId = data && data.conten
4000
tId || 0;
this.init(contentId);
})
},
requestNextContentId () {
let pubDate = this.data.detailData && this.data.detailData.lastUpdateTime || ''
let contentId = this.data.detailData && this.data.detailData.contentId || 0
return util.request({
url: 'detail',
mock: true,
data: {
tag:'微信热门',
pubDate: pubDate,
contentId: contentId,
langs: config.appLang || 'en'
}
})
.then(res => {
if (res && res.status === 0 && res.data && res.data.contentId) {
util.log(res)
return res.data
} else {
util.alert('提示', '没有更多文章了!')
return null
}
})
}

大概介绍下这两个函数：

点击触发

next

函数，它会先调用

requestNextContentId

，通过把当前文章的

lastUpdateTime

和

contentId

参数传递给后端，后端会返回下一篇文章的

contentId

，这样我们就知道了文章 Id，然后就像刚开始一样，把

contentId

再次传递给

init(contentId)

函数，获取文章的详情数据，然后是渲染视图……

这个时候，可能你已经发现了一个用户体验上的

bug

：当页面滚动到一定程度后点击下一篇，新的页面没有滚动到顶部。所以我们需要修复这个

bug

，当文章更新后，正常情况下，页面应该滚动到顶部，也就是滚动条在最开始位置。现在我们开始修复它：

scroll-view

组件有个属性

scroll-top

，这个属性代表着滚动条当前的位置，也就是说，当它的值为 0 时候，滚动条在最顶部，所以我们需要在数据

data

中记录这个值，当需要文章滚动到页面顶部时候，我们只需要修改

scroll-top

的值就可以了。

这里我们用

scrollTop

来表示：

// 修改 detail.js 的数据 data
data:{
scrollTop: 0,
detailData: {}
}

修改视图文件，注意增加

enable-back-to-top

属性，作用就不解释了，直接看属性名的单词应该就明白：

<scroll-view scroll-y="true" scroll-top="{{ scrollTop }}" enable-back-to-top="true" class="root-wrap">

当我们需要文章返回到顶部时候，只要设置这个变量值就可以了。这里我们对赋值操作提取出单独的函数：

goTop () {
this.setData({
scrollTop: 0
})
}

在函数

init()

中调用：

init (contentId) {
if (contentId) {
this.goTop()
this.requestDetail(contentId)
.then(data => {
this.configPageData(data);
})
//调用wxparse
.then(()=>{
this.articleRevert();
});
}
}

Step 2. 增加

分享

功能

调用小程序会对分享事件做监听，如果触发分享功能后，监听事件会返回一个对象，包含了分享出去的信息内容，并且可以分别对分享成功和分享失败做处理

<!--
<button class="footbar-share clearBtnDefault">
<view class="icon footbar-share-icon"></view>
</button>
-->
<button class="footbar-share clearBtnDefault" open-type="share">
<view class="icon footbar-share-icon"></view>
</button>

button

组件增加了

open-type="share"

属性后，就可以触发

onShareAppMessage

监听事件：

onShareAppMessage () {
let title = this.data.detailData && this.data.detailData.title || config.defaultShareText;
let contentId = this.data.detailData && this.data.detailData.contentId || 0;
return {
// 分享出去的内容标题
title: title,

// 用户点击分享出去的内容，跳转的地址
// contentId为文章id参数；share参数作用是说明用户是从分享出去的地址进来的，我们后面会用到
path: `/pages/detail/detail?share=1&contentId=${contentId}`,

// 分享成功
success: function(res) {},

// 分享失败
fail: function(res) {}
}
},

这里需要我们注意下，此接口对部分版本不支持，所以如果版本不支持时候，我们要给用户一个提示信息。所以我们需要给分享按钮另外绑定一个点击事件，如果不支持的话，提示用户：

notSupportShare () {
// deviceInfo 是用户的设备信息，我们在 app.js 中已经获取并保存在 globalData 中
let device = app.globalData.deviceInfo;
let sdkVersion = device && device.SDKVersion || '1.0.0';
return /1\.0\.0|1\.0\.1|1\.1\.0|1\.1\.1/.test(sdkVersion);
},
share () {
if (this.notSupportShare()) {
wx.showModal({
title: '提示',
content: '您的微信版本较低，请点击右上角分享'
})
}
}

在视图中绑定

share

监听事件：

<!--
<button class="footbar-share clearBtnDefault" open-type="share">
<view class="icon footbar-share-icon"></view>
</button>
-->
<button class="footbar-share clearBtnDefault" bindtap="share" open-type="share">
<view class="icon footbar-share-icon"></view>
</button>

Step 3. 增加

返回列表

功能

我们需要在

detail.js

中增加一个返回列表的函数，然后视图中绑定触发事件

// detail.js 增加以下内容
Page({
back(){
wx.navigateBack()
}
})

在视图中绑定事件：

<!--
<button class="footbar-back clearBtnDefault">
<view class="icon footbar-back-icon"></view>
</button>
-->
<button class="footbar-back clearBtnDefault" bindtap="back">
<view class="icon footbar-back-icon"></view>
</button>

由于

wx.navigateBack

相当于浏览器的

history

，通过浏览记录返回的。那么如果用户并不是从列表进来的，比如是从分享出去的详情打开呢？这时候记录是不存在的。

如果是通过分享进来的，有带进来参数

share=1

，如

step 2

中的分享功能，那么我们在刚进到页面时候，就可以通过

share=1

是否存在来标识出来：

onLoad (option) {
let id = option.contentId || 0;
this.setData({
isFromShare: !!option.share
});
this.init(id);
},

然后修改

back

函数，如果是从分享入口进来的，那么我们就通过导航的方式来返回列表；如果不是，就正常的通过加载记录来返回：

// detail.js 增加以下内容
Page({
back(){
if (this.data.isFromShare) {
wx.navigateTo({
url: '../index/index'
})
} else {
wx.navigateBack()
}
}
})

至此，我们简单的小程序实战已经完成！！！

iKcamp官网：http://www.ikcamp.com

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。

包含：文章、视频、源代码



iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

【11月11号】上海iKcamp最新活动

报名地址：http://www.huodongxing.com/event/5409924174200

与

“天天练口语”

小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。