如何通过代码实现微信h5页面跳转浏览器 在微信中点击链接直接跳转到手机默认浏览器

根据网友们提供的思路,本文整理了三种方案。

1、申请腾讯开放平台开发者

具体流程可以去访问http://open.qq.com/,大概的意思是需要将apk提交到腾讯开放平台的里面,每个apk应该会自动生成一个二维码,每年支付一定的费用,然后在微信里面扫一下这个二维码,这个时候也需要先安装一个手机应用宝,才能进行 apk的安装。

对于这种方案,只能用一种很流行的话说:”很任性”。

2、重定向

这种方法对于一些已经发布出去的二维码比较有用,也是目前比较普遍的做法。不可能因为微信不能直接下载了,就得把所有的已经流出去的二维码重新生成吧?

2.1判断浏览器类型

/*首先判断是否是pc,若是pc访问则跳转到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端的话,那么直接重定向到一个网站

如果是非pc端的话,那么要区分是android还是apple?

2.2判断是android还是iOS?

因为我们假设iOS的下载必须从苹果的appstore里面下载,那么其下载地址有一定的规律,比如说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访问则跳转到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演示地址

旋风微跳是一款基于微信后端开发了一款微信营销下载推广助手,使用了本插件生成的链接,用户在微信任意环境下点击链接或者扫描二维码,可以实现直接跳转手机默认浏览器并打开指定网页。

1、打开 旋风微跳 网址

2、准备好我们的推广链接:实例如:www.baidu.com ?在输入框填写你的下载链接,填写完毕后。点击生成按钮

3、点击生成之后,就会看到底部生成了自己的推广二维码以及短网址链接地址。

至此,我们已经生成了APP推广链接的宣传二维码和链接。 我们就可以直接用微信扫描二维码在微信中分享和宣传引流了。这样我们能够极大的提高自己的APP在微信中的推广转化率。解决掉了微信中下载链接被屏蔽等问题。充分利用微信的用户群体来宣传引流。

以上是个人的一点看法,希望能对你有所帮助,欢迎参与讨论!

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

?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容