前言：
最近公司有这样一个需求，需要在我们现有的公众号H5页面添加一个跳转到第三方小程序的按钮。之前只知道小程序可以互相跳转。今天查了微信开发文档。原来H5网页还支持小程序间跳转。以下是对接过程的简要说明。
微信公众号详细对接文件：
＃二十一
公众号关联小程序：
注意：在对接跳转前，我们需要将要跳转的小程序关联到我们的公众号。公众号可以关联10个相同学科的小程序和3个不同学科的小程序。
1、进入公众号后台小程序启动页开发，路径：广告与服务-小程序-小程序管理-添加
2、关联小程序——管理员微信扫码确认
3、搜索小程序名称或绑定
4、绑定成功，等待小程序管理员审批
查看小程序的原始id：
小程序的原始id，即小程序对应的以gh_开头的id
找到已经关联成功的小程序，将鼠标放入其中查找详情并查看小程序的原始id
绑定JS接口安全域名：
登录微信公众平台，进入“公众号设置”的“功能设置”，填写“JS接口安全域名”。
微信JS-SDK使用步骤及配置信息生成详细说明（.NET版）：
跳转标签、前置条件和属性说明： 跳转小程序：wx-open--
它用于在页面上提供一个可以跳转到指定小程序的按钮。使用该标签后，用户需要点击网页中的标签按钮跳转到小程序。H5通过打开标签打开小程序的场景值为1167。
打开对象
认证的服务ID，绑定服务ID的“JS接口安全域名”下的网页，可以使用该标签跳转到任何合法合规的小程序。
经认证的非个人小程序，使用小程序云开发的静态网站托管绑定域名下的网页，可以使用该标签跳转到任何合法合规的小程序。
错误信息
如果跳转时出现如下页面，则表示该网页绑定的服务ID或小程序没有权限。请检查是否满足上述开放对象条件。
属性名称 必填 默认值 备注
是的
要跳转到的小程序的原始id，即小程序对应的以gh_开头的id
小路
不
小程序中要跳转到的页面路径和参数（不填则默认跳转到小程序首页）
代码：
注意：使用浏览器或微信开发工具调试wx-open--开发标签不会显示，只有真机有效（前提是接口注入权限验证配置通过）。
<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>
实现效果：