白猫儿

导航

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>

 

posted on 2022-08-03 17:38  白猫儿  阅读(917)  评论(0编辑  收藏  举报