一、前言
今天同事突然问我微信浏览器怎么下载,当时有点蒙,于是有了下面的内容。
二、实现
方法一:
1. ios利用app store直接关联打开进行下载。
2. android利用应用宝或直链下载。
$(document).ready(function () {
var flag = -1;
var is_no_weixn1 = document.getElementById("is_no_weixn1");
var is_weixn1 = document.getElementById("is_weixn1");
var is_no_weixn2 = document.getElementById("is_no_weixn2");
var is_weixn2 = document.getElementById("is_weixn2");
var is_no_weixn3 = document.getElementById("is_no_weixn3");
var is_weixn3 = document.getElementById("is_weixn3");
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
flag = '1'; //微信
} else {
flag = '0';
}
if (flag == '1') {
is_no_weixn1.style.display = "none";
is_weixn1.style.display = "block";
//is_no_weixn2.style.display = "none";
//is_weixn2.style.display = "block";
is_no_weixn3.style.display = "none";
is_weixn3.style.display = "block";
} else {
is_no_weixn1.style.display = "block";
is_weixn1.style.display = "none";
//is_no_weixn2.style.display = "block";
//is_weixn2.style.display = "none";
//alert("1");
is_no_weixn3.style.display = "block";
is_weixn3.style.display = "none";
}
});
function weixinOpen() {
$("#mask_div").removeClass("dispn");
}
function weixinClose() {
$("#mask_div").addClass("dispn");
}
function AlertTip(msg) {
$.jBox.alert(msg, "提示");
}
function fnIosDownload() {
// ios app store
location.href = "https://itunes.apple.com/us/app/wo-de-chen-yang-cheng-che-yi/id1031148610?l=zh&ls=1&mt=8";
}
function fnJumpToYYB() {
// 腾讯应用宝
location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.taihe.rideeasy";
}
<div style="width:340px; margin:0 auto;">
<!-- ios非微信时 -->
<a id="is_no_weixn3" class="install" style="margin-left:40px" onclick="fnIosDownload()">
<img src="/images/01.png" alt="" >
</a>
<!-- ios微信时 -->
<a id="is_weixn3" href="#" class="install" style="margin-left:40px" onclick="weixinOpen()">
<img src="/images/01.png" >
</a>
<!-- android非微信时 -->
<a id="is_no_weixn1" href="http://42.56.70.68:8080/taihe_wo/Ccyuploadapk/ccy20150921202026968.apk" class="install" >
<img src="/images/02.png" >
</a>
<!-- android微信时 -->
<a id="is_weixn1" class="install" onclick="fnJumpToYYB()">
<img src="/images/02.png" >
</a>
</div>
注:以上两段代码摘自“沈阳市交通局-乘车易”。
方法二
1. ios利用证书签名(个人或企业)直接跳过进行下载。
2. android利用应用宝或直链下载。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Install Geoloqi</title>
<style type="text/css">
body {
background: url(bkg.png) repeat #c5ccd4;
font-family: Helvetica, arial, sans-serif;
}
.congrats {
font-size: 16pt;
padding: 6px;
text-align: center;
}
.step {
background: white;
border: 1px #ccc solid;
border-radius: 14px;
padding: 4px 10px;
margin: 10px 0;
}
.instructions {
font-size: 10pt;
}
.arrow {
font-size: 15pt;
}
table {
width: 100%;
}
</style>
</head>
<body>
<div class="congrats">Congrats! You've been invited to the beta of Geoloqi.</div>
<div class="step">
<table><tr>
<td class="instructions">Install the<br />FilmPicker App</td>
<td width="24" class="arrow">→</td>
<td width="72" class="imagelink">
<a href="itms-services://?action=download-manifest&url=http://192.168.5.7:8080/stgApp.plist">
<img src="icon.png" height="72" width="72" />
</a>
</td>
</tr></table>
</div>
</body>
</html>
关于证书申请和签名这里我没测试过,也就不说了。想了解的可以看下文:
引用
链接地址如下:
itms-services:///?action=download-manifest&url=http://cloud.189.cn/download/client/iOS/cloud189.plist?v=D1.0.6
打开这个地址:
http://cloud.189.cn/download/client/iOS/cloud189.plist,会看到一个plist文件(证书签名后生成的文件),内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>items</key>
<array>
<dict>
<key>assets</key>
<array>
<dict>
<key>kind</key>
<string>software-package</string>
<key>url</key>
<string>http://cloud.189.cn/download/client/iOS/cloud189_1.1.1.ipa</string>
</dict>
</array>
<key>metadata</key>
<dict>
<key>bundle-identifier</key>
<string>com.21cn.cloud189</string>
<key>bundle-version</key>
<string>1.1.1</string>
<key>kind</key>
<string>software</string>
<key>title</key>
<string>天翼云存储</string>
</dict>
</dict>
</array>
</dict>
</plist>
三、原理
这里面android部分很简单,没什么可说的。主要是ios这部分,两种方法分别利用了app store和证书签名(itms-services协议)。itms-services协议可以方便我们进行测试,也可跳过app store进行下载,但是这样显然是符合apple的相关规定的。
大家可能都用过itools或pp助手等APP下载过软件,其实就是APP中的所有的可下载APP都是经过企业证书签名的,所以我们才可以直接下载安装。
四、ios两种链接对比
app store:https://itunes.apple.com/us/app/wo-de-chen-yang-cheng-che-yi/id1031148610?l=zh&ls=1&mt=8
itms-services协议:itms-services:///?action=download-manifest&url=http://cloud.189.cn/download/client/iOS/cloud189.plist?v=D1.0.6
引用
分享到:
相关推荐
h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。 微信里屏蔽了 schema 协议,...
继续往下拖动page容器,会将微信浏览器整体往下拖,漏出“该网页由XXX提供”的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会...
微信扫码下载app页面,可以选择下载android ios ,自动判断浏览器下载,浏览器下载,浏览器扫码下载,兼容所有浏览器。
比如iPhone用微信进行扫描就让他跳转appStore的下载页面,安卓机器使用微信扫描就直接跳浏览器下载。但是这二维码还有一个需求就是,用户已经下载了这个app,当用户打开app进入到注册页面时,再次扫描这个二维码时,...
ViliDownloadProcess 微信,头条内扫描二维码或点击链接地址,识别最新系统(Android或IOS),Android替换至系统替代浏览器进行Apk下载,IOS转换至App Store进行应用下载
然而奇怪的是微信app在IOS中是可以刷新页面的,但是Android中却不知道基于什么考虑,无法清除缓存也没有刷新功能,这个就给开发者设置了不小的障碍,哪有页面是最好就不改的,然后如果去改,微信浏览器缓存着css、...
if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return true;...
使用MUI框架开发微信APP,编写一套代码,就可以在IOS、Android、浏览器、百度直达号、流应用全覆盖
做手机端的前端开发,少不了对手机平台的判断。如,对于app下载,就要判断在Android平台下就显示Android下载提示;在iOS平台下就显示iOS下载提示
微信、头条内扫描二维码或者点击链接地址,识别当前系统(Android或IOS),Android跳转至系统默认浏览器进行Apk下载,IOS跳转至App Store进行应用下载 软件开发设计:PHP、QT、应用软件开发、系统软件开发、移动应用...
主要包括:Chrome、Firefox、Safari、IOS 14.3+、Android WebView、腾讯Android X5内核(QQ、微信);不支持:UC系内核(典型的支付宝),大部分国产手机厂商自研套壳娱乐浏览器,低版本IOS(11.0-14.2)上除Safari外的...
本示例代码支持PC、Android、IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。 看万遍代码不如行动一遍,新建一个html文件,把下面三段代码复制到文件内,双击浏览器打开就能进行测试...
APP 端消息离线推送:集成 unipush(个推),ios 无需上应用商店,但需要 push 的签名,Android 端离线推送需要上应用商店(申请软著并且域名备案) 后端功能详情: 系统设置:系统参数设置、APP 参数设置、vip 参数...
若不存在,计时一段时间跳到appstore 需要判断ios还是android平台下的浏览器,需要判断微信浏览器 XML/HTML Code复制内容到剪贴板 javascript>var openApp = function () { var btnOpenApp = docume
根据微信官方的说明,wa的运行环境有3个平台,IOS的webkit(苹果开源的浏览器内核),Android的X5(QQ浏览器内核),开发时用的nw.js(C++实现的web转桌面应用); 二. 为什么wa不直接运行在浏览器(webview)中,而...
不支持: UC系内核(典型的支付宝),大部分国产手机厂商自研套壳娱乐浏览器,IOS上除Safari外的其他任何形式的浏览器(包括PWA,WebClip,任何App内网页) 。 记录仪H5 :[ ] [ ] [ ] RecordApp :[ ] [ ] [ ] [ ]...
在线测试,支持大部分已实现...快捷方式: 【RecordApp 测试】,【Android、IOS App Demo】,【工具】Recorder 代码运行和静态分发,【工具】裸(RAW、WAV)PCM 转 WAV 播放测试和转码 ,查看 caniuse 浏览器支持情况。
一、需要判断客户端的平台以及是否在微信浏览器中访问 1、客户端判断 在启动APP时,Android和IOS系统处理的方式是不一样的,Android这边由于开放,可以在浏览器中通过标签以及meta标签的方式,让浏览器app获取手机...