小程序内嵌H5页面（传递参数，跳转，小程序配置）

需求：在小程序内部扫码和微信原生扫码都跳转到h5页面进行签到，签到完成之后返回小程序指定页面。

首先要做的是用微信原生扫码之后，直接跳转到h5页面实现功能。

二维码中什么内容才能让微信识别并且跳转指定的小程序呢，只有在后台进行配置

一、配置微信小程序后台

扫普通链接二维码打开小程序

首先要保证微信的扫码功能可以识别你的小程序，并且可以进行跳转，所以需要进行配置，可查看微信开放文档。

1.首先在后台点击开发管理，再下拉找到扫普通链接二维码打开小程序

然后添加新的规则

2.二维码规则文档中也有详细说明规则，要注意的是携带参数的形式

规则中只用写你是用哪种规则携带参数即可，不用将你功能内需要的参数全配置进去，也就是写一个参数的形式即可

例如：https://qas.***?id=

告诉平台你是用？来拼接参数的

3.其次是范围和跳转页面以及测试链接的形式

功能页面也就是扫码后要跳转的小程序页面是哪里，要提前在代码中路由配置好

测试范围也就是面向不同的人群进行配置，发正式记得勾选到线上版本。

测试链接主要用于自己开发与产品测试，推荐去将这里的链接生成二维码然后进行测试。

4.配置文件

点击下载文件后要到对应的服务器中配置，测试和正式都要进行配置，否则扫码无法跳转

配置业务域名

如果需要再微信小程序中使用web-view内嵌h5页面必须要进行业务域名的配置，同样将校验的文件放到需要配置的域名的服务器中，让微信可以校验到，测试环境需要内网时可能要暂时开通外网，微信校验完可关闭。

二、微信开发者工具如何测试

1.首先，如果没有配置好测试环境的业务域名时，需要打开详情，并且勾选不校验

这样配置后可以扫码跳转配置好的二维码

2.编译模式

普通编译，也就是正常打开小程序的流程

二维码编译，可以进行二维码识别，并且将参数给到开发平台

这里上传文件，上传我们填好的测试链接生成的二维码，可以将写死的参数放到启动参数中，模拟微信直接扫码的效果。

三、功能实现

1.获取二维码参数

首先用户在扫码后需要进行一键登录获取到手机号，用小程序的Api,但在获取之前要同意隐私政策。

之后获取到扫码后的参数

这段代码的目的是获取当前页面通过URL传递的参数。在uni-app中，当页面通过URL跳转打开时（比如扫描二维码），URL中的查询参数会被解析并存储在页面实例的 options 属性中。

获取到参数后进行解码，获取到活动的部分信息。但是这里还会获取到在微信后台配置时候的链接，例如https://abc.***?123,此时我们只需要123这个参数即可，至于前面的域名不需要，所以需要拿出参数

2.传递二维码参数到h5

此时拿到了传递的参数，现在在登陆后进行参数从微信小程序到h5页面的传递,如下，先判断环境，然后新城参数构建以及拼接URL，将参数拼接到要跳转的h5的页面链接后。params.hasOwnProperty(key) : 确保只处理对象自身的属性（排除原型链上的属性），encodeURI***ponent() : 对键和值进行URL编码，确保特殊字符（如空格、中文等）正确传输。

假设：

- params = { activityId: "123", type: "signin" }
- mobile = "13800138000"
- targetUrl = "https://example.***/sign-up"
执行后：
   queryParams 会包含： ["activityId=123", "type=signin"]
   添加手机号： ["activityId=123", "type=signin", "memberMobile=13800138000"]
   最终URL： "https://example.***/sign-up?activityId=123&type=signin&memberMobile=13800138000"

export function goCheckPage(params) {
    // 跳转H5页面
	let targetUrl;
    if (Config.apiUrl.includes('abc')) {
        // 测试环境
        targetUrl = 'https://abc.***/check';
    } else {
        // 正式环境
        targetUrl = 'https://efg.***/check';
    }
    
    // 构建参数字符串
    let queryParams = [];
    if (params) {
        for (const key in params) {
            if (params.hasOwnProperty(key) && key !== '__ob__') {
                queryParams.push(`${encodeURI***ponent(key)}=${encodeURI***ponent(params[key])}`);
            }
        }
    }
    
    // 拼接完整URL
    const fullUrl = queryParams.length > 0 ? `${targetUrl}?${queryParams.join('&')}` : targetUrl;
   
    // #ifdef H5
    window.location.href = fullUrl;
    // #endif
    // #ifdef APP-PLUS
    plus.runtime.openURL(fullUrl);
    // #endif
    // #ifdef MP
    wx.navigateTo({
        url: `/pages/index/skip_to?url=${encodeURI***ponent(fullUrl)}`
    });
    // #endif
}

3.返回小程序

之后就是h5页面接受到这些参数即可，值得一提的是完成签到后要返回小程序，需要wx插件

import wx  from 'weixin-js-sdk'
//返回小程序
wx.miniProgram.navigateBack({
        delta: 1
      });