前言：

　　最近公司有一个这样的需要，需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮。之前只知道小程序之间是可以相互跳转的，今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转了，下面就简单描述一下对接的流程。

微信公众号详细对接文档：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

公众号关联小程序：

注意：在对接跳转之前我们需要在需要跳转的小程序关联到我们的公众号中。公众号可以关联同一主体的小程序10个，不同主体的3个。

1、进入公众号后台，路径：广告与服务——小程序—小程序管理—添加

2、关联小程序—管理员微信扫码确认

3、搜索小程序名称或APPID绑定

4、绑定成功等待小程序管理者同意

查看小程序原始id：

小程序原始id，即小程序对应的以gh_开头的id

找到关联成功的小程序，鼠标放入其中找到详情查看小程序原始id

绑定JS接口安全域名：

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

微信JS-SDK的使用步骤，配置信息生成详细说明（.NET版）：

https://www.cnblogs.com/Can-daydayup/p/11124092.html

跳转标签、前提条件和属性说明：

跳转小程序：wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。

开放对象

  1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

错误提示

若跳转时出现以下页面，表示网页绑定的服务号或小程序无权限，请检查是否符合上述开放对象条件。

属性

名称 必填 默认值 备注
username 是   所需跳转的小程序原始id，即小程序对应的以gh_开头的id
path 否   所需跳转的小程序内页面路径及参数（不填写的话默认跳转小程序首页）

代码实现：

注意：使用浏览器或者微信开发工具调试wx-open-launch-weapp开发标签都不会显示，只有在真机中才会有效果（前提还是config接口注入权限验证配置通过）。

<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>

    <!-- 公众号 JSSDK -->

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

    <!--js代码-->

    <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>

实现效果：

微信公众号开发之H5页面跳转到指定的小程序的更多相关文章

  1. 微信公众号开发之VS远程调试

    目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 前言 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流 ...

  2. 微信公众号开发之access_token的全局共用

    最近做微信公众号开发,涉及到access_token的缓存问题(避免各自的应用都去取access_token,同时解决微信 appid和appsecret的安全问题),在通用权限管理系统底层增加了实现 ...

  3. 微信公众号开发之LBS

    百度地图Web服务api:http://lbsyun.baidu.com/index.php?title=webapi 1.测距 Route Matrix API v2.0:http://lbsyun ...

  4. h5开发微信公众号重定向到关注页面没有关注按钮 （微信你个坑）

    搜索微信公众号是这样的 微信公众号重定向到关注页面没有关注按钮 如何微信公众号重定向到关注页面没有关注按钮,请看上篇笔记 无解,微信一直在封这种通过链接跳转到公众号关注页面的方法.只有放个二维码提示长 ...

  5. Vue — 微信公众号内置h5支付相关

    首先,在公众号后台配置h5页面地址 开发流程 1.通过配置h5地址,获取code.再通过code,获取openid getOpenid(){ let url = 'https://open.weixi ...

  6. 微信公众账号开发之N个坑（二）

    上篇说到微信公众账号的几个坑,前面五个,已经说到菜单,宝宝继续往下赘述了.可惜,还不知道宝宝的宝宝到底是不是心疼宝宝呢,完了,我凌乱了... 回到正题,我们就不吐槽其他的了,上一篇说到微信的菜单了,那 ...

  7. 微信公众账号开发之N个坑（一）

    我这人干活没有前奏,喜欢直接开始.完了,宝宝已经被你们带污了.. 微信公众账号开发文档,官方版(https://mp.weixin.qq.com/wiki),相信我,我已经无力吐槽写这个文档的人了,我 ...

  8. Java微信公众平台开发之OAuth2.0网页授权

    根据官方文档点击查看在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息"的配置选项中,修 ...

  9. 微信公众号内唤起h5支付详解

    1.调用统一下单的接口URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder 2.调用统一下单必传参数: appid:需要进行支付功能的公众号的app ...

随机推荐

  1. promise错误处理的三种方法

    promise碰到then,也就是resolve或者reject的时候是异步的,所以try...catch对它是没有用的 1.then(resolve,reject);  then方法中第二个回调,是 ...

  2. Shell中的运算

    1.运算方式及运算符号 2.SHELL 中常用的运算命令 3.相关操作演示 1.用脚本写一个10秒倒计时 脚本的执行: 2.编写脚本,1分10秒的倒计时 执行脚本: 3.编写脚本,制作一个计算器 脚本 ...

  3. JAVA 之 每日一记 之 算法（ 给定一个正整数，返回它在 Excel 表中相对应的列名称。 ）

    题目: 给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如: 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 -& ...

  4. Spring系列之JDBC对不同数据库异常如何抽象的？

    前言 使用Spring-Jdbc的情况下,在有些场景中,我们需要根据数据库报的异常类型的不同,来编写我们的业务代码.比如说,我们有这样一段逻辑,如果我们新插入的记录,存在唯一约束冲突,就会返回给客户端 ...

  5. volatile的基本原理

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...

  6. Docker编排工具Docker Compose的使用

    一.安装docker compose 官网推荐方式之一: sudo curl -L "https://github.com/docker/compose/releases/download/ ...

  7. Python常见问题 - python3 requests库提示警告InsecureRequestWarning的问题

    当使用 requests 库发送请求时报了以下警告 D:\python3.6\lib\site-packages\urllib3\connectionpool.py:847: InsecureRequ ...

  8. java 线程状态 详解

    线程被创建后,有一个生命周期,下图是线程的生命周期详解. java api java.lang.Thread.State 这个枚举中给出了六种线程状态,分别是: 线程状态 导致状态发生条件 NEW(新 ...

  9. 为何GRE可以封装组播报文而IPSEC却不行？

    Author       : Email         : vip_13031075266@163.com Date          : 2021.01.24 Copyright : 未经同意不得 ...

  10. [第八篇]——Docker 容器使用之Spring Cloud直播商城 b2b2c电子商务技术总结

    Docker 客户端 docker 客户端非常简单 ,我们可以直接输入 docker 命令来查看到 Docker 客户端的所有命令选项. xxx@xxx:~# docker 可以通过命令  docke ...