微信公众号开发之H5页面跳转到指定的小程序

深夜一点亮 發表於 2021-10-14 01:25:00

微信公众号开发之H5页面跳转到指定的小程序

<h2>前言：</h2>
　　最近公司有一个这样的需要，需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮。之前只知道小程序之间是可以相互跳转的，今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转了，下面就简单描述一下对接的流程。
<h2>微信公众号详细对接文档：</h2>
<blockquote>
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
</blockquote>
<h2>公众号关联小程序：</h2>
<blockquote>
注意：在对接跳转之前我们需要在需要跳转的小程序关联到我们的公众号中。公众号可以关联同一主体的小程序10个，不同主体的3个。
</blockquote>
1、进入公众号后台，路径：广告与服务——小程序—小程序管理—添加
<img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211014010043848-739634362.png" alt="" loading="lazy">
2、关联小程序—管理员微信扫码确认
<img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211014010156596-555172057.png" alt="" loading="lazy">
3、搜索小程序名称或APPID绑定
<img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211014010328673-2055959634.png" alt="" loading="lazy">
4、绑定成功等待小程序管理者同意
<img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211014010508700-1061264355.png" alt="" loading="lazy">
<h2>查看小程序原始id：</h2>
<blockquote>
小程序原始id，即小程序对应的以<code>gh_</code>开头的id
</blockquote>
找到关联成功的小程序，鼠标放入其中找到详情查看小程序原始id
<img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211014010907209-356304797.png" alt="" loading="lazy">
 <img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211014010922218-693307902.png" alt="" loading="lazy">
<h2>绑定JS接口安全域名：</h2>
<blockquote>
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
</blockquote>
<img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211012001900843-270589454.png" alt="" loading="lazy">
 <img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211012002006141-1002147130.png" alt="" loading="lazy">
<h2>微信JS-SDK的使用步骤，配置信息生成详细说明（.NET版）：</h2>
<blockquote>
https://www.cnblogs.com/Can-daydayup/p/11124092.html
</blockquote>
<h2 id="开放标签">跳转标签、前提条件和属性说明：</h2>
<h3 id="跳转小程序：wx-open-launch-weapp">跳转小程序：wx-open-launch-weapp</h3>
用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。
<h4 id="开放对象">开放对象</h4>
<ol>
<li>已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。</li>
<li>已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。</li>
</ol>
<h4 id="错误提示">错误提示</h4>
若跳转时出现以下页面，表示网页绑定的服务号或小程序无权限，请检查是否符合上述开放对象条件。
<img src="https://res.wx.qq.com/op_res/AVNO5G9YvNvN45ZU0budE1Xv6i1NfyHD-DYJnDyLxv6yjFVhwD_SqdzWxEKAtaPs" alt="无权限提示" width="380">
<h4 id="属性">属性</h4>
<div class="table-wrp">
<table style="height: 120px; width: 916px">
<thead>
<tr><th>名称</th><th>必填</th><th>默认值</th><th>备注</th></tr>
</thead>
<tbody>
<tr>
<td>username</td>
<td>是</td>
<td> </td>
<td>所需跳转的小程序原始id，即小程序对应的以<code>gh_</code>开头的id</td>
</tr>
<tr>
<td>path</td>
<td>否</td>
<td> </td>
<td>所需跳转的小程序内页面路径及参数（不填写的话默认跳转小程序首页）</td>
</tr>
</tbody>
</table>
</div>
 
<h2>代码实现：</h2>
<blockquote>
注意：使用浏览器或者微信开发工具调试wx-open-launch-weapp开发标签都不会显示，只有在真机中才会有效果（前提还是config接口注入权限验证配置通过）。
</blockquote>
<div class="cnblogs_code">
<pre><html>

<head>
<title>H5打开小程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
</head>

<body>
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">
<script type="text/wxtag-template">
 <style>.btn { padding: 12px }</style>
 <button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>


<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>


<script type="text/javascript">

 var btn = document.getElementById('launch-btn');
 btn.addEventListener('launch', function (e) {
 console.log('success');
 });
 btn.addEventListener('error', function (e) {
 console.log('fail', e.detail);
 });

 wx.ready(function () {
 var ua = navigator.userAgent.toLowerCase()
 var isWXWork = ua.match(/wxwork/i) == 'wxwork'
 var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'

 if (isWeixin) {
 wx.config({
 //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
 appId: 'ccccxxxx4354353453', // 必填，公众号的唯一标识
 timestamp: 0123456, // 必填，生成签名的时间戳
 nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
 signature: 'signature', // 必填，填任意非空字符串即可
 jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填，随意一个接口即可 
 openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
 })
 }
 else {
 alert("请在微信中打开");
 }
 })

</script>
</body>

</html></pre>
</div>
<h2>实现效果：</h2>
<img src="https://img2020.cnblogs.com/blog/1336199/202110/1336199-20211012005002450-650540342.jpg" alt="" loading="lazy">
 

</div>
<div id="MySignature" role="contentinfo">
<blockquote >
作者名称：追逐时光者
作者简介：一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【&hearts;推荐&hearts;】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。

</blockquote> 
来源：https://www.cnblogs.com/Can-daydayup/p/15395932.html

頁: [1]

琼殿技术论坛's Archiver

微信公众号开发之H5页面跳转到指定的小程序