h5跳转小程序/判断是小程序打开h5还是微信浏览器打开h5

有时候小程序会引用一些wap页面，但是wap页面里有一些点击跳转的地方还是wap，我想让他在小程序里时点击跳转小程序。

例如：列表页里的一个按钮#clickDetail ，在wap站里点击跳转wap详情页，如果在小程序里点击就跳小程序详情

具体如下

    $('#clickDetail').on('click',function(){
        if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
            document.addEventListener('WeixinJSBridgeReady', ready, false)
            window.location.href="https://www.baidu.com";//wap页要跳转的地址
        } else {
            ready()
        }
        function ready() {
            console.log(window.__wxjs_environment === 'miniprogram') // true
            wx.navigateTo({ //小程序要跳转的地址
                url: '../community_detail/comDetail?communityId=' + communityid + '&cityId=' + cityId
            });
        }
    });

通过上述代码就可以实现wap和小程序分别跳转了，貌似看着没问题，但是，当在微信搜索里搜这个wap页 在点击跳转的时候，发现点击按钮不跳转了，

原来，在微信浏览器里打开时也默认走了else的方法，就是小程序的点击方法，所以，这时候需要在判断页面是在小程序打开，还是微信浏览器打开

最终代码如下

$('#clickDetail').on('click',function(){
    if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
        document.addEventListener('WeixinJSBridgeReady', ready, false)
        window.location.href="https://www.baidu.com";//wap页要跳转的地址
    } else {
        ready()
    }

});

function ready() {
    console.log(window.__wxjs_environment === 'miniprogram') // true
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
    wx.miniProgram.getEnv((res)=>{
            if (!res.miniprogram) {//不在小程序
                window.location.href="https://www.baidu.com";//wap页要跳转的地址
            }else { //小程序要跳转的地址
                wx.navigateTo({
                    url: '../community_detail/comDetail?communityId=' + communityid + '&cityId=' + cityId
                });
            }
        })
    }
}

 

或者直接判断

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
    wx.miniProgram.getEnv((res)=>{
        if (res.miniprogram) {
            console.log("在小程序里");
        } else {
            console.log("不在小程序里");
            window.location.href="https://m.5i5j.com/bj/xiaoqu/345556.html";
        }
    })
}else{
    console.log('不在微信里');
}

最后，注意不要忘了引用

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

本文地址：https://blog.csdn.net/qq_39109182/article/details/107927931