微信小程序扫码进入小程序参数问题

需求:扫描二维码进入小程序的详情页面,目录页面,页面请求都需要带上参数及需要验证用户授权。

既然是扫码进入的,那么我第一反应肯定是在请求拦截里做操作了,不然如何判断他是什么怎么进来的。一进入页面,肯定会有请求,我先调用一下wx.getLaunchOptionsSync()获取当前的场景值,看看他是怎么进来的。如果是扫码进来的, 我要记录起当前的url以及query参数。

   // 获取场景URL
    let jumpUrl = ''
    // 获取场景ID
    const option = wx.getLaunchOptionsSync()
    
    // 1011 二维码  1012 长按图片识别  1013 扫描相册二维码
    if(option.scene === 1011 || option.scene === 1012 || option.scene === 1013 || option.scene === 1047 || option.scene === 1048 || option.scene === 1049) {
        if(JSON.stringify(option.query) !== '{}') {

            jumpUrl = encodeURIComponent(`/${option.path}?${decodeURIComponent(option.query.scene)}`)
        }
    }

这里有两个注意的点:

1、option.query.scene 获取的参数需要用decodeURIComponent解码,解码出来的值是跟你自己写的参数会不一样的。
比如:一般你页面传值的url是: '/pages/detail/detail?id=3', 解码出来后的参数是'/pages/detail/detail?id=7627a3dc69a88c7t'这种格式,解码出这个之后,就拿这个去试试能否请求成功。

2、因为页面需要授权,你要把记录的链接「 '/pages/detail/detail?id=7627a3dc69a88c7t'」带到登录页去授权。如果直接带过去,会出现参数丢失问题,所以需要encodeURIComponent()加密一下

然后就可以带到登录页去了:
wx.reLaunch({ url: '/pages/login/login?redirect=' + '/pages/detail/detail?id=7627a3dc69a88c7t', })

接下来就是获取参数的问题。

登录页获取参数,需要解码

onLoad: function (options) {
    // 获取url
    if(options.redirect) {
        const url = decodeURIComponent(options.redirect)
        console.log('url', url)
         // 授权完成后跳转回去
        this.setData({ redirect: url })
    }
}

详情页的参数
因为扫码进来的链接是这样的
'/pages/detail/detail?scene=id=7627a3dc69a88c7t',所以在解码之后,还需要对scene做操作,有scene时,说明是扫码进来的,没有时,说明是页面跳进来的

定义一个获取参数的方法

/**
 * 获取链接的参数
 * @param {*} name 参数名
 * @param {*} url 链接
 * 如:getUrlParam('id', url)
 * @returns 
 */
export var getUrlParam = function (name, url) {
    if (!url) url = location.href;
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var returnValue;
    for (var i = 0; i < paraString.length; i++) {
        var tempParas = paraString[i].split('=')[0];
        var parasValue = paraString[i].split('=')[1];
        if (tempParas === name)
            returnValue = parasValue;
    }
    if (!returnValue) {
        return "";
    } else {
        if (returnValue.indexOf("#") != -1) {
            returnValue = returnValue.split("#")[0];
        }
        return returnValue;
    }
}

引入之后,获取参数

onLoad(options) {
    // console.log(options.scene)  id%3D2
    let scene = decodeURIComponent(options.scene)

    // console.log(options.scene)  id=2
    let id = getUrlParam('id', scene)
},

完。

posted @ 2022-05-12 17:24  Z、yx  阅读(2334)  评论(0编辑  收藏  举报