详解-功能完善/f0555...开始前，请导入ch4-3分支的code/目录进入微信开发工具。在本节中，我们将完善细节的其他功能：下一篇文章，分享，返回列表。Step1.添加下一篇文章的功能添加下一篇文章的功能，我们需要在视图中绑定一个事件来触发代码中的response函数，该函数会调用接口返回下一篇文章的内容数据文章。1、修改视图文件detail.wxml，添加对应的绑定事件Next2、修改代码detail.js，添加绑定事件对应的next和相关函数：next(){this.requestNextContentId().then(data=>{letcontentId=data&&data.contentId||0;this.init(contentId);})},requestNextContentId(){letpubDate=this.data.detailData&&this.data.detailData.lastUpdateTime||''让contentId=this.data.detailData&&this.data.detailData.contentId||0returnutil.request({url:'detail',mock:true,data:{tag:'WeChatHot',pubDate:pubDate,contentId:contentId,langs:config.appLang||'en'}}).then(res=>{if(res&&res.status===0&&res.data&&res.data.contentId){util.log(res)returnres.data}else{util.alert('reminder','没有文章了！')returnnull}})}大致介绍一下这两个函数：点击触发下一个函数，会先调用requestNextContentId，通过将当前文章的lastUpdateTime和contentId参数传给后台，后台会返回下一篇文章的contentId，这样我们就知道了这篇文章的Id，然后再把contentId传给init(contentId)函数就好了一开始，获取文章的详细数据，然后渲染视图……这时候，你可能已经发现了一个用户体验上的bug：当页面滚动到一定程度，点击下一篇文章时，新页面并没有没有滚动到顶部，所以我们需要修复这个bug，当文章更新时，正常情况下，页面应该滚动到顶部，即滚动条在初始位置。现在我们开始修复它：scroll-view组件有一个属性scroll-top，代表滚动条当前的位置，即当它的值为0时，滚动条在最上面，所以我们需要add这个值记录在data中。当文章需要滚动到页面顶部时，我们只需要修改scroll-top的值即可。这里我们使用scrollTop来表示：//修改detail.js的数据datadata:{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();});}}Step2.添加分享功能调用小程序会监听分享事件。如果触发了分享功能，监听事件会返回一个对象，该对象包含分享信息，可以分别处理分享成功和分享失败button组件添加open-type="share"属性，可以触发onShareAppMessage监听事件：onShareAppMessage(){lettitle=this.data.detailData&&this.data.detailData.title||配置.defaultShareText；让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){},//sharefailfail:function(res){}}}，这里需要注意的是，该接口不支持部分版本，所以如果版本不支持，需要给出用户一条提示信息所以我们需要给分享按钮再绑定一个点击事件。如果不支持，提示用户：notSupportShare(){//deviceInfo是用户的设备信息，我们在app.js中获取并保存在globalData中letdevice=app.globalData.deviceInfo;让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:'Tips',content:'您的微信版本低，请点击右上角分享'})}}在视图中绑定分享监听事件：第三步，增加返回列表功能我们需要添加一个函数在detail.js中返回列表，然后在视图中绑定触发事件//detail.js添加如下内容Page({back(){wx.navigateBack()}})在视图中绑定事件：因为wx.navigateBack相当于浏览器的历史，如果用户不是从列表进来的，比如从分享的详情里打开？这时候记录是不存在的。如果用户是通过分享进来的是的，带入了参数share=1，比如步骤2中的分享功能，那么我们在第一次进入页面的时候，通过是否存在share=1来识别：onLoad(option){letid=option.contentId||0;this.setData({isFromShare:!!option.share});this.init(id);}，然后修改后面的函数，如果是来自分享入口，那么我们就按导航列表返回;如果没有，通过加载记录正常返回：//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...与《练英语口语》总榜第四的研发团队面对面交流小程序，教育排名第一。
