详情 - 功能完善

本文配套视频地址:

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.contentId || 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,通过把当前文章的 lastUpdateTimecontentId 参数传递给后端,后端会返回下一篇文章的 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

“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。

微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善的更多相关文章

  1. 微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

    iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...

  2. 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

    下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...

  3. 微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染

    § 详情 - 数据渲染 本文配套视频地址: https://v.qq.com/x/page/x055550lrvd.html 开始前请把 ch4-2 分支中的 code/ 目录导入微信开发工具 这一节 ...

  4. 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作

    详情 - 页面制作 本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中 ...

  5. 微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联

    § 视图与数据关联 本文配套视频地址: https://v.qq.com/x/page/z0554wyswib.html 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工具 首先 首先 ...

  6. 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理

    § 页面逻辑处理 本文配套视频地址: https://v.qq.com/x/page/n0554dndrez.html 开始前请把 ch3-2 分支中的 code/ 目录导入微信开发工具 修改 ind ...

  7. 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...

  8. “全栈2019”Java第四章:创建第一个Java程序

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. 第四章:重构代码[学习Android Studio汉化教程]

    第四章 Refactoring Code The solutions you develop in Android Studio will not always follow a straight p ...

随机推荐

  1. 设计模式的征途—9.组合(Composite)模式

    树形结构在软件中随处可见,比如操作系统中的目录结构,公司组织结构等等,如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题.组合模式通过一种巧妙的设计方案来使得用户可以一致性地处理整个树形 ...

  2. Java中static关键字的详解

    static关键字可以修饰方法和成员变量(不可以修饰局部变量,但是可以修饰内部类). static关键字方便在没有创建对象的情况下来进行调用(方法/变量). 很显然,被static关键字修饰的方法或者 ...

  3. 使用MongoVUE

    mongoDB版本号为3.4.10 在终端操作一顿后想看看它在可视化工具里面什么样子,于是就找了一个可视化工具,MongoVUE这个看起来还不错,因为我是windows系统所以就没有太多的挑选选择.在 ...

  4. HTTPS 传输优化详解之动态 TLS Record Size

    笔者在过去分析了诸多可以减少 HTTPS 传输延迟的方法,如分布式 Session 的复用: 启用 HSTS,客户端默认开启 HTTPS 跳转:采用 HTTP/2 传输协议:使用 ChaCha20-P ...

  5. java并发之线程同步(synchronized和锁机制)

    使用synchronized实现同步方法 使用非依赖属性实现同步 在同步块中使用条件(wait(),notify(),notifyAll()) 使用锁实现同步 使用读写锁实现同步数据访问 修改锁的公平 ...

  6. HCTF

    题目:魂斗罗 介绍:这个是HCTF里面的杂项,很好玩的, 1,这个看链接可以下载(http://139.224.54.27/gogogo/hundouluo.nes),然后在网上下载一个虚拟器(htt ...

  7. 浅谈IM(InstantMessaging) 即时通讯/实时传讯【理论篇】

        一.IM简要概述 IM InstantMessaging(即时通讯,实时传讯)的缩写是IM,互动百科大致解释是一种可以让使用者在网络上建立某种私人聊天(chatroom)的实时通讯服务. 大部 ...

  8. ES6这些就够了

    刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...

  9. 分布式版本控制系统 Git 教程

    简介 Git 是什么? Git 是一个开源的分布式版本控制系统. 什么是版本控制? 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 什么是分布式版本控制系统? 介绍分布 ...

  10. C# 使用Task实现任务超时,多任务一起执行

    简介:充分使用Task的异步功能代码实现:1.实现了任务超时 退出任务 2.多个任务一起执行 /// <summary>        ///做事 需要 ms秒 才能完成        / ...