最近有小伙伴在开发小程序商城项目，问到关于如何实现点击产品，跳转到详情页请求不同的产品数据，详情页的样式结构可以是一样的，但是产品数据肯定不一样，因此这篇文章主要讲解跨页面数据传递的实现原理。
如图所示是接下来需要完成的效果：
详情页请求不同数据的实现原理
页面结构：2个，index(首页)以及details(详情页)，首页是产品列表，点击产品后进入对应的详情页。
首页的wxml结构:
首页的js数据：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
//产品列表数据；
brand: ['/img/prolist01.png', '/img/prolist02.png','/img/prolist03.png'],
}
})
对于详情页请求数据，核心在于点击对应产品然后请求对应的产品数据，因此这里的navigator组件跳转的url至关重要，这里的/pages/details/details?goodsId={{index}是模拟了后台提供的数据接口，后面的goodsId作为产品的辨识符，当点击之后可以获取到当前点击的是哪个产品，以供详情页进行请求数据。
详情页wxml结构：
产品名称：{{showTitle}}
产品图片：
产品描述：
{{showDesc}}
详情页js数据：
// pages/details/details.js
Page({
/**
* 页面的初始数据
*/
data: {
showTitle: '', //详情页显示标题；
showImg: '', //详情页显示图片；
showDesc: '', //详情页显示描述；
//下面是先进行存储的不同产品数据；
productsList: [
{ title: '我是产品名称1', img: '/img/prolist01.png', desc: '产品1非常好，balabala~~~' },
{ title: '我是产品名称2', img: '/img/prolist02.png', desc: '产品2非常好，balabala~~~' },
{ title: '我是产品名称3', img: '/img/prolist03.png', desc: '产品3非常好，balabala~~~'},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var goodsId = options.goodsId;
this.setData({
showTitle: this.data.productsList[goodsId].title,
showImg: this.data.productsList[goodsId].img,
showDesc: this.data.productsList[goodsId].desc,
});
}
})
因仅做demo演示，因此案例都是采用了本地数据，实际项目中需要通过ajax进行请求服务器中的产品数据。
详情页请求数据的重点在于生命周期函数，onLoad函数，它可以在页面加载的时候进行触发，并可以通过参数获取到跳转链接上面的辨识符，也就是通过onLoad函数中的options，获取到了刚才在index.wxml页面url中的辨识符：goodId；
onLoad: function (options) {
var goodsId = options.goodsId;
}
通过它可以获取到对应的产品数据，再将数据进行修改更新到详情页结构details.wxml即可。
this.setData({
showTitle: this.data.productsList[goodsId].title,
showImg: this.data.productsList[goodsId].img,
showDesc: this.data.productsList[goodsId].desc,
});
总结
本案例中跨页面传递数据主要是利用了URL传值，在另外一个页面中接收，并将数据渲染到页面中，这个过程就需要用到生命周期函数：onLoad函数。
demo源码下载地址：
链接：https://pan.baidu.com/s/12qdQLDdCXEkgNLBb2ItHkQ
提取码：uayy