如何通過代碼實現(xiàn)微信h5頁面跳轉(zhuǎn)瀏覽器 在微信中點擊鏈接直接跳轉(zhuǎn)到手機默認瀏覽器

根據(jù)網(wǎng)友們提供的思路,本文整理了三種方案。

1、申請騰訊開放平臺開發(fā)者

具體流程可以去訪問http://open.qq.com/,大概的意思是需要將apk提交到騰訊開放平臺的里面,每個apk應該會自動生成一個二維碼,每年支付一定的費用,然后在微信里面掃一下這個二維碼,這個時候也需要先安裝一個手機應用寶,才能進行 apk的安裝。

對于這種方案,只能用一種很流行的話說:”很任性”。

2、重定向

這種方法對于一些已經(jīng)發(fā)布出去的二維碼比較有用,也是目前比較普遍的做法。不可能因為微信不能直接下載了,就得把所有的已經(jīng)流出去的二維碼重新生成吧?

2.1判斷瀏覽器類型

/*首先判斷是否是pc,若是pc訪問則跳轉(zhuǎn)到http://app.ctrip.com/*/

????var u = navigator.userAgent || '';

????var isPC = !/(iphone|ios|android|mini|mobile|mobi|Nokia|Symbian|iPod|iPad|Windows\s+Phone|MQQBrowser|wp7|wp8|UCBrowser7|UCWEB|360\s+Aphone\s+Browser)/i.test(u);

????if (isPC) { location.; }

如果是pc端的話,那么直接重定向到一個網(wǎng)站

如果是非pc端的話,那么要區(qū)分是android還是apple?

2.2判斷是android還是iOS?

因為我們假設iOS的下載必須從蘋果的appstore里面下載,那么其下載地址有一定的規(guī)律,比如說sourceid等。

可以通過一個正則表達式來確定。

var urls = document.location.search, re2 = new RegExp("(\\\?|&)sourceid=([^&]+)(&|$)", "i"), from = urls.match(re2);

????if (from) { sid = from[2]; }

document.location.search

比如一個URL是XXXX?g=1,那么document.location.search的值就是?g=1

2.3重定向到下載地址

window.onload = function () { //修復圖片偶爾不能加載

????????var salesLocal = localStorage.getItem("SALESOBJ") ? JSON.parse(localStorage.getItem("SALESOBJ")) : null;

????????var appUrl = salesLocal && salesLocal.data && salesLocal.data.appurl ? salesLocal.data.appurl : "";

????????if (!isPC && !iswx) {

????????????if(appUrl){

????????????????location.href = appUrl;

????????????}else if(sid){

????????????????location.href = "/m/" + sid;

????????????}

????????}

????}

2.4 html頁面源文件

<!DOCTYPE html>

<html>

<head>

????<meta charset="utf-8" />

????<meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

????<meta content="telephone=no" name="format-detection" />

????<meta name="apple-mobile-web-app-capable" content="yes" />

????<!--link href="css/main.css" rel="stylesheet" type="text/css"-->

????<style type="text/css">

????????body {height: 100%;}

????????.container {padding:0 20px;background-image: url(images/bg.jpg);background-position: center center;background-size: 100% 100%;height: 100%;}

????????.dl-step {padding-top: 58px;}

????????.dl-step .step {clear: both;}

????????.dl-step .index {float: left;height: 36px;width: 36px;border: 2px solid #fff;background-color: #ffba26;border-radius: 50%;text-align: center;line-height: 36px;position: relative;background-clip: padding-box;color: #fff;}

????????.dl-step .content {margin-left: 70px;border-radius: 4px;padding:8px 13px 13px;position: relative;}

????????.dl-step-1 {margin-bottom: 60px;position: relative;}

????????.dl-step-1 .content {background-color: #ffba26;box-shadow: 0 1px 2px rgba(0,0,0,0.5);font-size: 15px;color: #fff;padding: 0 13px;height: 38px;line-height: 38px;}

????????.dl-step-1:before {

????????????content: "";

????????????display: block;

????????????width: 89px;

????????????height: 75px;

????????????position: absolute;

????????????right: 0;

????????????top: -56px;

????????????background-image: url(images/icons.png);

????????????background-size: auto 213px;

????????????background-repeat: no-repeat;

????????????background-position: 0 0;

????????????z-index: 10;

????????}

????????.dl-step-1 .index:before {

????????????content: "";

????????????display: block;

????????????height: 45px;

????????????width: 2px;

????????????background-color: #fff;

????????????position: absolute;

????????????top: 45px;

????????????left: 17px;

????????????border-radius: 2px;

????????}

????????.dl-step-2 {margin-bottom: 58px;}

????????.dl-step-2 .index, .dl-step-3 .index {background-color: rgba(39,41,57,0.2);}

????????.dl-step-2 .content, .dl-step-3 .content {background-color: rgba(255,255,255,0.9);box-shadow: 0 1px 2px rgba(0,0,0,0.3);}

????????.dl-step-2 .content .tip, .dl-step-3 .content .tip {margin-bottom: 2px;font-size: 15px;color: #333;font-family: Microsoft Yahei;}

????????.dl-step-2 .index:before {

????????????content: "";

????????????display: block;

????????????height: 128px;

????????????width: 2px;

????????????background-color: #fff;

????????????position: absolute;

????????????top: 45px;

????????????left: 17px;

????????????border-radius: 2px;

????????}

????????.dl-devices {overflow: hidden;}

????????.dl-devices .item {background-color: #ceecfb;width: 49%;float: left;padding: 5px 0;}

????????.dl-devices .android {margin-left: 1px;}

????????.dl-devices .name {float: left;background-color: #fff;padding: 0 4px;color: #666;line-height: 14px;font-size: 12px;font-family: Microsoft Yahei;}

????????.dl-devices .icon {height: 40px;clear: left;background-image: url(images/icons1.png);background-size: auto 213px;background-repeat: no-repeat;}

????????.dl-devices .desc {color:#666;font-size: 10px;text-align: center;font-family: Microsoft Yahei;}

????????.dl-devices .ios .icon {background-position: center -85px;}

????????.dl-devices .android .icon {background-position: center -131px;}

????????.dl-step-3 .app {background-color: #ceecfb;padding: 8px 25px;}

????????.dl-step-3 .app .icon {padding-left: 38px;height:31px;line-height:31px;background-image: url(images/icons2.png);background-repeat: no-repeat;background-position: -29px -182px;background-size: auto 213px;font-size: 10px;color: #666;font-family: Microsoft Yahei;}

????????.dl-step .content:before {

????????????content: "";

????????????display: block;

????????????height: 0;

????????????width: 0;

????????????border: 5px solid transparent;

????????????border-right-color: rgba(0,0,0,0.1);

????????????position: absolute;

????????????top: 14px;

????????????left: -11px;

????????}

????????.dl-step .content:after {

????????????content: "";

????????????display: block;

????????????height: 0;

????????????width: 0;

????????????border: 5px solid transparent;

????????????position: absolute;

????????????top: 13px;

????????????left: -10px;

????????}

????????.dl-step-1 .content:after {border-right-color: #ffba26;}

????????.dl-step-2 .content:after, .dl-step-3 .content:after {border-right-color: rgba(255,255,255,0.9);}

????</style>

????<script>

/*首先判斷是否是pc,若是pc訪問則跳轉(zhuǎn)到http://app.ctrip.com/*/

????var u = navigator.userAgent || '';

????var isPC = !/(iphone|ios|android|mini|mobile|mobi|Nokia|Symbian|iPod|iPad|Windows\s+Phone|MQQBrowser|wp7|wp8|UCBrowser7|UCWEB|360\s+Aphone\s+Browser)/i.test(u);

????if (isPC) { location.; }

????</script>

????<script src="js/require.min.js"></script>

????<!--script type="text/javascript">

????????var libs = 'libs_r_3.js';

????????if (!('__proto__' in {})) {

????????????libs = 'libs_jq_r_1.1.js';

????????}

????????document.write('<script type="text/javascript" src="js/' + libs + '"></' + 'script>');

????</script-->

????<!--script src="js/m.ctrip.com.core.min.js"></script-->

????<script>

????????var isPC = false;

????????var e = navigator.userAgent ? navigator.userAgent.toLowerCase() : '';

????????var iswx = /micromessenger/.test(e) ? !0 : !1;

????????var wxurl = '';

????????if (iswx) {

????????wxurl = "http://mp.weixin.qq.com/mp/redirect?url=";

????????}

// ???window.onload = function () { //修復圖片偶爾不能加載

function hello() { //修復圖片偶爾不能加載

????????var appUrl = "http://app.hipermart.com.cn:8888/apk/hipermart.apk";

????????if (!isPC && !iswx) {

????????????if(appUrl){

????????????location.href = appUrl;

????????????}else if(sid){

????????????location.href = "/m/" + sid;

????????????}

????????}

????????}

????</script>

</head>

<body onload="hello()">

????<div class="container">

????????<div class="dl-step">

????????????<div class="step dl-step-1">

????????????????<div class="index">1</div>

點擊右上方</div>

????????????</div>

????????????<div class="step dl-step-2">

????????????????<div class="index">2</div>

????????????????<div class="content">

選擇在瀏覽器中打開</p>

????????????????????<div class="dl-devices">

????????????????????????<!--div class="item ios">

????????????????????????????<span class="name">iOS</span>

????????????????????????????<div class="icon"></div>

在Safari中打開</p>

????????????????????????</div-->

????????????????????????<div class="item android">

安卓</span>

????????????????????????????<div class="icon"></div>

在瀏覽器中打開</p>

????????????????????????</div>

????????????????????</div>

????????????????</div>

????????????</div>

????????????<div class="step dl-step-3">

????????????????<div class="index">3</div>

????????????????<div class="content">

即可自動下載APP</p>

????????????????????<div class="app">

海瑪特客戶端</div>

????????????????????</div>

????????????????</div>

????????????</div>

????????</div>

????</div>

</body>

</html>

3、工具 旋風微跳?demo演示地址

旋風微跳是一款基于微信后端開發(fā)了一款微信營銷下載推廣助手,使用了本插件生成的鏈接,用戶在微信任意環(huán)境下點擊鏈接或者掃描二維碼,可以實現(xiàn)直接跳轉(zhuǎn)手機默認瀏覽器并打開指定網(wǎng)頁。

1、打開 旋風微跳 網(wǎng)址

2、準備好我們的推廣鏈接:實例如:www.baidu.com ?在輸入框填寫你的下載鏈接,填寫完畢后。點擊生成按鈕

3、點擊生成之后,就會看到底部生成了自己的推廣二維碼以及短網(wǎng)址鏈接地址。

至此,我們已經(jīng)生成了APP推廣鏈接的宣傳二維碼和鏈接。 我們就可以直接用微信掃描二維碼在微信中分享和宣傳引流了。這樣我們能夠極大的提高自己的APP在微信中的推廣轉(zhuǎn)化率。解決掉了微信中下載鏈接被屏蔽等問題。充分利用微信的用戶群體來宣傳引流。

以上是個人的一點看法,希望能對你有所幫助,歡迎參與討論!

---------------------

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容