第6章 莫凡商城的商品详情页设计
第6章莫凡商城的商品详情页设计
假如用户正在寻找一件适合夏季的时尚连衣裙，打开手机上的微信小程序电商平台，浏览了不少商品后，发现一款特别吸引人的裙子。该
用户想更全面地了解它，点击进入详情页，惊喜地发现这个小程序为该商品提供了音频和视频介绍。点击播放按钮，立刻听到了专业的解
说，介绍了裙子的面料、剪裁和穿搭技巧。同时，视频中展示了模特身穿裙子的效果，用户能直观地看到裙子的外观和质感。通过微信小
程序的音频和视频功能，该用户获得了全面的商品信息。
莫凡商城商品详情页的实现会用到页面间数据传递及媒体相关组件和 API，主要实现商品详情页、商品加入购物车功能、购物车页面。
6.1使用AI编程工具学习在页面间传递数据
在图书商品列表页面中要查看图书商品的详情，需要将图书商品的id传递给商品详情页，在商品详情页中根据图书商品的id来获取图书商品的
具体信息。那么如何在页面间传递数据呢？
下面来实现将图书商品id传递给商品详情页的功能。
（1）在app.json文件里添加商品详情页面路径 “pages/goodsDetail/goodsDetail”。
（2）通过通义灵码，实现将图书商品的id传递给商品详情页，在商品详情页中根据图书商品的id来获取图书商品的具体信息。打开通义灵
码，输入以下内容并发送，如图6.1所示。
图6.1 发送需求
微信小程序中，在图书商品列表页面中要查看图书商品的详情，需要将图书商品的id传递给商品详情页，在商品详情页中根据图书商品的id
来获取图书商品的具体信息。那么如何在页面间传递数据呢？
（3）通义灵码给出了完整的实现步骤，实现了在页面间传递数据以及通过传递过来的id获取对应商品的详细信息，如图6.2、图6.3所示。
图6.2 通义灵码生成图书商品列表页面
图6.3 通义灵码生成商品详情页
图书商品列表的WXML代码如下：
<view class="book-list">
<block wx:for="{{books}}" wx:key="id">
<view class="book-item" bindtap="navigateToDetail" data-id="{{item.id}}">
<text>{{item.title}}</text>
</view>
</block>
</view>
图书商品列表的JS代码如下：
Page({
data: {
books: [
{ id: 1, title: '图书1' },
{ id: 2, title: '图书2' },
{ id: 3, title: '图书3' }
]
},
navigateToDetail: function(e) {
const bookId = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/bookDetail/bookDetail?id=' + bookId
});
}
});
图书商品详情的WXML代码如下：
<view class="book-detail">
<text>{{book.title}}</text>
<text>{{book.author}}</text>
<text>{{book.description}}</text>
</view>
图书商品详情的JS代码如下：
Page({
data: {
book: {}
},
onLoad: function(options) {
const bookId = options.id;
this.fetchBookDetails(bookId);
},
fetchBookDetails: function(bookId) {
// 模拟API调用
setTimeout(() => {
const book = {
id: bookId,
title: '图书标题',
author: '作者',
description: '图书描述'
};
this.setData({ book });
}, 1000);
}
});
对于通义灵码生成的代码，开发者可以根据自己的实际需求修改，实现在页面间传递数据。
6.2媒体组件及媒体API的应用
微信小程序经常需要实现播放音频、播放视频、相机拍照、实时音视频播放、实时音视频录制等功能。其中，可以通过audio组件及音频
API实现音频播放功能，通过video组件及视频API实现视频播放功能，通过camera组件及相机API实现相机拍照功能，通过live-player组件实
现实时音视频播放功能，通过live-pusher组件实现实时音视频录制功能。本节将详细介绍媒体组件及媒体API的应用。
6.2.1 音频组件audio及音频API1
．audio组件
audio组件需要有唯一的id，根据id使用 wx.createAudioContext('myAudio')创建音频播放的环境，从基础库
1.6.0版本开始，该接口不再维护，建议使用能力更强的 wx.createInnerAudioContext()接口。audio组件的常用属性如表6.1所
示。
表6.1 audio组件的常用属性属性类型默认值说明idstringaudio组件的唯一标识符srcstring要播放
的音频的资源地址loopbooleanfalse指定是否循环播放controlsbooleantrue指定是否显示默认控件posterstring默认
控件上音频封面的图片资源地址，如果controls的属性值为false，则设置poster无效namestring未知音频默认控件
上的音频名字，如果controls的属性值为false，则设置name无效authorstring未知作者默认控件上的作者名字，如
果controls的属性值为false，则设置author无效binderroreventhandle当发生错误时触发error事件，detail =
{errMsg: MediaError.code}，MediaError.code为错误码：1表示获取资源被用户禁止，2表示网络错误，3表示解
码错误，4表示不合适资源bindplayeventhandle当开始/继续播放时触发play事件
2．音频API
从基础库1.6.0版本开始，wx.createAudioContext()接口停止维护，建议使用wx.createAudio Context()接口替代。wx.createAudioContext()
创建AudioContext对象支持以下方法。
- AudioContext.pause()：暂停音频。
- AudioContext.play()：播放音频。
- AudioContext.seek()：跳转到指定位置，position的单位为秒。
- AudioContext.setSrc()：设置音频地址。
示例代码如下：
<!-- audio.wxml -->
<audio poster="{{poster}}"name="{{name}}"author="{{author}}"src="
{{src}}"id="myAudio "controlsloop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14s</button>
<button type="primary" bindtap="audioStart">回到开头</button>
// audio.js
Page({
onReady: function (e) {
// 使用wx.createAudioContext()获取audio上下文context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_ age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4 af4b12b3cd9337d5e7&uin=
346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858 BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromta
g=46',
},
audioPlay: function () {//绑定的播放音频事件
this.audioCtx.play()
},
audioPause: function () {//绑定的暂停音频事件
this.audioCtx.pause()
},
audio14: function () {//指定多少秒开始播放
this.audioCtx.seek(14)
},
audioStart: function () {//从头播放
this.audioCtx.seek(0)
}
})
音频播放界面效果如图6.4所示。
图6.4 音频播放界面效果
6.2.2 视频组件video及视频API1
．video组件
video组件是用来播放视频的组件，可以控制是否显示默认播放控件（“播放/暂停”按钮、播放进度条、时间），还可以发送弹幕信息等。
video组件的默认宽度为300px、高度为225px，需要通过WXSS设置 width和height来调整。video组件的常用属性如表6.2所示。
表6.2 video组件的常用属性属性类型默认值说明srcstring要播放的视频的资源地址
durationnumber指定视频时长controlsbooleantrue指定是否显示默认播放控件（“播放/暂停”按钮、播放进度条、
时间）danmu-listobjectarray弹幕列表danmu-btnbooleanfalse指定是否显示弹幕按钮。只在初始化时有效，不能
动态变更enable-danmubooleanfalse指定是否展示弹幕。只在初始化时有效，不能动态变更autoplaybooleanfalse
指定是否自动播放loopbooleanfalse指定是否循环播放mutedbooleanfalse指定是否静音播放initial-timenumber0指
定视频初始播放位置page-gesturebooleanfalse在非全屏模式下，是否开启亮度与音量的调节手势（已废弃，见
vslide-gesture）bindplayeventhandle开始/继续播放时触发play事件bindpauseeventhandle暂停播放时触发pause
事件bindendedeventhandle播放到末尾时触发ended事件
示例代码如下：
<view class="page-body">
<view class="page-section tc">
<video
id="myVideo"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?
filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e002 04012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd9302045
7e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
binderror="videoErrorCallback"
danmu-list="{{danmuList}}"
enable-danmu
danmu-btn
show-center-play-btn='{{false}}'
show-play-btn="{{true}}"
controls
picture-in-picture-mode="{{['push', 'pop']}}"
bindenterpictureinpicture='bindVideoEnterPictureInPicture'
bindleavepictureinpicture='bindVideoLeavePictureInPicture'
></video>
<view style="margin: 30rpx auto" class="weui-label">弹幕内容</view>
<input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
<button style="margin: 30rpx auto" bindtap="bindSendDanmu"
class="page-body-button" type="primary" formType="submit">发送弹幕</button>
<navigator style="margin: 30rpx auto" url="picture-in-picture"
hover-class="other-navigator-hover">
<button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式 </button>
</navigator>
</view>
</view>
function getRandomColor() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length === 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onShareAppMessage() {
return {
title: 'video',
path: 'page/component/pages/video/video'
}
},
onReady() {
this.videoContext = wx.createVideoContext('myVideo')
},
onHide() {
},
inputValue: '',
data: {
src: '',
danmuList:
[{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
}, {
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}],
},
bindInputBlur(e) {
this.inputValue = e.detail.value
},
bindButtonTap() {
const that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front', 'back'],
success(res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindVideoEnterPictureInPicture() {
console.log('进入小窗模式')
},
bindVideoLeavePictureInPicture() {
console.log('退出小窗模式')
},
bindPlayVideo() {
console.log('1')
this.videoContext.play()
},
bindSendDanmu() {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
videoErrorCallback(e) {
console.log('视频错误信息:')
console.log(e.detail.errMsg)
}
})
视频播放界面效果如图6.5所示。
图6.5 视频播放界面效果
2．视频API
可以使用wx.createVideoContext()创建VideoContext对象。
VideoContext对象提供以下方法。
- VideoContext.play()：播放视频。
- VideoContext.pause()：暂停视频。
- VideoContext.stop()：停止视频。
- VideoContext.seek()：跳转到指定位置。
- VideoContext.sendDanmu()：发送弹幕。
- VideoContext.playbackRate()：设置倍速播放。
- VideoContext.requestFullScreen()：进入全屏。
- VideoContext.exitFullScreen()：退出全屏。
- VideoContext.showStatusBar()：显示状态栏，仅在iOS全屏下有效。
- VideoContext.hideStatusBar()：隐藏状态栏，仅在iOS全屏下有效。
- wx.chooseVideo()：拍摄视频或从手机相册中选择视频。
- wx.saveVideoToPhotosAlbum()：保存视频到系统相册，支持MP4视
频格式，调用前需要用户授权scope.writePhotosAlbum。
6.2.3 相机组件camera及相机API1
．camera组件
camera组件在使用的时候需要用户授权scope.camera。camera组件是由客户端创建的原生组件，它的层级是最高的，不能通过z-index控制
层级，可使用cover-view、cover-image覆盖，同一页面只能插入一个 camera组件，不能在scroll-view、swiper、picker-view、movable-view
中使用camera组件。camera组件的属性如表6.3所示。
表6.3 camera组件的属性属性类型默认值说明modestringnormal应用模式，只在初始化时有效，
不能动态变更。normal为相机模式，scanCode为扫码模式resolutionstringmedium分辨率，不支持动态修改。low
为低，medium为中，high为高device-positionstringback前置或后置，值分别为front、backflashstringauto闪光
灯。auto为自动，on为打开，off为关闭，torch为常亮frame-sizestringmedium指定期望的相机帧数据尺寸。small
为小尺寸帧数据，medium为中尺寸帧数据，large为大尺寸帧数据bindinitdoneeventhandle相机初始化完成时触
发bindscancodeeventhandle扫码识别成功时触发。仅在mode="scanCode"时生效bindstopeventhandle摄像头非
正常终止时触发（如退出后台等情况）binderroreventhandle用户不允许使用摄像头时触发
示例代码如下：
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height:
300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
Page({
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
2．相机API
可以使用wx.createCameraContext()创建CameraContext对象， CameraContext与页面内唯一的camera组件绑定，操作对应的camera
组件。CameraContext对象提供以下方法。
- CameraContext.onCameraFrame()：获取摄像头实时帧数据。
- CameraContext.takePhoto()：拍摄照片。
- CameraContext.startRecord()：开始录制。
- CameraContext.stopRecord()：结束录制。
- CameraFrameListener是CameraContext.onCameraFrame()返回的监
听器，Camera Frame Listener.start()用于开始监听帧数据， CameraFrameListener.stop()用于停止监听帧数据。
6.2.4 实时音视频播放组件live-player
live-player组件为实时音视频播放组件，针对特定类目开放，需要先通过类目审核，再在小程序管理后台中通过“设置”→“接口设置”命令开通
该组件的使用权限。目前支持的类目有社交（直播）、教育（在线视频课程）、医疗（互联网医院、公立医疗机构、私立医疗机构）、汽车
（汽车预售服务）、工具（视频客服）、政务⺠生（所有二级类目）、金融（银行、信托、基金、证券、期货投资咨询、保险、征信业务、新
三板信息服务平台、股票信息服务平台、消费金融）、政府主体账号、政务⺠生（公证）、IT科技（多方通信、音视频设备）、房地产服务
（房地产营销）、商业服务（公证）。live-player组件的属性如表6.4所示。
表6.4 live-player组件的属性属性类型默认值说明srcstring音视频地址，目前仅支持FLV、RTMP
格式modestringlive指定实时音视频的播放模式，分为live（直播）、RTC（实时通话）autoplaybooleanfalse指定
是否自动播放mutedbooleanfalse指定是否静音orientationstringvertical画面方向，可选值有vertical、
horizontalobject-fitstringcontain填充模式，可选值有contain、fillCropbackground-mutebooleanfalse指定进入后
台时是否静音（已废弃，默认进入后台静音）min-cachenumber1最小缓冲区，单位为smax-cachenumber3最大
缓冲区，单位为ssound-modestringspeaker声音输出方式，speaker为扬声器、ear为听筒auto-pause-if-
navigatebooleantrue当跳转到其他小程序页面时，是否自动暂停本页面的实时音视频播放auto-pause-if-open-
nativebooleantrue当跳转到其他微信原生页面时，是否自动暂停本页面的实时音视频播放
bindstatechangeeventhandle播放状态变化事件，detail = {code}bindfullscreenchangeeventhandle全屏变化事
件，detail = {direction, fullScreen}bindnetstatuseventhandle网络状态通知，detail = {info}
示例代码如下：
"statechange" binderror= "error" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
})
6.2.5 实时音视频录制组件live-pusher
live-pusher组件为实时音视频录制组件，它的使用需要用户授权 scope.camera、scope.record，且针对特定类目开放，需要先通过类目
审核，再在小程序管理后台中通过“设置”→“接口设置”命令开通该组件的权限。现在支持的类目有社交（直播）、教育（在线视频课程）、医
疗（互联网医院、公立医疗机构、私立医疗机构）、汽车（汽车预售服务）、工具（视频客服）、政务⺠生（所有二级类目）、金融（银行、信
托、基金、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台、消费金融）、政府主体账号、政务⺠生（公
证）、IT科技（多方通信、音视频设备）、房地产服务（房地产营销）、商业服务（公证）。live-pusher组件的属性如表6.5所示。
表6.5 live-pusher组件的属性属性类型默认值说明urlstringBack推流地址。目前仅支持FLV、
RTMP格式modestring录制模式，可选值有SD（标清）、HD（高清）、FHD（超清）、RTC（实时通话）
autopushbooleanfalse指定是否自动推流enableVideoCustomRenderbooleanfalse自定义渲染，允许开发者自行处
理所采集的视频帧mutedbooleanfalse指定是否静音enable-camerabooleantrue指定是否开启摄像头auto-
focusbooleantrue指定是否自动聚焦orientationstringvertical画面方向，可选值有vertical、
horizontalbeautynumber0美颜whitenessnumber0美白。取值范围为0〜9，0表示关闭aspectstring9
: 16宽高比，可选值有3 : 4、9 : 16min-bitratenumber200最小码率max-bitratenumber1000最大码率audio-
qualitystringhigh高音质（48kHz）或低音质（16kHz），值分别为high、lowwaiting-imagestring进入后台时推流的
等待画面waiting-image-hashstring等待画面资源的MD5值zoombooleanfalse指定可否调整焦距device-
positionstringfront前置或后置，值分别为front、backbackground-mutebooleanfalse指定进入后台时是否静音
mirrorbooleanfalse设置推流画面是否镜像，产生的效果在live-player中反映remote-mirrorbooleanfalse同mirror属
性，后续mirror将废弃local-mirrorstringauto控制本地预览画面是否镜像，可选值有auto、enable、disableaudio-
reverb-typenumber0音频混响类型：0表示关闭、1表示KTV、2表示小房间、3表示大会堂、4表示低沉、5表示洪
亮、6表示金属声、7表示磁性bindstatechangeeventhandle状态变化事件，detail =
{code}bindnetstatuseventhandle网络状态通知，detail = {info}binderroreventhandle渲染错误事件，detail =
{errMsg, errCode}bindbgmstarteventhandle背景音开始播放时触发bindbgmprogresseventhandle背景音进度变化
时触发，detail = {progress, duration}bindbgmcompleteeventhandle背景音播放完毕时触发
示例代码如下：
<live-pusher url="https://domain/push_stream" mode="RTC" autopush bindstatechange= "statechange" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-pusher code:', e.detail.code)
}
})
6.3项目实战：使用AI编程工具辅助实现商品详情
页1
．任务目标
实现商品详情页，巩固海报轮播效果设计、页面布局设计、页签切换效果设计、动态获取数据、动态数据绑定这些常用知识点。
2．任务实施
（1）在app.json文件里添加商品详情页路径 “pages/goodsDetail/goodsDetail”。
（2）打开通义灵码，输入以下内容并发送，如图6.6所示。
图6.6 发送需求
微信小程序实现商品详情页，可以分解为海报轮播效果布局设计、商品详情布局设计、图书详情与出版信息页签切换、动态获取商品详情
页数据、动态数据绑定商品详情页。
3．AI生成
通义灵码根据需求生成了实现商品详情页的代码，分为了5个模块，实现了海报轮播功能、商品详情布局、图书详情与出版信息页签切换功
能以及动态获取图书详情数据功能，如图6.7所示。
图6.7 通义灵码生成商品详情页
4．优化建议
在运行AI生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。
- 对需求进行更加细致的描述后再次进行生成。
- 分模块进行生成，使得结构更加清晰。
- 根据自己的实际需求手动调整代码，美化页面。
- 把AI编程工具生成的示例接口替换成真实接口，把示例数据替换成真
实数据。
5．页面展示
代码经过优化后，运行代码，页面样式如图6.8所示。
图6.8 商品详情页
6.4项目实战：使用AI编程工具辅助实现商品加入
购物车功能1
．任务目标
实现商品加入购物车功能，巩固导航跳转、购物车页面布局、动态数据获取、动态商品加入购物车等知识。
2．任务实施
（1）在app.json文件里添加购物车页面路径 “pages/shoppingcart/shoppingcart”。
（2）实现跳转到购物车页面函数、商品加入购物车函数、查看购物车商品列表函数。打开通义灵码，输入以下内容并发送，如图6.9所示。
图6.9 发送需求
在商品详情页实现将商品加入购物车功能、显示添加到购物车的商品的数量功能、点击跳转购物车页面功能，只给出JS部分即可，模拟接
口获取数据。
3．AI生成
通义灵码根据需求生成了实现商品加入购物车功能的代码，实现了显示添加到购物车中商品的数量功能、点击跳转购物车页面功能，如图
6.10所示。
图6.10 通义灵码生成商品加入购物车
4．优化建议
在运行AI生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下两个方面进行优化。
- 根据实际需求检测生成的函数功能是否正确，有问题的话需要手动调
整或者继续让AI编程工具进行优化。
- 把示例接口替换成真实的购物车列表接口，把接口返回的数据渲染到
购物车页面。
5．页面展示
经过优化后，运行代码，点击“加入购物车”按钮，界面样式如图6.11所示。
图6.11 加入购物车成功效果
6.5项目实战：使用AI编程工具辅助实现购物车页
面1
．任务目标
实现购物车列表，巩固商品列表动态循环渲染及动态添加或减少商品数量等知识。
2．任务实施
打开通义灵码，输入以下内容并发送，如图6.12所示。
图6.12 发送需求
微信小程序实现购物车页面，用来显示购物车商品列表，包括商品名称、商品价格、购买数量，最下面显示商品总价和“去结算”按钮，使用
radio-group组件，可以选择多个商品，价格会跟着变化，每个被选中的商品可以增加或减少购买数量，最下面的总价也会跟着发生变化。
3．AI生成
通义灵码根据需求生成了实现购物车页面的代码，包括WXML布局、 WXSS样式及JS数据绑定，实现了购物车中商品列表展示、商品数量的
增减、总价计算及购物车商品的选中功能，如图6.13所示。
图6.13 通义灵码生成购物车页面
4．优化建议
在运行AI生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。
- 对需求进行更加细致的描述后再次进行生成，例如详细描述radio-
group组件的样式、数量增减函数的逻辑等。
- 分模块进行生成，可以先完成基本的样式搭建，再使用AI编程工具实
现商品的选中事件和数量增减事件。
- 根据自己的实际需求手动调整代码，如调整不同商品的间距、自定义
radio组件的样式，使页面保持美观。
5．页面展示
代码经过优化后，运行代码，页面样式如图6.14所示。
图6.14 购物车列表
6.6 分享与转发API的应用
通常，开发者希望转发到群聊的小程序被二次打开的时候能够使用户获得一些信息，如群的标识。调用wx.showShareMenu()并且设置
withShareTicket为true，可以实现当用户将小程序分享到微信群聊后，其他群成员通过该分享链接打开小程序时，系统会生成一个
shareTicket。开发者可以通过调用wx.getShareInfo()接口并传入这个 shareTicket，从而获取到分享的相关信息，例如分享者、分享群等信
息。
微信小程序提供了以下4个与转发相关的API。
- wx.showShareMenu()：显示当前页面的“转发”按钮。
- wx.hideShareMenu()：隐藏“转发”按钮。
- wx.updateShareMenu()：更新转发属性。
- wx.getShareInfo()：获取转发的详细信息。
通过onShareAppMessage()监听事件来实现转发，监听用户点击页面内的“转发”按钮（button组件open-type="share"）或右上角菜单中“转
发”命令的行为，并自定义转发内容。onShareAppMessage()返回值的属性如表6.6所示。
表6.6 onShareAppMessage()返回值的属性属性默认值说明title当前小程序名称转发标题
path当前页面path，必须是以“/”开头的完整路径转发路径imageUrl使用默认截图自定义图片路径，可以是本地文
件路径、代码包文件路径或者网络图片路径；支持PNG及JPG格式；显示图片的长宽比是5:4promise如果该参数
存在，则以resolve结果为准，如果3s内不resolve，分享会使用默认参数
示例代码如下：
Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内的“转发”按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})
1．实现将商品详情页分享给好友的功能
在goodsDetail.js文件里添加分享监听事件，示例代码如下：
//用户点击右上角“转发给朋友”
onShareAppMessage: function (res) {
var goodsDetail = this.data.goodsDetail;
if (res.from === 'button') {
// 来自页面内的“转发”按钮
console.log(res.target)
}
return {
title: goodsDetail.goodsName,
path: 'pages/goodsDetail/goodsDetail?goodsId=' + this.data.goodsId
}
}
2．实现将商品详情页分享到朋友圈的功能
商品详情页允许被分享到朋友圈，需满足以下两个条件。
- 页面设置允许“转发给朋友”，实现onShareAppMessage()接口。
- 页面设置允许“分享到朋友圈”，可自定义标题、分享图片等，实现
onShareTimeline()接口。
示例代码如下：
//用户点击右上角“转发给朋友”
onShareAppMessage: function (res) {
var goodsDetail = this.data.goodsDetail;
if (res.from === 'button') {
// 来自页面内的“转发”按钮
console.log(res.target)
}
return {
title: goodsDetail.goodsName,
path: 'pages/goodsDetail/goodsDetail?goodsId=' + this.data.goodsId
}
},
//用户点击右上角“分享到朋友圈”
onShareTimeline: function () {
return {
title: '商品详情',
query: {
goodsId: this.data.goodsId
},
imageUrl: 'https:// ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓'
}
}