微信小程序短链接接收参数详解_shorturl参数接收_uniapp小程序开发_普通二维码打开小程序
2025-01-18 11:25:26
在微信小程序的开发过程中，我们经常会遇到需要通过短连接接收参数的情况。短连接可以方便地在各种场景下进行分享和传播，同时接收参数可以实现个性化的页面展示和功能交互。本文将详细介绍微信小程序中短连接接收参
202

一、准备工作

  1. 注册微信小程序账号并创建一个小程序项目。
  2. 了解微信小程序的基本开发知识，包括页面结构、WXML、WXSS 和 JavaScript 等。
  3. 熟悉微信小程序的路由机制和页面跳转方法。

二、生成短连接

  1. 在微信公众平台后台，找到 “管理” 菜单下的 “开发管理” 功能。
  2. 选择 “扫普通链接二维码打开小程序”，并填写小程序的页面路径和参数。
  3. 复制链接去生成一个二维码

详细配置可以参考[扫普通链接二维码打开小程序详解_二维码微信小程序开发_普通二维码跳转小程序注意事项](https://www.lihuanting.com/blog/a/126)

例如，我们要生成一个跳转到小程序首页并携带参数id=123的短连接，可以在页面路径中填写/pages/index/index?id=123。

三、在小程序中接收参数

  1. 在小程序的页面生命周期函数中获取参数。
  2. 在onLoad函数中，可以通过options参数获取页面跳转时传递的参数。
  3. 例如：
Page({
  onLoad: function(options) {
          // 小程序分享跳转处理
        if (options?.share) {
            console.log("小程序分享,路径为" + options.path + "参数为" + options.query);
            // 小程序分享跳转处理
            // uni.navigateTo({
            //     url: "/" + options.path + "?" + options.query,
            // });
        } else if (options?.q) {
            // 小程序自动加密，需要解码
            const url = decodeURIComponent(options.q);
            const params = {};
            // 自定义参数拼接
            if (url.includes('?') && !url.includes('&')) {
                const queryStr = url.split('?')[1]
                const paramList = queryStr.split('=')
                if (paramList.length) {
                    params.query = {
                        cn: paramList[1],//会将第一参数转为cn
                    }
                }
            } else {
                const regex = /[?&]([^=#]+)=([^&#]*)/g;
                let match;
                while ((match = regex.exec(url))) {
                    params[match[1]] = match[2];
                }
            }
            
            console.log("二维码分享,路径为" + params.path + "参数为" + JSON.stringify(params.query), url);

            // 小程序分享跳转处理
            // uni.navigateTo({
            //     url: "/" + params.path + "?" + params.query,
            // });
            return params.query
        } else {
            // 未知参数
            console.log("未知参数");
            uni.showToast({
                title: "未知参数",
                icon: "none",
            });
        }
  }
});
  1. 使用参数进行页面展示或功能交互。
  2. 根据获取到的参数值，可以进行不同的页面展示或执行特定的功能。
  3. 例如，如果参数id代表一个商品的编号，可以根据这个编号请求商品数据并展示在页面上。

四、注意事项

  1. 参数的类型和格式需要在生成短连接和接收参数时保持一致。
  2. 如果参数是数字类型，在接收时需要进行类型转换。
  3. 例如：let id = parseInt(options.id);
  4. 对参数进行合法性校验，防止恶意参数的传入。
  5. 可以检查参数的格式、范围等是否符合预期。
  6. 考虑参数为空的情况，进行适当的处理。
  7. 如果参数可能为空，可以设置默认值或给出提示信息。

通过以上步骤，我们可以在微信小程序中方便地接收短连接传递的参数，实现更加灵活和个性化的功能。在实际开发中，可以根据具体需求进行更多的扩展和优化。

最新文章