背景: 手机端ios打包成为ipa文件,安卓打包成为apk文件.现在要求通过扫码完成ios和安卓的下载工作
要求: ios 下载需要https 可以不需要域名, 手机可以访问服务器
整体流程如下:
操作步骤:
- 配置ios,安卓的通用下载页面.该页面完成安卓ios 不同渠道走不同的下载路径
- 安卓直接走文件下载
- Ios走代理文件下载
- 将下载帮助页生成二维码页面
一:通用下载页.js识别不同端走不同的下载路径
- 安卓直接下载就是识别完客户端类型之后,将地址更改为jpk文件的所在文件就可以下载了
- 识别客户端类型是ios后,将请求地址指向下载的代理文件地址也就是.plist文件.然后通过配置代理文件来实现ios的下载功能
相关代码.通用下载页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天柱山app下载</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<style>
body, div, span, i {
font-size: 100%;
box-sizing: border-box;
}
.guide-wrap {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #666;
}
.guide-item {
display: block;
background: #fff;
}
.guide-text {
width: 15rem;
position: absolute;
top: 10%;
left: 60%;
transform: translate(-50%, -50%);
padding: 0.4rem 1rem;
border-radius: 5rem;
border-top-right-radius: 1rem;
overflow: hidden;
}
.gudde-btn {
width: 10rem;
text-align: center;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, 0%);
padding: 0.4rem 1rem;
border-radius: 5rem;
overflow: hidden;
}
@keyframes fade {
from {top: 0;}
to {top: 100vh;}
}
@-webkit-keyframes fade {
from {top: 0;}
to {top: 100vh;}
}
.wrap-fade {
animation: fade 3s ease-in;
}
</style>
</head>
<body>
<script type="text/javascript">
(function (ua) {
// 可以利用ua模拟各终端情况{ua的值可以在userAgent.json文件中找各个终端的userAgent}
var baseUrl = '',
iosItemService = '',
iosPlist = '',
// iosFileName = 'static/app/com.bonc.tzm.app_1.0.4.ipa',
androidFileName = '',
userAgent = ua || navigator.userAgent;
// 下载ios安装包
function getIOS () {
console.log('下载ios安装包')
window.location.replace(iosItemService + baseUrl + iosPlist)
}
// 下载android安装包
function getAndroid () {
console.log('下载android安装包')
window.location.replace(baseUrl + androidFileName)
}
/*
判断终端是否为IOS
*/
function isIOS (UA) {
return !!UA.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}
/* 判断终端是否为Android */
function isAndroid (UA) {
return UA.indexOf('Android') > -1 || UA.indexOf('Linux') > -1;
}
/* 特例：判断是否为华为 - 用Android包, 但这会导致在win pc下 也会自动下载Android包 */
function isHuaWei (UA) {
return !!(UA.indexOf('Windows NT') > -1);
}
/*判断是否为微信或者QQ*/
function isWeChatOrQQ (UA) {
const ua = UA.toLowerCase();
if (ua.indexOf('micromessenger') > -1) {
// 如果是微信
// alert('是微信')
return true;
} else if (/mqqbrowser[\S|\s]*qq/.test(ua) || / qq/.test(ua)) {
alert('是QQ')
// 如果是QQ
return true;
}
return false;
} /*
如果是微信或者QQ, 所进行的处理 - 进行引导信息的渲染
1- 设置遮罩提示信息
2- '亲，请点击右上角，选择“在浏览器中打开”，谢谢'
2-1 下方：按钮：“我知道了” - 并给该元素绑定点击事件，点击后销毁遮罩
3- 让右上角部分高亮
4- 画一条连接线，链接提示和右上角高亮区域
*/
function getGuideRender () {
// 用于引导的
const guideHtmlStr = `
<div class="guide-wrap">
<span class="guide-item guide-text">亲，请点击右上角，选择“在浏览器中打开”，谢谢~</span>
</div>`;
document.write(guideHtmlStr);
} // 功能脚本-根据终端进行下载
(function () {
if (isWeChatOrQQ(userAgent)) {
// 是微信或者QQ，使页面变为引导页，引导用户在浏览器中打开该链接
getGuideRender();
} else if (isAndroid(userAgent) || isHuaWei(userAgent)) {
// 浏览器环境，直接下载
getAndroid();
} else if (isIOS(userAgent)) {
getIOS();
} else {
alert('无法判断终端操作系统类型');
document.write('userAgent: \t', userAgent);
}
})()
})()
</script>
</body>
</html>代理文件
<?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>
<!--ipa文件所在文件位置 要求用https访问到 -->
<string></string>
</dict>
<dict>
<key>kind</key>
<string>full-size-image</string>
<key>needs-shine</key>
<false/>
<key>url</key>
<string></string>
</dict>
<dict>
<key>kind</key>
<string>display-image</string>
<key>needs-shine</key>
<false/>
<key>url</key>
<!-- 放置下载应用的图标文件-->
<string> </string>
</dict>
</array>
<key>metadata</key>
<dict>
<key></key>
<string></string>
<key></key>
<string>2.0.0</string>
<key>kind</key>
<string>software</string>
<key>subtitle</key>
<string></string>
<key>title</key>
<string></string>
</dict>
</dict>
</array>
</dict>
</plist>最后来一个成功的案例吧.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
