iOS和Android手机浏览器链接打开app store或应用市场下载软件讲授 ...

引言

  <blockquote class="kdocs-blockquote" style="">   当开辟一个app出来后，通过分享引流用户去打开/下载该app软件，差异手机下载的地方不一样，比如：ios必要到苹果商店去下载，Android手机必要到各个差异的应用商店去下载(华为手机必要到华为应用商店下载，vivo手机必要到vivo手机的应用商店下载，oppo需到oppo的应用商店去下载)，该怎么处理呢？    一.上架app

  <blockquote class="kdocs-blockquote" style="">   开辟职员开辟好app后，打包生成一个自己的apk(test.apk)，然后把该apk上架到签约的手机应用商店    二.手机浏览器链接打开appstore或应用市场下载软件

  <blockquote class="kdocs-blockquote" style="">   用户通过分享链接，在手机浏览器中打开网页，网页上有两个按钮：打开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.         });
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.             }
70.             return url;
71.         }
73.         //判断手机类型
74.         function initMobileType() {
75.             var sUserAgent = navigator.userAgent.toLowerCase();
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-";
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.         }
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.         }
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.         }
124.         function isWeibo() {
125.             var ua = window.navigator.userAgent;
126.             return !!/__weibo__/.exec(ua);
127.         }
129.         function isIos() {
130.             return navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null;
131.         }
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.         }
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.         }
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. ?>
11. <style>
12.     .share-top {
13.         float: left;
14.         width: 400px;
15.         height: 400px;
16.         text-align: center;
17.     }
19.     .share-center {
20.         margin-left: 10%;
21.         height: 750px;
22.     }
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>
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>
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>
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.         }
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");
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.     });
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.         }
108.         return url;
109.     }
111.     //判断手机类型
112.     function initMobileType() {
113.         var sUserAgent = navigator.userAgent.toLowerCase();
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-";
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.     }
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.     }
153.     function isIos() {
154.         return navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null;
155.     }
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.     }
167.     function isWeibo() {
168.         var ua = window.navigator.userAgent;
169.         return !!/__weibo__/.exec(ua);
170.     }
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); ?>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。