注
微信中打开网页,可跳转微信小程序操作。
前期准备
- 目前仅支持在微信内打开H5页面;
- 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序;
- 已认证的非个人主体的小程序,使用小程序云开发的静态网页托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
绑定安全域名:
登录微信公众平台进入【公众号设置】–>【功能设置】里设置好 “js接口安全域名”。
IP白名单设置:
登录微信公众平台进入【开发】–>【基本配置】,这里填写你服务器的IP。
前端代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript" src="https://bestcyt.com/cyttest/sha.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <style> #app { width: 300px; height: 18.75rem; border: 2px solid red; } #launch-btn { z-index: 10; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: transparent; border: 2px solid blue; } </style> </head> <body> <div id="app"> <wx-open-launch-weapp id="launch-btn" username="gh_c104b771629e" :path="pages/index/index.html"> <template> <style> .btn { padding: 12px; width: 100px; height: 100px; } </style> <div style="text-align: center;align-items: center;margin: 8rem"> <button class="btn">打开小程序</button> </div> </template> </wx-open-launch-weapp> </div> <script type="text/javascript"> let href = location.href.split('#')[0]; // href = encodeURIComponent(href.split('?')[0]) // 随机字符串方法 function randomString() { let len = 16; let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; let maxPos = chars.length; let character = ''; for (let i = 0; i < len; i++) { character += chars.charAt(Math.floor(Math.random() * maxPos)) } return character; } let timestamp = ''; // 时间戳 $.ajax({ url: "https://www.xxxxxxxt.com/api/user/wxLoginFWH", type: "get", dataType: "json", success: function(data) { console.log('返回数据1---token---', data) if (data.code === 200) { let token = { access_token: data.data.access_token } $.ajax({ url: "https://www.xxxxxx.com/api/user/wxTicket", type: "post", data: token, dataType: "json", success: function(dataToken) { if (dataToken.code === 200) { timestamp = Math.round(new Date() / 1000); let noncestr = randomString(); let ticket = dataToken.data.ticket; let signature = `jsapi_ticket=${ticket}&noncestr=${noncestr}×tamp=${timestamp}&url=${href}`; wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx287004cb8ad1a4f6', // 必填,公众号的唯一标识 timestamp, // 必填,生成签名的时间戳 nonceStr: noncestr, // 必填,生成签名的随机串 signature: hex_sha1(signature),// 必填,签名 jsApiList: ['onMenuShareTimeline', 'scanQRCode','chooseImage', 'previewImage','openLocation'],// 必填,需要使用的JS接口列表, openTagList: ['wx-open-launch-weapp','wx-open-launch-app'] }); wx.ready(function() { // alert('接口配置成功'); $(".btn").trigger("click") $("#launch-btn").trigger("click") }); var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function(e) { alert('添加事件success'); }); btn.addEventListener('error', function(e) { console.log('fail', e.detail); }); $(".btn").trigger("click") $("#btn").trigger("click") } } }) } } }) </script> </body> </html>
nodejs接口代码