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

详情 - 功能完善

本文配套视频地址: 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()  
    }
  }
})

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端架构与工程

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

1986
来自专栏小狼的世界

基于Vue、Bootstrap的Tab形式的进度展示

最近基于Vue、Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些。在...

892
来自专栏Linux驱动

13.QT-QMainWindow组件使用

1824
来自专栏微信小程序开发

小程序中wx.xx is not a function的报错

1724
来自专栏Coding01

iOS 逆向开发先导篇——我是这么调试开发的

今天在整理东西的时候,无意间发现一个逆向微信的功能清单,想起来原来自己曾经还学过一些 iOS 逆向工程的皮毛知识。

873
来自专栏前端架构

action segue与non-adaptive

如下图,ios8 action segue 有几种方法,一般选择哪一个,每种方法都有什么用,在什么环境下使用?

602
来自专栏梧雨北辰的开发录

iOS屏幕旋转及其基本适配方法

前段时间抽空总结了一下iOS视频播放的基本用法,发现这其中还有一个我们无法绕过的问题,那就是播放界面的旋转与适配。的确,视频播放与游戏类型的App经常会遇到这个...

4135
来自专栏有趣的django

python爬虫入门(五)Selenium模拟用户操作

爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider) 之间恢宏壮阔的斗争... 小莫想要某站上所有的电影,写了...

4393
来自专栏web前端

JavaScript基础学习--零碎

1、如果WINDOW对象是常规HTML页面,TOP就是SELF       var top = document.getElementById('top'); ...

2037
来自专栏北京马哥教育

python实现简单爬虫功能

iOS开发如果之前没接触过除了c和c++(c++太难了,不花个十来年基本不可能精通)的语言,第二门语言最好的选择就是Python.原因就是 1.语法简单 2.库...

2877

扫码关注云+社区