H5跳转小程序页面(同一公众号下的小程序)
使用场景例如:公众号H5页面跳转到小程序
首先引用js:
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
html:
<!-- 这个是H5跳转到小程序中(同一公众号下的指定小程序) --> <wx-open-launch-weapp id="launch-btn" username="小程序gh_开头的id" path="pages/index/index.html" style="width: 50%; height: 3em; background-color: #4880ff; color: #fff; float: left; padding: 0px; margin: 0px; font-size: 16px; border: 0px solid #4880ff;text-align:center;line-height:50px;"> <script type="text/wxtag-template"> <style>.btn {width:100%;height:100%;color:#fff;background-color: #4880ff;font-size: 16px;border:0px solid red;vertical-align: middle;line-height:50px;z-index:999;}</style> <button class="btn">跳转到小程序</button> </script> </wx-open-launch-weapp>
js:
<script language="javascript" type="text/javascript"> //这个是H5跳转到指定小程序中(同一公众号下的小程序) $(function () { getWxJson(); }) var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); //调用微信权限 function getWxJson() { $.ajax({ type: "POST", dataType: "json", url: "../../Ashx/wx.ashx",//此处填写调用后台签名认证的地址 contentType: "application/x-www-form-urlencoded; charset=UTF-8", data: { action: "getSignature", "url": window.location.href.split('#')[0] }, success: function (d) { //console.log(JSON.stringify(d)); //alert(JSON.stringify(d)); wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,。 appId: d.appId, // 必填,公众号的唯一标识 timestamp: d.timestamp, // 必填,生成签名的时间戳 nonceStr: d.nonceStr, // 必填,生成签名的随机串 signature: d.signature,// 必填,签名,见附录1 jsApiList: ['scanQRCode'],// 必填,需要使用的JS接口列表,所有JS接口列表见附录2 openTagList: ['wx-open-launch-weapp']//,'wx-open-launch-weapp' }); wx.ready(function (res) { //alert(JSON.stringify(res)); }); wx.error(function (res) { //alert(JSON.stringify(res)); //localStorage.setItem("JSAccessToken", ""); //localStorage.setItem("jsapi_ticket", ""); // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); } }) } console.log(Date.now()) $(function () { 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) { } else { alert("请在微信中打开"); } }) </script>