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