`

微信浏览器中直接下载ios、android的APP

阅读更多
一、前言
    今天同事突然问我微信浏览器怎么下载,当时有点蒙,于是有了下面的内容。


二、实现
方法一:
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


引用
更详细的关于itms-services协议可参考:
http://blog.csdn.net/sing_sing/article/details/7489906


分享到:
评论

相关推荐

    微信跳转到默认浏览器下载app.zip

    在移动互联网领域,微信作为一款超级App,拥有庞大的用户基数,但其内置的浏览器对于某些特定功能,如大文件下载、复杂交互等支持有限。因此,开发者常常需要将用户引导到设备的默认浏览器来完成这些操作,比如下载...

    微信跳转到浏览器下载APP实现代码

    是你的APP下载地址,`your_app_name.apk`是APK文件的名称。 3. **CSS样式(css)** CSS用于美化HTML页面,确保点击按钮的视觉效果吸引人。例如,你可以设置以下样式: ```css a { display: block; width: 200...

    轻松实现微信中扫二维码直接下载APP(整合IOS和安卓).docx

    集成这两种方法后,无论是iOS还是Android用户,在微信中扫描二维码或点击下载链接,都能无缝地跳转到外部浏览器进行APP下载。这种方式不仅提高了用户体验,降低了用户流失的可能性,而且可以有效提升推广的转化率,...

    微信打开外部链接下载APP引导

    在iOS中,由于Safari的安全策略,不能直接通过`&lt;a&gt;`标签触发APP下载。但是,可以使用Smart App Banners,这是一种Web页面上的元标签,如`&lt;meta name="apple-itunes-app" content="app-id=myAppId"&gt;`,当用户在...

    app自动识别ios或安卓手机,微信浏览器,并下载相应的app的安装包

    自动识别是ios访问还是安卓手机访问,页面动态显示成相应的内容,并下载相应的app的安装包,index.zip解压后就是demo源码

    JS判断是否在微信浏览器打开

    开发者可以根据这个字符串中的关键字来判断用户是否在微信浏览器中打开了页面。 #### 示例代码详解 下面是一段用于判断当前页面是否在微信浏览器中打开的示例代码: ```javascript if (browser.versions.mobile) ...

    h5页面唤起app如果没安装就跳转下载(iOS和Android)

    h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。 微信里屏蔽了 schema 协议,...

    5+APP和手机浏览器,唤醒微信App.zip

    在移动互联网时代,微信已经成为日常生活中不可或缺的一部分,无论是社交、工作还是娱乐,它都...同时,对于用户来说,这也意味着更便捷的服务,因为他们可以直接在浏览器或第三方应用中启动微信,无需频繁切换应用。

    微信扫码下载app页面

    4. **浏览器扫码下载**:在某些情况下,用户可能不习惯或不能直接通过微信扫描二维码。这时,页面需要提供一个手动输入识别码或点击“浏览器扫码”按钮的功能,以便用户在浏览器中手动完成下载。这通常通过调用手机...

    JavaScript中防止微信浏览器被整体拖动的方法

    在微信浏览器中开发网页时,有时会出现用户在页面顶部或底部拖动时,导致整个浏览器窗口跟随拖动的情况,这会影响用户体验,特别是对于iPhone用户。为了解决这个问题,我们可以利用JavaScript事件监听器来控制页面的...

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

    这时需要微信跳转外部浏览器打开页面的功能,对于ios用户默认可以通过微信内置浏览器点击右上角的更多按钮从而选择“在浏览器中打开”,对于安卓用户则可以实现微信内直接跳出到手机默认浏览器。但是很多用户其实并...

    iOS和Android用同一个二维码实现跳转下载链接的方法

    比如iPhone用微信进行扫描就让他跳转appStore的下载页面,安卓机器使用微信扫描就直接跳浏览器下载。但是这二维码还有一个需求就是,用户已经下载了这个app,当用户打开app进入到注册页面时,再次扫描这个二维码时,...

    手机APP下载页面判断是否微信

    标题所提及的"手机APP下载页面判断是否微信",主要涉及到的技术点是检测用户访问页面的环境,特别是当用户在微信内置浏览器中打开APK下载链接时,如何确保用户能够顺利下载。微信为了安全和用户体验,限制了直接在...

    原生仿微信社交社区即时通讯聊天双端APP源码开源 带PC客户端

    原生仿微信社交社区即时通讯聊天双端APP源码开源,是针对移动设备(iOS、Android)和桌面PC(PC端)开发的一款社交应用。它提供了类似微信的全面功能,包括文字聊天、语音通话、视频通话以及群聊等功能,旨在为用户...

    微信扫一扫智能判断IOS和Android

    在这个特定的场景中,"微信扫一扫智能判断IOS和Android" 是一种技术手段,旨在通过用户使用微信扫一扫时,自动识别他们所使用的操作系统,从而提供适配的下载体验。 首先,我们要理解的是微信扫一扫如何进行智能...

    js判断浏览器的环境(pc端,移动端,还是微信浏览器)

    本文将详细讲解如何使用JavaScript来判断用户是在PC端、移动端还是微信浏览器环境下访问网站。 首先,我们可以使用`navigator.userAgent`对象来获取浏览器发送的用户代理字符串,这个字符串包含了关于浏览器和操作...

    ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

    可以利用`navigator.userAgent`属性获取用户的浏览器标识,然后通过正则表达式判断用户是使用Android还是iOS设备。例如: ```javascript var u = navigator.userAgent; var isAndroid = u.indexOf('Android') &gt; -1 ...

    原生仿微信即时通讯聊天安卓端IOS端APP源码开源 带PC客户端+文档说明.zip

    该压缩包包含的是一个完整的即时通讯聊天应用的源代码,旨在模仿微信的功能和用户体验,适用于Android和iOS平台,并且还包括了PC客户端以及相关的文档说明。这个项目的核心目标是提供一个可自定义、可扩展的解决方案...

    js判断手机浏览器操作系统和微信浏览器的方法

    以上代码展示了判断Android和iOS平台的方法,以及如何区分是否是微信浏览器。在实际应用中,我们可以通过这些判断,进一步决定展示哪个平台的下载按钮或是其他操作指引。 在JavaScript中,还可以通过navigator....

    apk微信扫码下载页面

    在Android平台上,APK文件是应用安装包的格式,相当于iOS中的IPA文件,用于分发和安装移动设备上的应用程序。"apk微信扫码下载页面"这个标题暗示了一个与微信相关的功能,即通过扫描二维码来下载APK应用。这种功能...

Global site tag (gtag.js) - Google Analytics