从其他小程序跳转到当前小程序中,并按需展示item问题项并定位展示

标题可能描述的不是很清楚。整个需求是这样。从别人的小程序中点击跳转到我们的小程序的问题列表项目。传入的参数是不同的。想查找哪一条问题,根据对方传递的参数,我们这里展示相应的问题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项,并且直接定位到固定的位置:
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值