【通过h5作为中转页跳转到微信小程序】

WorkAndDebugger

于 2024-08-30 16:23:10 发布

阅读量253

点赞数 3

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/Xiang_Gong_Ya_/article/details/141720959

版权

微信小程序专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1。从小程序跳转小程序内部页面

<!DOCTYPE html>
<html>

<head>
    <title>H5跳转小程序</title>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

<body>

</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>


<script>
    var url = window.location.search;
    var params = new URLSearchParams(url);
    var id = params.get('id');
    wx.miniProgram.navigateTo({
        url: `/pages/index/index?id=${id}`
    });


</script>

</html>

2。从h5跳转到小程序页面

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>H5跳转小程序</title>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

<body>

</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>


<script>
    var url = window.location.search;
    var params = new URLSearchParams(url);
    var id = params.get('id');
    window.onload = function () {
        window.location.href = `weixin://dl/business/?appid=。。。&path=pages/index/index?query=id=${id}`;
     };

</script>

</html>

携带参数：地址后面通过query%3D参数，微信跳转参数使用=号或者&符号可能导致无法跳转，所以使用encode编码形式写即可

& 符号的encode编码为 %26

=符号的encode编码为 %3D

要跳转到微信小程序的测试版，你需要通过微信提供的明文scheme进行跳转，具体步骤如下：

 ‌配置小程序‌：首先，你需要在微信公众平台上进入小程序的设置，找到隐私设置，并配置明文scheme拉起小程序。在这里，你可以指定跳转的页面路径。
 如果你有多个测试页面需要跳转，可以使用分号隔开。
 
 ‌生成跳转链接‌：使用微信提供的明文scheme生成跳转链接。这个链接的格式通常是weixin://dl/business/?appid=你的小程序AppID&path=你的测试页面路径。
 其中，appid是你的小程序AppID，path是你想要跳转的测试页面的路径。
 
 ‌传递参数‌：如果需要在跳转时传递参数，可以在链接的query部分添加参数，例如query=参数名=参数值。
 这些参数可以在小程序的onLoad方法中被接收并处理。
 
 ‌测试调试‌：在开发过程中，你可能还需要传递调试参数，比如env_version，这可以帮助你在开发和调试阶段进行特定的操作。
 例如，你可以在链接中添加env_version=trial来进行调试。
 
 ‌使用跳转链接‌：在你的App中，使用上述生成的链接进行跳转。
 这可以通过调用系统的浏览器或者使用window.open方法实现，具体取决于你的应用类型和开发框架。
 
通过上述步骤，你可以实现从App跳转到微信小程序的测试版，并在跳转过程中传递必要的参数进行测试和调试‌