欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 15:01:56
有时候小程序会引用一些wap页面,但是wap页面里有一些点击跳转的地方还是wap,我想让他在小程序里时点击跳转小程序。例如:列表页里的一个按钮#clickDetail,在wap站里点击跳转wap详情页,如果在小程序里点击就跳小程序详情具体如下 $('#clickDetail').on('click',function(){ if(!window.WeixinJSBridge||!WeixinJSBridge.invoke){ docume......

有时候小程序会引用一些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