本文配套视频地址:
v.qq.com/x/page/f055…
开始前请把
分支中的
- ch4-3
目录导入微信开发工具这一节中,我们把详情的其他功能完善起来:下一篇、 分享、 返回列表。
- code/
功能
- 下一篇
增加
的功能,我们需要在视图中绑定一个事件,来触发代码中的响应函数,此函数会调用接口,返回下一篇文章内容数据。
- 下一篇
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
和
- lastUpdateTime
参数传递给后端,后端会返回下一篇文章的
- contentId
,这样我们就知道了文章 Id,然后就像刚开始一样,把
- contentId
再次传递给
- contentId
函数,获取文章的详情数据,然后是渲染视图……
- init(contentId)
这个时候,可能你已经发现了一个用户体验上的
:当页面滚动到一定程度后点击下一篇,新的页面没有滚动到顶部。所以我们需要修复这个
- bug
,当文章更新后,正常情况下,页面应该滚动到顶部,也就是滚动条在最开始位置。现在我们开始修复它:
- bug
组件有个属性
- scroll-view
,这个属性代表着滚动条当前的位置,也就是说,当它的值为 0 时候,滚动条在最顶部,所以我们需要在数据
- scroll-top
中记录这个值,当需要文章滚动到页面顶部时候,我们只需要修改
- 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();
- });
- }
- }
功能
- 分享
调用小程序会对分享事件做监听,如果触发分享功能后,监听事件会返回一个对象,包含了分享出去的信息内容,并且可以分别对分享成功和分享失败做处理
- <!--
- <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>
功能
- 返回列表
我们需要在
中增加一个返回列表的函数,然后视图中绑定触发事件
- 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官网:www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码
iKcamp原创新书《移动web前端高效开发实战》已在亚马逊、京东、当当开售。
报名地址:www.huodongxing.com/event/54099…
与
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
- “天天练口语”
来源: https://juejin.im/post/59fbde18f265da43284035ac