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

cocopeak 发布于2019-08-01 17:55 / 1561人阅读

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。

详情 - 功能完善

本文配套视频地址：
https://v.qq.com/x/page/f0555...

开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具
这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。

Step 1. 增加 下一篇 功能

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

1、修改视图文件 detail.wxml，增加相应的绑定事件

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 参数传递给后端，后端会返回下一篇文章的 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 属性，作用就不解释了，直接看属性名的单词应该就明白：

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

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 组件增加了 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 监听事件：

Step 3. 增加 返回列表 功能

我们需要在 detail.js 中增加一个返回列表的函数，然后视图中绑定触发事件

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

在视图中绑定事件：

由于 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/ev...

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

云服务器 GPU云服务器微信小程序功能微信小程序的功能微信小程序有什么功能微信小程序实时音视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51460.html

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

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

phodal 2019-08-21 17:25 评论0 收藏0
微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

fizz 2019-08-29 13:44 评论0 收藏0
微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。 § 视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554... 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工...

haitiancoder 2019-08-30 13:49 评论0 收藏0
微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。 § 视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554... 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工...

scola666 2019-08-21 17:16 评论0 收藏0
微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。 § 视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554... 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工...

Nekron 2019-08-01 17:51 评论0 收藏0