通过扫码下载安卓和ios安装包

背景:  手机端ios打包成为ipa文件,安卓打包成为apk文件.现在要求通过扫码完成ios和安卓的下载工作

要求: ios 下载需要https 可以不需要域名, 手机可以访问服务器

整体流程如下:

操作步骤:

  1. 配置ios,安卓的通用下载页面.该页面完成安卓ios 不同渠道走不同的下载路径
  2. 安卓直接走文件下载
  3. Ios走代理文件下载
  4. 将下载帮助页生成二维码页面

一:通用下载页.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>
 

最后来一个成功的案例吧.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/70405.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac 使用Charles对苹果手机和安卓手机进行抓包

今天给大家分享在Mac下&#xff0c;使用Charles(青花瓷)分别对苹果手机和安卓手机进行抓包的操作流程。 前提&#xff1a;在Mac上安装Charles&#xff0c;网上很多安装包&#xff0c;自行下载。 在此提供官网链接&#xff1a;https://www.charlesproxy.com/download/ 一&…

不会电脑的可以学计算机吗?

前言 可以&#xff0c;学计算机都是从零基础开始学习。只要自己选择计算机&#xff0c;从开头的时候就一直跟着走&#xff0c;把计算机基础学好&#xff0c;然后再学你喜欢的专业知识&#xff0c;技术&#xff0c;把这些慢慢的跟着走就行了&#xff0c;咱们总之就是不要懈怠。…

查找文献网址

1、http://www.sci-hub.ac.cn/ 2、http://so.hiqq.com.cn/ 3、https://sci-hub.org.cn/ 4、https://www.library.ac.cn/?fa403-us8225 5、https://www.medsci.cn/sci/ 20220918更新&#xff1a; 有时候第四个链接打不开&#xff0c;于是我把里面包含的链接们都存下来了&…

为什么某些网站有些地方打得开,有些地方打不开?

原文地址为&#xff1a; 为什么某些网站有些地方打得开&#xff0c;有些地方打不开&#xff1f; 我们都知道&#xff0c;网站是由 域名、空间、网页组成&#xff0c;如果这三部分中有其一出问题&#xff0c;网站都不能打开。我们在浏览器输入要访问的网站网址时&#xff0c;我…

AI语音编程来了!GitHub 势要颠覆程序员开发

作者 | 王启隆 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 十五年前&#xff0c;GitHub 的第一行代码诞生。从那时起&#xff0c;GitHub 的开源先驱将全球开发者集体视为目标&#xff0c;提供开发者们所需的一切&#xff0c;这一使命在 GitHub 平台的每次迭代…

谷歌(google)、百度、必应d等高级搜索指令使用

Google高级搜索语法指令 1.allinanchor anchor是一处说明性的文字&#xff0c;它标注说明了这个链接可能跳转到其它的网页或跳转到当前网页的不同地方。当我们用allinanchor提交查询的时候&#xff0c;Google会限制搜索结果必须是那些在anchor文字里包含了我们所有查询关键词…

特斯拉机器人发布!马斯克:最快明年量产,价格不到14万,搬砖送货都能干...

梦晨 詹士 发自 凹非寺量子位 | 公众号 QbitAI 一年一度特斯拉AI DAY&#xff0c; 开场就王炸&#xff01; 马斯克只用3分钟简短热场&#xff0c;人形机器人擎天柱 &#xff08;Optimus&#xff09;直接登台亮相。 不同于去年概念PPT上光滑圆润的外形&#xff0c;今年的擎天柱金…

模型训练系列:1、用清华ChatGLM-6B模型部署自己的本地AI助手

最近清华大学开源的ChatGLM-6B语言模型在国际上大出风头&#xff0c;仅仅62亿参数的小模型&#xff0c;能力却很强。很期待他们后续1300亿参数模型130B的发布。 为什么一些能力较弱的小模型&#xff0c;这么受追捧&#xff1f;因为ChatGPT、GPT-4虽好&#xff0c;毕竟被国外封锁…

腾讯云服务器小白保姆级教程

现在都是上云服务器&#xff0c;小白拿到一个云服务器怎么办&#xff1f; 1、选择 这里选择的是腾讯云轻量服务器&#xff0c;主要是便宜&#xff0c;另外自己主要是自己练习&#xff0c;对性能什么的也就没有啥要求了。 购买云服务器之前要进行实名验证。实名的微信可以和注…

文科生学大数据分析吃力吗

前段时间来咨询的学员&#xff0c;0基础想报名大大数据分析培训班&#xff0c;但由于自己是文科生&#xff0c;做的是人力资源的工作&#xff0c;所以一直在犹豫该不该转行从事大数据分析行业。文科生可以学大数据分析吗?今天就针对文科生的问题详细的分析一下。 在选择大数据…

文科生比不过理科生,转码IT互联网将成趋势?

今天看到“文科生转码或成趋势”的话题&#xff0c;觉得还是非常有意思哈&#xff0c;所以来聊聊看~ 值得一提的是&#xff0c;虽然现在高中考试改制后&#xff0c;已不再区分文理科生&#xff08;理化生史地政6选3&#xff09;&#xff0c;但是大学本科及研究生以上&#xff…

文科妹子都会用 GitHub,你这个工科生还等什么

在某乎上刷到一条关于 GitHub 的留言&#xff0c;如下&#xff1a; 点赞人数还不少&#xff0c;这说明还真有不少工科生不会用 GitHub&#xff0c;你看大小写都没有区分&#xff08;手动狗头&#xff09;。所以我就想写篇文章科普下&#xff0c;“新手如何使用 GitHub&#xff…

文科生“转码农“风继续 理科生慌吗?Phyon最热

程序员是一个很热门的职业&#xff0c;至少对于文科生而言&#xff0c;这两年持续“转码农”风在继续&#xff0c;这会不会给理科生们带来压力呢&#xff1f; 其实&#xff0c;“转码”&#xff0c;即转行成为程序员&#xff0c;由于其高就业率、高薪资而在求职市场上大受欢迎&…

chatgpt赋能python:Python操作数据库:连接、查询和更新

Python操作数据库&#xff1a;连接、查询和更新 在开发Web应用或者处理数据时&#xff0c;操作数据库是必不可少的步骤。Python提供了许多标准库和第三方库来连接和操作数据库&#xff0c;如sqlite3、MySQLdb、psycopg2等。在本文中&#xff0c;我们将介绍如何使用Python连接、…

AI算力碎片化:矩阵乘法的启示

尽管AI的发展取得了巨大进步&#xff0c;但编译器LLVM之父Chris Lattner认为&#xff0c;AI技术应用并不深入&#xff0c;远远没有发挥出已有机器学习研究的所有潜力。而AI系统和工具的单一化和碎片化正是造成这一问题的根源。 为了让AI发挥其真正的潜力&#xff0c;计算碎片化…

APP后台以及用户数据被泄露 该如何防护

近期我们接到许多DK平台反馈APP里的用户信息数据被泄露&#xff0c;导致用户经常受到境外香港电话推广骚扰&#xff0c;有些用户甚至被网络诈骗&#xff0c;而且用户当天申请填写表单里的手机号&#xff0c;没过多久就泄露了&#xff0c;紧接着香港电话就会打过来&#xff0c;询…

ap计算机科学5分率,AP考试5分率及难度分析

2019年的AP报名窗口已经开启&#xff0c;AP选考究竟要注意些什么&#xff1f;如何结合科目难度和自身情况&#xff0c;申请的时候尽可能地凸显的优势呢&#xff1f;今天老师从AP各科的难度和5分率进行分析&#xff0c;让大家了解过往战况&#xff0c;好好制定最适合的选考策略。…

ALEVEL数学、物理、化学、生物与国内考试的区别

A-Level考试中数学、物理、化学、生物是常考热门科目&#xff0c;这些科目在国内高考中也有对应的科目&#xff0c;那么&#xff0c;两者之间有什么区别呢&#xff1f; 1、A-Level物理与国内高考物理 从知识范围广度来看&#xff0c;A-Level物理更胜一筹&#xff0c;涉及的知识…

PTA L2-046 天梯赛的赛场安排 (25 分)

天梯赛使用 OMS 监考系统&#xff0c;需要将参赛队员安排到系统中的虚拟赛场里&#xff0c;并为每个赛场分配一位监考老师。每位监考老师需要联系自己赛场内队员对应的教练们&#xff0c;以便发放比赛账号。为了尽可能减少教练和监考的沟通负担&#xff0c;我们要求赛场的安排满…

分析数学成绩,尽然我考了0分

编程语言:Python 简单的数据分析 导入 pygal 废话不多说直接上代码&#xff01; import pygal radar_chart pygal.Radar() radar_chart.title 数学考试成绩分析 radar_chart.x_labels [班长, 学委, 体育委员, 学渣, 学霸,我] radar_chart.add(高三(5)班, [86, 96, 69, 49, …