微信小程序 (7).pptx

第7章
莫凡商城商品详情页设计
微信小程序开发项目教程（慕课版）
工业和信息化人才培养规划教材
人 民 邮 电 出 版 社
莫凡商城商品详情页设计用来实现商品详情页功能、商品加入购物车功能、商品列表功能、商品详情页分享与转发功能，会用到页面间传递数据及媒体相关组件和媒体相关API 的使用。
本章导读
The chapter’s introduction
目录导航
　页面间传递数据
　媒体组件及媒体API 的应用
　项目实战：任务13—实现商品详情页功能
　项目实战：任务14—实现商品加入购物车功能
　项目实战：任务15—实现购物车列表功能
　商品详情页分享与转发API 的应用
　小结
页面间传递数据
在首页图书商品列表页面中查看图书商品的详情，需要将图书商品的id 传递给详情页，在商品详情页根据图书商品的id 来获取图书商品的具体信息，那么如何在页面间传递数据呢？
文件里添加意见反馈界面路径“pages/goodsDetail/goodsDetail”。
首页业务逻辑处理文件里，添加跳转商品详情页绑定函数，并且把商品id 作为参数携带，示例代码如下。
var app = getApp();
var host = ;
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
imgUrls: [
"/pages/images/haibao/",
"/pages/images/haibao/",
"/pages/images/haibao/"
],
页面间传递数据
hotList:[ ], //热门书籍列表
spikeList:[ ], //畅销书籍列表
bestSellerList:[ ], //秒杀时刻列表
host: host
},
onLoad: function (options) {
var page = this;
();
();
},
getBannerList: function () {
var page = this;
({
url: host + '/api/banner/getBannerList?type=0',
method: 'GET',
data: { },
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var code = ;
var list = ;
if (code == '0000') {
var code = ;
var list = ;
if (code == '0000') {
var imgUrls = new Array();
for (var i = 0; i < ; i++) {
(host + "/" + list[i].url);
}
({ imgUrls: imgUrls });
}
}
}
页面间传递数据
})
},
getBookList: fu