微信实现自动跳转到用其他浏览器打开指定APP下载


Posted in Javascript onFebruary 15, 2019

目前的APP基本都支持二维码扫描下载,二维码下载也成为了大家用起来很顺手的一种方式。由于微信的用户基本占据了国内市场的90%,说到扫一扫用户第一个想到的就是打开微信扫一下,通过微信分享APP,再从分享的链接下载apk/ios包。故用户通常都是使用微信打开链接或扫描二维码前往下载页,这是刚需。

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,对于ios用户默认可以通过微信内置浏览器点击右上角的更多按钮从而选择“在浏览器中打开”,对于安卓用户则可以实现微信内直接跳出到手机默认浏览器。但是很多用户其实并不知道该任何实现,其实只要在代码中进行相关的处理即可。下面为大家介绍这两种方式的实现方式,不仅可以防封,还可以达到跳转手机浏览器的效果。

需求分析

现在微信分享的功能很多,从分享的链接下载apk或者ios文件是很常用的一个功能。但是微信scheme接口会自动屏蔽含apk或ios文件的下载链接,不允许直接通过微信下载安装文件。如果域名访问次数过多后被系统检测会自动封掉该域名。被封域名后台用户在微信中打开连接就会提示不存在或已停止访问的提示。但很多用户不知道是被屏蔽了,故以为是链接有问题,最后在该步骤流失的量就会很大,推广转化率就会很低。那么究竟该如何解决这个问题呢?

代码编程

HTML代码

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

CSS代码

#weixin-tip{display:none;position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);filter:alpha(opacity=80);width:100%;height:100%;z-index:100;}
 #weixin-tip p{text-align:center;margin-top:10%;padding:0 5%;position:relative;}
 #weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}

JS封装代码

var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf(‘micromessenger') !== -1})();
 window.onload = function() {
 var winHeight = typeof window.innerHeight != ‘undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉
 var btn = document.getElementById(‘J_weixin');
 var tip = document.getElementById(‘weixin-tip');
 var close = document.getElementById(‘close');
 if (is_weixin) {
 btn.onclick = function(e) {
 tip.style.height = winHeight + ‘px'; //兼容IOS弹窗整屏
 tip.style.display = ‘block';
 return false;
 }
 close.onclick = function() {
 tip.style.display = ‘none';
 }
 }
 }

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

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

旋风微跳 网址:http://www.zjychina.cn

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
微信小程序实现联动选择器
Feb 15 #Javascript
推荐一个基于Node.js的表单验证库
Feb 15 #Javascript
微信小程序实现左右列表联动
May 19 #Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 #Javascript
微信小程序实现单选选项卡切换效果
Jun 19 #Javascript
一秒学会微信小程序制作table表格
Feb 14 #Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 #Javascript
You might like
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Linux下python制作名片示例
2018/07/20 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python笔试面试题小结
2019/09/07 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
工厂会计员职责
2014/02/06 职场文书
婚庆司仪主持词
2014/03/15 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
电影圆明园观后感
2015/06/03 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers