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
上一篇: 平面设计配色全攻略,不看你将错过1个亿!
下一篇: 面向对象的理解