前言:

  最近公司有一个这样的需要,需要从我们在现有的公众号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 ...

  10. 微信公众号页面的web页面键盘弹起问题

    今天开发的过程中,遇到了一个小问题,是这样的,  UI的设计稿中有个底部的按钮是相对于屏幕定位的,但是这个页面还有一个输入框:具体情况请看下图: 这就造成了当我们输入框获取焦点的时候,键盘弹起,下面的 ...

随机推荐

  1. Elasticsearch-2.3.x填坑之路

    使用版本说明:2.3.2 强制不能使用root用户启动?因为在2.x版本强调了安全性,防止attracker侵入root用户,所以建议使用者创建其他用户启动.当然,可以通过配置来实现root用户启动. ...

  2. C#中调用Matlab人工神经网络算法实现手写数字识别

    手写数字识别实现 设计技术参数:通过由数字构成的图像,自动实现几个不同数字的识别,设计识别方法,有较高的识别率 关键字:二值化  投影  矩阵  目标定位  Matlab 手写数字图像识别简介: 手写 ...

  3. 添加三维动画 demo

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  4. &lt;context:annotation-config/&gt;

    转自:Spring <context:annotation-config/> 解说 在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-c ...

  5. MySQL索引1

    索引最大作用就是提高对表中数据的查询速度,就像书的目录那样重要,可以快速查到所需的知识. 上面是11万多条数据的表,使用语句查询,如: 耗时:0.108s 再比如: 用时:0.004s 接下来创建索引 ...

  6. Week1绪论--抽象数据类型

    一.作业题目 1.构造有理数T,元素e1,e2分别被赋以分子.分母值 2.销毁有理数T 3.用e(引用类型参数)返回有理数T的分子或分母,当入参i为1时返回分子, i为2是返回分母. 4.将有理数T的 ...

  7. python网络-计算机网络基础(23)

    一.网络简介 网络是由节点和连线构成,表示诸多对象及其相互联系. 一个人玩: 两个人玩: 多个人玩: 说明 网络就是一种辅助双方或者多方能够连接在一起的工具 如果没有网络可想单机的世界是多么的孤单 使 ...

  8. UVa 3602 - DNA Consensus String 水题 难度: 0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  9. java-Date类

    1.Date类的概述和方法使用 * A:Date类的概述 * 类 Date 表示特定的瞬间,精确到毫秒. * B:构造方法 * public Date() * public Date(long dat ...

  10. 限制ssh登录ip和系统用户

    一般对于安全性要求比较高的系统,限制ssh登录的源ip地址和可以登录的系统账户是非常有必要的,ssh登录的源地址和可以登录的系统账户的设置在sshd的配置文件/etc/ssh/sshd_config中 ...