微信小程序开发项目实战（微课版）课件 5-3 课件-新闻详情页面的实现

项目五新闻页面模块开发任务三新闻详情页面的实现Newsdetailspageimplementation新闻详情页面pages/newsDetail/newsDetail.wxml，详情页面包含了收藏、分享、背景音乐等功能。可以将详情页分为四个部分：标题区域、摘要区域、图片区域和内容区域。标题区域包含新闻标题、时间、收藏和背景音乐；内容区域包括新闻内容和转发按钮。项目五新闻页面模块开发任务描述新闻详情页面的设计

打开pages/newsDetail/newsDetail.wxml文件中编写代码，在时间一栏里放置三个图片作为按钮，其中收藏和取消收藏功能需要两张图片的切换，实现新闻详情页面的布局。获取对应的详情数据 varcommon=require('../../utils/common.js')

Page({ data:{

newsDetail:{} }, onLoad:function(options){

letid=options.id

letresult=common.getNewsDetail(id)

this.setData({

newsDetail:result

})

}

})

在前面实现了新闻列表与新闻详情页的跳转，在跳转的同时，传递了新闻ID数据，代码在pages/news/news.wxml中已经定义data-id='{{news.id}}'。但是仍需在newsDetail页面根据传递过来的参数，获取具体对应的新闻详情。实现新闻详情页面的收藏和取消收藏功能。打开pages/newsDetail/newsDetail.wxml文件，为收藏图片添加条件渲染，根据isCollected的值判断是否有收藏。分别为两张图片绑定取消收藏和添加收藏事件。收藏功能的实现<imagewx:if="{{isCollected}}"bindtap="cancelCollected"src="/images/collection.png"></image><imagewx:elsebindtap="addCollected"src="/images/collection-anti.png"></image>转发分享功能的实现

按钮转发功能：通过为button组件设置属性open-type="share"，可以在⽤户点击按钮后触发用户转发事件。pages/newsDetail/newsDetail.wxml页面，在转发按钮上添加open-type属性。转发分享功能的实现表onShareAppMessage参数列表属性类型说明fromString转发事件来源。button：页面内转发按钮；menu：右上角转发菜单targetObject如果from值是button，则target是触发这次转发事件的button，否则为undefinedwebViewUrlString页面中包含组件时，返回当前的url

用户点击右上角转发：监听用户点击页面内转发按钮或右上角菜单“转发”按钮的行为，并自定义转发内容。只有定义了onShareAppMessage事件处理函数，右上角菜单才会显示“转发”按钮。转发分享功能的实现属性说明默认值title自定义标题，即朋友圈列表页上显示的标题当前小程序名称query自定义页面路径中携带的参数，如path?a=1&b=2的“?”后面部分当前页面路径携带的参数imageUrl自定义图片路径，可以是本地文件或者网络图片。支持PNG及JPG，显示图片长宽比是1:1。默认使用小程序Logo表onShareTimeline函数参数

转发到朋友圈：onShareTimeline()监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮。事件处理函数返回一个Object，用于自定义分享内容，不支持自定义页面路径。wx.getBackgroundAudioManager函数可以获取全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。若需要在小程序切后台后继续播放音频，需要在app.json中配置requiredBackgroundModes属性。开发版和体验版上可以直接生效，正式版还需通过审核。背景音乐的实现本项目案例讲解了新闻列表页、详情页面创建，列表页与详情页的数据对接。新闻列表页嵌入了列表