微信扫描二维码下载APP解决方案

最近公司在做一个APP的项目,APP开发完成之后就是下载页,我们做前端的用了好几种方法都无法解决微信扫描二维码后的APP下载问题,其实代码没什么问题,主要是微信太封闭了,按钮上的APP store链接点击没反应。所以我们在做APP下载页面的时候千万不能采用直接放链接的方式。

解决方案:

1、将APP上传到应用宝。

2、在APP的管理中心有一个选项【微下载】,在IOS下载链接填写上去,提交就OK了。

微下载

3、如果你是一个懒人,就可以把微下载上面的分享链接复制,做成一个二维码,不管用安卓手机还是苹果手机都可以跳转到对应的下载页了,如果您是有思想的人,可以继续阅读下去。

微下载

4、写一个APP下载页,如果不会写,就从网上下载一个,波波今天写了一个,可惜代码都在公司,所以没办法弄。不过这个一般难不倒大家。在<body>标签中写上如下代码:

onload = gotoDown();

5、在下载页的html文件中引入download.js,源文件如下:

/*
* 解决不同浏览器、设备下载APP跳转问题
*  波波   2016-11-11
*/
var browser = {
    versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {//移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
///获取URL参数 
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}
   function isWeiXin() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return true;
            } else {
                return false;
            }
        }     
//去下载页
function gotoDown() {
    var androidDown = "http://www.5ibobo.com/download/bobo_assitant.apk";
    var iosDown = "";//itunes下载链接
	var wxdown="http://a.app.qq.com/o/simple.jsp?pkgname=com.cutt.zhiyue.android.app540654";
    var downurl=androidDown;
     if (isWeiXin()) {
                var p = document.getElementById("wechat")
                var u = window.navigator.userAgent;
                 downurl=wxdown;
            }
            else{
	//如果为安卓手机
    if (browser.versions.mobile && browser.versions.android) {
	   downurl=androidDown; 
    }
	  if (browser.versions.mobile && browser.versions.ios) {
	   downurl=iosDown; 
    }
	  if (browser.versions.mobile && browser.versions.iPhone) {
	   downurl=iosDown; 
    }
	 if (browser.versions.mobile && browser.versions.iPad) {
	   downurl=iosDown; 
    }
	
	}
	window.location.href = downurl;
}
function gotomobilePage() {

      if (isWeiXin()) {
              window.location.href = "http://www.5ibobo.com";
            }
     if (browser.versions.mobile && browser.versions.android) {
	  window.location.href = "http://www.5ibobo.com";
    }
	if (browser.versions.mobile && browser.versions.ios)
	{  window.location.href = "http://www.5ibobo.com";
	}
}

在上述代码中大家只需替换相关链接就行,因为波波属于穷屌丝,所以我的博客APP没有IOS版(证书99刀,所以没做IOS),页面做好之后大家在测试时就会发现不管是安卓手机还是苹果手机,不管是手机浏览器还是微信都可以下载到对应的版本了,用户甚至无需点击下载按钮。

在上述代码中波波有一个地方用了getElementById,这是在下载页面写了一个DIV,给按钮传递不同的下载链接,不需要的可以去掉。

未经允许不得转载:波波助手 » 微信扫描二维码下载APP解决方案

赞 (0)

牛人热评 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址