当前位置: 首页 > article >正文

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

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跳转到微信小程序的测试版,并在跳转过程中传递必要的参数进行测试和调试‌

http://www.kler.cn/a/284880.html

相关文章:

  • java操作ES(一)RestHighLevelClient(2)集成与demo
  • Linux学习笔记之组管理和权限管理
  • 【AI写作宝-注册安全分析报告-无验证方式导致安全隐患】
  • el-table 纵向垂直表头处理
  • Unity 网格模型及优化
  • 网络管理之---3种网络模式配置
  • 【Linux】06.Linux 下的编译器——gcc/g++
  • 【C++ 第十八章】C++11 新增语法(2)
  • vue3+el-tale封装(编辑、删除、查看详情按钮一起封装)
  • 【HarmonyOS 4.0】@ohos.router 页面路由
  • ★ 算法OJ题 ★ 力扣11 - 盛水最多的容器
  • sqlite3 数据插入效率
  • YOLOv8改进 | 模块缝合 | C2f融合卷积重参数化OREPA【CVPR2022】
  • Having trouble using OpenAI API
  • 回归预测|基于鹅GOOSE优化LightGBM的数据回归预测Matlab程序 多特征输入单输出 2024年优化算法
  • vue3本地运行错误集
  • 5.3 MySql实战
  • Xilinx FPGA在线升级——升级思路
  • 鸿蒙开发5.0【基于Swiper的页面布局】
  • LeetCode 热题100-9 找到字符串中所有字母异位词
  • vscode 未定义标识符 “uint16_t“C/C++(20) 但是可以顺利编译
  • Java算法—插入排序(Insertion Sort)
  • 一种导出PPT到MP4的方法
  • 大数据测试怎么做,数据应用测试、数据平台测试、数据仓库测试
  • ​T​P​一​面​
  • 系统编程-消息队列