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

所属分类: 网络编程 / JavaScript 阅读数: 1440
收藏 0 赞 0 分享

目前的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

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

更多精彩内容其他人还在看

react PropTypes校验传递的值操作示例

这篇文章主要介绍了react PropTypes校验传递的值操作,结合实例形式分析了react PropTypes针对传递的值进行校验操作相关实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

在Webpack中用url-loader处理图片和字体的问题

这篇文章主要介绍了在Webpack中用url-loader处理图片和字体的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

React中Ref 的使用方法详解

这篇文章主要介绍了React中Ref 的使用方法,结合实例形式总结分析了react中ref基本功能、用法及操作注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

JS数组降维的实现Array.prototype.concat.apply([], arr)

这篇文章主要介绍了JS数组降维的实现Array.prototype.concat.apply([], arr),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

js最全的数组的降维5种办法(小结)

这篇文章主要介绍了js最全的数组的降维5种办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

React生命周期原理与用法踩坑笔记

这篇文章主要介绍了React生命周期原理与用法,结合实例形式总结分析了react生命周期原理、用法及相关注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue 3.0 全家桶抢先体验

这篇文章主要介绍了Vue 3.0 全家桶抢先体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

JavaScript 链表定义与使用方法示例

这篇文章主要介绍了JavaScript 链表定义与使用方法,结合实例形式分析了JavaScript 链表的基本功能、定义与使用方法,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript Date对象功能与用法学习记录

这篇文章主要介绍了JavaScript Date对象功能与用法,结合实例形式总结分析了JavaScript Date对象基本功能、用法及操作注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

Node.js设置定时任务之node-schedule模块的使用详解

node-schedule是 Node.js 的一个定时任务(crontab)模块。这篇文章主要介绍了Node.js设置定时任务之node-schedule模块的使用,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多