Two ways to open wechat code scanning prompt in browser

Because WeChat Because of the limitation of the download of application files in the built-in browser is blocked, many people do not respond when they click the download button when scanning QR code with wechat. What I want to do is to prompt the user to open the download in the browser.

Method 1: Mask prompt method


In fact, it turns out to be very simple, which is to judge that it is currently in wechat's built-in browser, and then display the default hidden prompt layer.
Step 1: judge the UA of wechat.

var ua = navigator.userAgent;
var isWeixin =  !!/MicroMessenger/i.test(ua);

Step 2: introduce the default hidden layer.

<a href="http://Caibaojian.com/test.apk "id =" jdownapp "> Click to download a p p < / a > < a href="http://caibaojian.com/test.apk "id =" jddownapp2 "class =" BTN war "> Click to download appp2 < / a > < div class="wxtip "id =" jweixintip "> < span class="wxtip icon "> / span > < span > < span class="wxtip-txt "> click the upper right corner < br br < br br br < br br br br < br br br < br br < br class="wxtip-txt "> class="wxtip-txt "> click the upper right corner < br br br < br br br < br br br < br br br < br br br br < br br br br < br br br br < br br br br < br br br br/ > select open in browser < / P > < div >

Step 3: add CSS style

wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
.wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}
.wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}

Step 4: click the button to display the hidden layer, click the hidden layer to close, and the general JS The code is as follows:

function weixinTip(ele){	var ua = navigator.userAgent;	var isWeixin = !!/MicroMessenger/i.test(ua);	if(isWeixin){		ele.onclick=function(e){			window.event? window.event.returnValue = false : e.preventDefault();			document.getElementById('JweixinTip').style.display='block';
		}		document.getElementById('JweixinTip').onclick=function(){			this.style.display='none';
		}
	}
}var btn1 = document.getElementById('JdownApp');//Download one weixinTip(btn1);var btn2 = (document. Getelementbyid ('jdowapp2 '); / / download two weixinTip(btn2);

That's the mask code. You don't have to worry about the user no longer.

Method 2: Auto jump
This method needs to be divided into apple and Android. We can use the existing tool interface: Getinstall
Android:
You can directly fill in the download address of apk, or directly fill in the landing page of H5 download page. When the interface is judged as Android device, it will automatically jump out of the external browser and open the filled address.
Apple:
This is more complicated. When the Getinstall interface judges whether the device is apple, the first step will judge whether it is a web page or a download. If it is an APP download, it will automatically call the APP download module of the APP store to download the APP directly. If it is a web page, it will also execute the above mask code to prompt the user to open it in safari.
Although Getinstall is a dedicated interface for APP download, it can be used directly if you want to do webpage jump.




Keywords: Mobile Android

Added by magicdanw on Fri, 08 Nov 2019 22:58:41 +0200