注
微信中打开网页,可跳转微信小程序操作。
前期准备
- 目前仅支持在微信内打开H5页面;
- 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序;
- 已认证的非个人主体的小程序,使用小程序云开发的静态网页托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
绑定安全域名:
登录微信公众平台进入【公众号设置】–>【功能设置】里设置好 “js接口安全域名”。
IP白名单设置:
登录微信公众平台进入【开发】–>【基本配置】,这里填写你服务器的IP。
前端代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!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://www.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接口代码