引入微信自带的js脚本

https://res.wx.qq.com/open/js/jweixin-1.6.0.js

配置wx.config,并且增加openTagList开放标签列表（wx-open-launch-weapp）

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: result.timestamp, // 必填，生成签名的时间戳nonceStr: result.noncestr, // 必填，生成签名的随机串signature: result.signature,// 必填，签名jsApiList: ['chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表});

wx-open-launch-weapp标签的使用

<wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx" path="需要跳转小程序的路径"><template><button class="button" style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">跳转</button> </template></wx-open-launch-weapp>

使用详情请参考官方文档

后端获取签名参数详情接口请参考微信开发文档的附录1-JS-SDK使用权限签名算法

注意事项：

1、只能跳转发布的小程序，不能跳转体验版和开发版

2、公众号只能是认证的非个人主体的服务号，不能是订阅号

3、微信公众号中必须配置js安全域名，并且安全域名必须开放80端口，否则不能成功添加js安全域名，配置了js安全域名才能访问JS接口

4、如果不能正常获取accessToken，请在微信公众号官网配置白名单

全部前端的demo代码如下

<html><head><title>跳转小程序</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"><link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link><script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><style></style></head><body><!-- display: flex; align-items: center;" --><div id="wechat-web-container" style="width: 100%;height: 100vh;"></div><script type="text/javascript">$(document).ready(function(){function dff(){$.ajax({url: '后端根据获取签名的接口',dataType : "jsonp",（解决跨域的问题，后端返回callback + "("+返回的json字符串+")"）data: {url: location.href.split('#')[0]},type: 'GET',jsonp : "callback",success:function(result){console.info('result',result);wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: result.timestamp, // 必填，生成签名的时间戳nonceStr: result.noncestr, // 必填，生成签名的随机串signature: result.signature,// 必填，签名jsApiList: ['chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表});},error:function(e) {console.info(e)}});}dff();//获取浏览器地址的参数function getQueryVariable() {let href = window.location.hrefconsole.info('href',href)let query = href.substring(href.indexOf('?') + 1);console.info('query',query)let vars = query.split("&");let obj = {}for (var i = 0; i < vars.length; i++) {let pair = vars[i].split("=");obj[pair[0]] = pair[1]}return obj;}var querys = getQueryVariable();console.info("querys",querys)var path = querys.path ? decodeURIComponent(querys.path) : 跳转小程序的路径，可以动态传参数console.info("path",path)var username = ''//username小程序原始id//  replace username//给id=wechat-web-container增加标签$('#wechat-web-container').append(`<wx-open-launch-weappid="launch-btn"username="${username}" path="${path}"><template><button class="button" style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">跳转</button> </template></wx-open-launch-weapp>`)// alert(path)wx.ready(function () {console.log('config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中')var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');alert('success')});btn.addEventListener('error', function (e) {console.log('fail', e.detail);alert('fail', e.detail)// alert('fail', e.detail)});});});</script><style>.button {position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}</style></body>
</html>

微信公众号跳转微信小程序，自定义微信跳转标签相关推荐

c语言编程微信公众号图片直播,如何以图片的形式在微信公众号文章中添加小程序...
如何以图片的形式在微信公众号文章中添加小程序微信公众号中想要将自己的小程序也放进去,宣传宣传,该怎么添加?下面百分网小编带大家一起来看看详细操作教程,感兴趣的朋友一起学习吧!!!想了解更多相关信息请 ...
微信公众号发送小程序卡片_微信公众号里怎么添加小程序-如何在微信[[公众号]]添加小程序卡片-微信关联小程序...
参考官方Demo 1.进入公众号,选择「关联小程序」后,微信公众号运营者用手机扫码进行认证,并输入小程序的AppID即可. 2.腾讯地图+小程序appID:wx7643d5f831302ab0 3. ...
微信公众号文章/菜单添加小程序时路径如何获取？
公众号文章添加素材时或者在公众号菜单可以添加小程序了:添加后用户点击可以一键跳转小程序任何界面,小程序路径获取您可以前往天天外链把路径发送给天天外链即可快速获取小程序路径. 除了公众号文章以及公众号菜 ...
微信公众号菜单如何链接小程序？
如何将小程序添加到微信公众号菜单呢?大体分三步: 1. 获取小程序APPID: 2. 公众号关联小程序: 3. 公众号菜单添加小程序: 具体如下: 1. 获取小程序APPID: 1.1.打开 ...
微信公众号 - Java推送小程序订阅消息给用户
不啰嗦,我们直接开始! 本文使用体验版小程序进行调试. 一.开发前小程序准备: 1.登录微信公众平台点开下面链接,使用微信扫码微信公众平台然后选择一个小程序并登录 2.在小程序后台找到Appid ...
微信公众账号后台怎么解除小程序_微信小程序怎么注销账号_微信小程序注销方法_快吧小程序...
微信小程序一直存在一个问题:开发者不能注销自己的小程序.之前当开发者需要彻底清除小程序信息时,只能够通过暂停服务或关闭"允许被搜索"的方式曲线救国.现在,这个问题终于解决了. 在微 ...
微信公众账号后台怎么解除小程序_微信小程序解除绑定微信小程序怎么授权...
该如何注销小程序? 微信小程序目前无法取消,也是微信小程序最脆弱.最无助的地方.如果你确定你不想要这个小程序,你可以转移和改变主题和其中的所有信息,这样你的小程序就会变成别人的小程序,与你无关.相当于 ...
一张图看透微信公众号、企业号、小程序
对于微信小程序,推荐了解关键词:"progress web app" 我觉得微信小程序跟原生app之间也没有什么好争议的,就如微信和手机qq一样,有了微信,手机QQ也没有死掉,微信 ...
简单分享在微信公众号怎么制作砍价小程序
砍价活动作为营销活动之一,已经是非常成熟了,现在我们要做砍价活动,就非常简单了,在互联网上也有非常多的平台提供砍价活动,但是考虑价格操作等因素,我们都会去对比几家,因为我们在使用很多电商产品或者电商小 ...
微信公众号消息如何添加小程序链接
一选择一个消息二输入信息内容然后三选择某个小程序估计是精确搜索,所以输入的小程序名称要全搜索并选择之后,会自动填充小程序的appid 选择小程序路径和填写跳转路径点击的文字,最后确定即可 ...

微信公众号跳转微信小程序，自定义微信跳转标签

全部前端的demo代码如下

微信公众号跳转微信小程序，自定义微信跳转标签相关推荐

最新文章

热门文章