devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

iOS和Android手机浏览器链接打开app store或应用市场下载软件讲解_通过链接打开应用商店下载app

作者：2023面试高手 | 2024-04-14 07:39:02

赞

踩

通过链接打开应用商店下载app

引言

当开发一个app出来后，通过分享引流用户去打开/下载该app软件，不同手机下载的地方不一样，比如：ios需要到苹果商店去下载，Android手机需要到各个不同的应用商店去下载(华为手机需要到华为应用商店下载，vivo手机需要到vivo手机的应用商店下载，oppo需到oppo的应用商店去下载)，该怎么处理呢？

一.上架app

开发人员开发好app后，打包生成一个自己的apk(test.apk)，然后把该apk上架到签约的手机应用商店

二.手机浏览器链接打开appstore或应用市场下载软件

用户通过分享链接，在手机浏览器中打开网页，网页上有两个按钮：打开app，下载app
当点击 '打开app'按钮时，拉起手机上安装的该app
当点击'下载app'按钮时，拉起对应手机的应用商店，下载该app

代码如下：

分享主页

  1. <?php
  3. use yii\helpers\Url;
  5. $this->title = '分享推广';
  6. ?>
  7.     <div class="common">
  8.         <div class="share-center">
  9.             <div class="share-open">
  10.                 <a href="javascript:;" target="_blank" id="openapp">
  11.                     <img class="share-open-btn"  src="/img/wap/btn_open.png" alt="打开app">
  12.                 </a>
  13.             </div>
  14.             <div class="share-dl">
  15.                 <a href="javascript:;" target="_blank" class="share-dl-apk">
  16.                     <img class="share-open-btn" src="/img/wap/btn_dl.png" alt="下载app">
  17.                 </a>
  18.             </div>
  19.         </div>
  20.     </div>
  21.     <script type="text/javascript">
  22.         <?php $this->beginBlock('js_end') ?>
  23.         $(function () {
  24.             if (isIos()) {
  25.                 if (isWeibo() || is_weixin()) {//微博微信打不开APP，(所以要做区分，这里区分和在后面的fn方法中区分都行)直接将跳转地址设置为中转页
  26.                     //之所以这里区分出微信和微博，而不是直接通过延时任务的location.href直接跳转到App Store，
  27.                     //是因为跳转到中转页会提示用户在浏览器打开，可以打开指定页面
  28.                     $("#openapp").attr("href", "<?= $url; ?>"); //url中转页地址,后台传入
  29.                 } else {
  30.                     $("#openapp").attr("href", createUrl("dsblock://"+iosId)); //iosId
  31.                 }
  32.             } else if (navigator.userAgent.match(/Android/i) != null) { // 安卓
  33.                 //判断是什么手机，并跳转到对应手机的应用商店
  34.                 type = initMobileType()
  35.                 //根据返回的手机类型，获取androidId
  36.                 if (type == "huawei") {
  37.                     androidId = 'com.xxx.app.HUAWEI'
  38.                 } else if (type == "oppo") {
  39.                     androidId = 'com.xxx.app.OPPO'
  40.                 }
  41.                 url = getMobileUrlByType(type, androidId)
  42.                 $(".share-dl-apk").attr("href", createUrl(url))
  43.                 //打开app: baidu://baiduopenwith app内核
  44.                 $("#openapp").attr("href", createUrl("baidu://baiduopenwith"));
  45.             } else { //其他手机
  46.                 //下载页面：下载公司自己渠道的app(一般apk放在阿里云/腾讯云的对象存储中)
  47.                 $("#share-dl-apk").attr("href", "<?= $apk_url; ?>"); //阿里云/腾讯云的对象存储中上传的apk
  48.             }
  49.         });
  50.  
  51.  
  52.         //通过不同安卓手机获取不同的跳转链接
  53.         function getMobileUrlByType(type,androidId) {
  54.             // androidId 如：com.xxx.app
  55.             var url = '';
  56.             if (type == 'oppo') { //oppo
  57.                 url = 'oppomarket://details?packagename=' + androidId
  58.             } else if (type == 'huawei') { // huawei
  59.                 url = 'appmarket://details?id='  + androidId
  60.             } else if (type == 'xiaomi') { // xiaomi
  61.                 url = 'mimarket://details?id='  + androidId
  62.             } else if (type == 'vivo') { // vivo
  63.                 url = 'vivomarket://details?id='  + androidId
  64.             } else if (type =='samsung') { // samsung
  65.                 url = 'samsungapps://ProductDetail/'  + androidId
  66.             } else { // other
  67.                 url = 'market://details?id='  + androidId;
  68.             }
  69.  
  70.             return url;
  71.         }
  72.  
  73.         //判断手机类型
  74.         function initMobileType() {
  75.             var sUserAgent = navigator.userAgent.toLowerCase();
  76.  
  77.             var isIphone = sUserAgent.match(/iphone/i) == "iphone";
  78.             var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
  79.             var isHonor = sUserAgent.match(/honor/i) == "honor";
  80.             var isOppo = sUserAgent.match(/oppo/i) == "oppo";
  81.             var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
  82.             var isVivo = sUserAgent.match(/vivo/i) == "vivo";
  83.             var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
  84.             var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
  85.             var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
  86.             var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
  87.  
  88.             if (isIphone) {
  89.                 return 'iphone';
  90.             } else if (isHuawei || isHonor) {
  91.                 return 'huawei';
  92.             } else if (isOppo || isOppoR15) {
  93.                 return 'oppo';
  94.             } else if (isVivo) {
  95.                 return 'vivo';
  96.             } else if (isXiaomi || isRedmi || isXiaomi2s) {
  97.                 return 'xiaomi';
  98.             } else if (isSamsung) {
  99.                 return 'samsung';
  100.             } else {
  101.                 return 'default';
  102.             }
  103.         }
  104.  
  105.         //涉及到的相关方法
  106.         function is_weixin() {
  107.             var ua = navigator.userAgent.toLowerCase();
  108.             if (ua.match(/MicroMessenger/i) == "micromessenger") {
  109.                 return true;
  110.             } else {
  111.                 return false;
  112.             }
  113.         }
  114.  
  115.         function is_qqbrowser() {
  116.             var ua = navigator.userAgent.toLowerCase();
  117.             if (/mqqbrowser|qq/i.test(ua)) {
  118.                 return true;
  119.             } else {
  120.                 return false;
  121.             }
  122.         }
  123.  
  124.         function isWeibo() {
  125.             var ua = window.navigator.userAgent;
  126.             return !!/__weibo__/.exec(ua);
  127.         }
  128.  
  129.         function isIos() {
  130.             return navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null;
  131.         }
  132.  
  133.         function isSafari() {
  134.             var ua = window.navigator.userAgent;
  135.             return !!/Version[|\/]([\w.]+)(\s\w.+)?\s?Safari|like\sGecko\)\sMobile\/\w{3,}$/.exec(ua);
  136.         }
  137.  
  138.         function createUrl(url, obj) {//拼接跳转链接及参数生成新的链接
  139.             let params = [];
  140.             for (let p in obj) {
  141.                 if (obj[p] != null && obj[p] != '') {
  142.                     params.push(p + '=' + obj[p])
  143.                 }
  144.             }
  145.             return url + '?' + params.join("&");
  146.         }
  147.  
  148.         <?php $this->endBlock() ?>
  149.     </script>
  150. <?php $this->registerJs($this->blocks['js_end'], \yii\web\View::POS_END); ?>

中转页

  1. <?php
  3. use yii\helpers\Url;
  5. $this->registerJsFile('/js/jquery-1.4.1.min.js', ['depends' => ['frontend\assets\WapAppAsset'], 'position' => $this::POS_HEAD]);
  6. $this->registerJsFile('/js/clipboard-1.7.1.min.js', ['depends' => ['frontend\assets\WapAppAsset'], 'position' => $this::POS_HEAD]);
  8. $this->title = '分享推广 | 下载';
  9. ?>
  10.  
  11. <style>
  12.     .share-top {
  13.         float: left;
  14.         width: 400px;
  15.         height: 400px;
  16.         text-align: center;
  17.     }
  18.  
  19.     .share-center {
  20.         margin-left: 10%;
  21.         height: 750px;
  22.     }
  23.  
  24.     .share-btn {
  25.         float: left;
  26.         width: 40%;
  27.         height: 8%;
  28.         position: relative;
  29.     }
  30. </style>
  31. <div class="common">
  32.     <div class="share-top" id="tip">
  33.         已安装，在浏览器打开
  34.     </div>
  35.  
  36.     <div class="share-center">
  37.         <div class="share-dl">
  38.             <a class="open-button download-button" id="install">
  39.                 <img src="/img/wap/btn_dl.png" class="share-btn" alt="下载app">
  40.             </a>
  41.         </div>
  42.  
  43.         <div class="share-open">
  44.             <a class="open-button" id="open">
  45.                 <img src="/img/wap/btn_open.png" class="share-btn" alt="打开app">
  46.             </a>
  47.         </div>
  48.     </div>
  49. </div>
  50.  
  51. <script type="text/javascript">
  52.     <?php $this->beginBlock('js_end') ?>
  53.     $(function () {
  54.         if (is_weixin() || isWeibo()) {
  55.             showDiv("#tip", true);
  56.             showDiv("#open", false);
  57.         } else {
  58.             showDiv("#tip", false);
  59.             showDiv("#open", true);
  60.         }
  61.  
  62.         if (isIos()) {//iOS
  63.              $("#open").attr("href", "dsblockchain://" );
  64.              $("#install").attr("href", "App Store推广链接");
  65.         } else {//安卓
  66.             //打开app：baidu://baiduopenwith app内核
  67.             $("#open").attr("href", "baidu://baiduopenwith");
  68.  
  69.             if (is_weixin()) {//微信无法下载，打开应用宝推广页
  70.                 $("#install").attr("href", "应用宝推广链接");
  71.             } else {
  72.                 //判断是什么手机，并跳转到对应手机的应用商店
  73.                 type = initMobileType()
  74.                 //根据返回的手机类型，获取androidId
  75.                 if (type == "huawei") {
  76.                     androidId = 'com.xxx.app.HUAWEI'
  77.                 } else if (type == "oppo") {
  78.                     androidId = 'com.xxx.app.OPPO'
  79.                 }
  80.                 url = getMobileUrlByType(type, androidId)
  81.                 if (!url) {
  82.                     url = "<?= $apk_url; ?>";  //阿里云/腾讯云的对象存储中上传的apk
  83.                 }
  84.             $("#install").attr("href", url);
  85.             } 
  86.         }
  87.     });
  88.  
  89.  
  90.     //通过不同安卓手机获取不同的跳转链接
  91.     function getMobileUrlByType(type) {
  92.         // androidId 如：com.xxx.app
  93.         var url = '';
  94.         if (type == 'oppo') { //oppo
  95.             url = 'oppomarket://details?packagename='
  96.         } else if (type == 'huawei') { // huawei
  97.             url = 'appmarket://details?id=com.bzyl.mahjongtown.HUAWEI'
  98.         } else if (type == 'xiaomi') { // xiaomi
  99.             url = 'mimarket://details?id='
  100.         } else if (type == 'vivo') { // vivo
  101.             url = 'vivomarket://details?id='
  102.         } else if (type =='samsung') { // samsung
  103.             url = 'samsungapps://ProductDetail/'
  104.         } else { // other
  105.             url = '';
  106.         }
  107.  
  108.         return url;
  109.     }
  110.  
  111.     //判断手机类型
  112.     function initMobileType() {
  113.         var sUserAgent = navigator.userAgent.toLowerCase();
  114.  
  115.         var isIphone = sUserAgent.match(/iphone/i) == "iphone";
  116.         var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
  117.         var isHonor = sUserAgent.match(/honor/i) == "honor";
  118.         var isOppo = sUserAgent.match(/oppo/i) == "oppo";
  119.         var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
  120.         var isVivo = sUserAgent.match(/vivo/i) == "vivo";
  121.         var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
  122.         var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
  123.         var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
  124.         var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
  125.  
  126.         if (isIphone) {
  127.             return 'iphone';
  128.         } else if (isHuawei || isHonor) {
  129.             return 'huawei';
  130.         } else if (isOppo || isOppoR15) {
  131.             return 'oppo';
  132.         } else if (isVivo) {
  133.             return 'vivo';
  134.         } else if (isXiaomi || isRedmi || isXiaomi2s) {
  135.             return 'xiaomi';
  136.         } else if (isSamsung) {
  137.             return 'samsung';
  138.         } else {
  139.             return 'default';
  140.         }
  141.     }
  142.  
  143.     function createUrl(url, obj) {//拼接跳转链接及参数生成新的链接
  144.         let params = [];
  145.         for (let p in obj) {
  146.             if (obj[p] != null && obj[p] != '') {
  147.                 params.push(p + '=' + obj[p])
  148.             }
  149.         }
  150.         return url + '?' + params.join("&");
  151.     }
  152.  
  153.     function isIos() {
  154.         return navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null;
  155.     }
  156.  
  157.     //涉及到的相关方法
  158.     function is_weixin() {
  159.         var ua = navigator.userAgent.toLowerCase();
  160.         if (ua.match(/MicroMessenger/i) == "micromessenger") {
  161.             return true;
  162.         } else {
  163.             return false;
  164.         }
  165.     }
  166.  
  167.     function isWeibo() {
  168.         var ua = window.navigator.userAgent;
  169.         return !!/__weibo__/.exec(ua);
  170.     }
  171.  
  172.     function showDiv(divName, isShow) {
  173.         if (isShow) {
  174.             $(divName).show();
  175.         } else {
  176.             $(divName).hide();
  177.         }
  178.     }
  179.     <?php $this->endBlock() ?>
  180. </script>
  181. <?php $this->registerJs($this->blocks['js_end'], \yii\web\View::POS_END); ?>
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号