标题可能描述的不是很清楚。整个需求是这样。从别人的小程序中点击跳转到我们的小程序的问题列表项目。传入的参数是不同的。想查找哪一条问题,根据对方传递的参数,我们这里展示相应的问题item项,并且,只有对方想看到的问题项是自动展开的,其他的是关闭的。同时因为问题项比较多,对方小程序过来查看某一条问题item项的时候,最好直接定位到当前页面的正中央,提升用户的体验。
下面是我的实现方法:
查看了百度小程序的官方文档。和对方商量好,在path中传递要看的item问题项参数。对方跳转到我的小程序使用的方法是:
对方小程序
swan.navigateToSmartProgram({
appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c', // 要打开的小程序 App Key
path: 'pages/quesstion/quesstion?item=3', // 打开的页面路径,?后面是传递过来的参数
success: res => {
console.log('navigateToSmartProgram success', res);
},
fail: err => {
console.log('navigateToSmartProgram fail', err);
}
});
我的小程序中实现
如果在path中传递参数,我可以在quesstion页面的onLoad中进行接收,也可以在 App.onLaunch、App.onShow中获取到参数。但是对方如果使用extraData。那我就只能在app.js 中的App.onLaunch(),App.onShow() 中获取到这份数据。
我这里是在quesstion页面的onLoad中进行接收的。
// quesstion.js文件
onLoad: function (options) {
let that = this
console.log(options)
const item = options.item
let questionItem;
let height = 0;
switch (item) {
case '0': questionItem = 'time'; break;
case '1': questionItem = 'etc'; height = 50; break;
case '2': questionItem = 'debitCard'; height = 50; break;
case '3': questionItem = 'photo'; height = 50; break;
case '4': questionItem = 'discount'; height = 100; break;
case '5': questionItem = 'dian'; height = 500; break;
case '6': questionItem = 'over'; height = 500; break;
case '7': questionItem = 'tong'; height = 500; break;
case '8': questionItem = 'dao'; height = 500; break;
case '9': questionItem = 'refund'; height = 1520; break;
}
that.setData({
[questionItem]: true // 动态的设置data中的值。控制当前item的展开与闭合
})
// 动态的将页面定位到当前item最中间位置,用户可以很方便的看到,不用再次滑动查找。
swan.pageScrollTo({
scrollTop: height,
duration: 300,
success: res => {
console.log('pageScrollTo success', res);
},
fail: err => {
console.log('pageScrollTo fail', err);
}
});
},
测试方法
我们无法直接得知是哪个小程序要跳转到我们的小程序。所以只能在页面的编译模式中传递参数来模拟
如下图所示:
测试打开页面效果图:
页面直接展开相应的item项,并且直接定位到固定的位置: