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

引言

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

一.上架app

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

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

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

代码如下：

分享主页

<?phpuse yii\helpers\Url;$this->title = '分享推广';
?><div class="common"><div class="share-center"><div class="share-open"><a href="javascript:;" target="_blank" id="openapp"><img class="share-open-btn"  src="/img/wap/btn_open.png" alt="打开app"></a></div><div class="share-dl"><a href="javascript:;" target="_blank" class="share-dl-apk"><img class="share-open-btn" src="/img/wap/btn_dl.png" alt="下载app"></a></div></div></div><script type="text/javascript"><?php $this->beginBlock('js_end') ?>$(function () {if (isIos()) {if (isWeibo() || is_weixin()) {//微博微信打不开APP，(所以要做区分，这里区分和在后面的fn方法中区分都行)直接将跳转地址设置为中转页//之所以这里区分出微信和微博，而不是直接通过延时任务的location.href直接跳转到App Store，//是因为跳转到中转页会提示用户在浏览器打开，可以打开指定页面$("#openapp").attr("href", "<?= $url; ?>"); //url中转页地址,后台传入} else {$("#openapp").attr("href", createUrl("dsblock://"+iosId)); //iosId}} else if (navigator.userAgent.match(/Android/i) != null) { // 安卓//判断是什么手机，并跳转到对应手机的应用商店type = initMobileType()//根据返回的手机类型，获取androidIdif (type == "huawei") {androidId = 'com.xxx.app.HUAWEI'} else if (type == "oppo") {androidId = 'com.xxx.app.OPPO'}url = getMobileUrlByType(type, androidId)$(".share-dl-apk").attr("href", createUrl(url))//打开app: baidu://baiduopenwith app内核$("#openapp").attr("href", createUrl("baidu://baiduopenwith"));} else { //其他手机//下载页面：下载公司自己渠道的app(一般apk放在阿里云/腾讯云的对象存储中)$("#share-dl-apk").attr("href", "<?= $apk_url; ?>"); //阿里云/腾讯云的对象存储中上传的apk}});//通过不同安卓手机获取不同的跳转链接function getMobileUrlByType(type,androidId) {// androidId 如：com.xxx.appvar url = '';if (type == 'oppo') { //oppourl = 'oppomarket://details?packagename=' + androidId} else if (type == 'huawei') { // huaweiurl = 'appmarket://details?id='  + androidId} else if (type == 'xiaomi') { // xiaomiurl = 'mimarket://details?id='  + androidId} else if (type == 'vivo') { // vivourl = 'vivomarket://details?id='  + androidId} else if (type =='samsung') { // samsungurl = 'samsungapps://ProductDetail/'  + androidId} else { // otherurl = 'market://details?id='  + androidId;}return url;}//判断手机类型function initMobileType() {var sUserAgent = navigator.userAgent.toLowerCase();var isIphone = sUserAgent.match(/iphone/i) == "iphone";var isHuawei = sUserAgent.match(/huawei/i) == "huawei";var isHonor = sUserAgent.match(/honor/i) == "honor";var isOppo = sUserAgent.match(/oppo/i) == "oppo";var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";var isVivo = sUserAgent.match(/vivo/i) == "vivo";var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";var isRedmi = sUserAgent.match(/redmi/i) == "redmi";var isSamsung = sUserAgent.match(/sm-/i) == "sm-";if (isIphone) {return 'iphone';} else if (isHuawei || isHonor) {return 'huawei';} else if (isOppo || isOppoR15) {return 'oppo';} else if (isVivo) {return 'vivo';} else if (isXiaomi || isRedmi || isXiaomi2s) {return 'xiaomi';} else if (isSamsung) {return 'samsung';} else {return 'default';}}//涉及到的相关方法function is_weixin() {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}}function is_qqbrowser() {var ua = navigator.userAgent.toLowerCase();if (/mqqbrowser|qq/i.test(ua)) {return true;} else {return false;}}function isWeibo() {var ua = window.navigator.userAgent;return !!/__weibo__/.exec(ua);}function isIos() {return navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null;}function isSafari() {var ua = window.navigator.userAgent;return !!/Version[|\/]([\w.]+)(\s\w.+)?\s?Safari|like\sGecko\)\sMobile\/\w{3,}$/.exec(ua);}function createUrl(url, obj) {//拼接跳转链接及参数生成新的链接let params = [];for (let p in obj) {if (obj[p] != null && obj[p] != '') {params.push(p + '=' + obj[p])}}return url + '?' + params.join("&");}<?php $this->endBlock() ?></script>
<?php $this->registerJs($this->blocks['js_end'], \yii\web\View::POS_END); ?>

中转页

<?phpuse yii\helpers\Url;$this->registerJsFile('/js/jquery-1.4.1.min.js', ['depends' => ['frontend\assets\WapAppAsset'], 'position' => $this::POS_HEAD]);
$this->registerJsFile('/js/clipboard-1.7.1.min.js', ['depends' => ['frontend\assets\WapAppAsset'], 'position' => $this::POS_HEAD]);$this->title = '分享推广 | 下载';
?><style>.share-top {float: left;width: 400px;height: 400px;text-align: center;}.share-center {margin-left: 10%;height: 750px;}.share-btn {float: left;width: 40%;height: 8%;position: relative;}
</style>
<div class="common"><div class="share-top" id="tip">已安装，在浏览器打开</div><div class="share-center"><div class="share-dl"><a class="open-button download-button" id="install"><img src="/img/wap/btn_dl.png" class="share-btn" alt="下载app"></a></div><div class="share-open"><a class="open-button" id="open"><img src="/img/wap/btn_open.png" class="share-btn" alt="打开app"></a></div></div>
</div><script type="text/javascript"><?php $this->beginBlock('js_end') ?>$(function () {if (is_weixin() || isWeibo()) {showDiv("#tip", true);showDiv("#open", false);} else {showDiv("#tip", false);showDiv("#open", true);}if (isIos()) {//iOS$("#open").attr("href", "dsblockchain://" );$("#install").attr("href", "App Store推广链接");} else {//安卓//打开app：baidu://baiduopenwith app内核$("#open").attr("href", "baidu://baiduopenwith");if (is_weixin()) {//微信无法下载，打开应用宝推广页$("#install").attr("href", "应用宝推广链接");} else {//判断是什么手机，并跳转到对应手机的应用商店type = initMobileType()//根据返回的手机类型，获取androidIdif (type == "huawei") {androidId = 'com.xxx.app.HUAWEI'} else if (type == "oppo") {androidId = 'com.xxx.app.OPPO'}url = getMobileUrlByType(type, androidId)if (!url) {url = "<?= $apk_url; ?>";  //阿里云/腾讯云的对象存储中上传的apk}$("#install").attr("href", url);} }});//通过不同安卓手机获取不同的跳转链接function getMobileUrlByType(type) {// androidId 如：com.xxx.appvar url = '';if (type == 'oppo') { //oppourl = 'oppomarket://details?packagename='} else if (type == 'huawei') { // huaweiurl = 'appmarket://details?id=com.bzyl.mahjongtown.HUAWEI'} else if (type == 'xiaomi') { // xiaomiurl = 'mimarket://details?id='} else if (type == 'vivo') { // vivourl = 'vivomarket://details?id='} else if (type =='samsung') { // samsungurl = 'samsungapps://ProductDetail/'} else { // otherurl = '';}return url;}//判断手机类型function initMobileType() {var sUserAgent = navigator.userAgent.toLowerCase();var isIphone = sUserAgent.match(/iphone/i) == "iphone";var isHuawei = sUserAgent.match(/huawei/i) == "huawei";var isHonor = sUserAgent.match(/honor/i) == "honor";var isOppo = sUserAgent.match(/oppo/i) == "oppo";var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";var isVivo = sUserAgent.match(/vivo/i) == "vivo";var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";var isRedmi = sUserAgent.match(/redmi/i) == "redmi";var isSamsung = sUserAgent.match(/sm-/i) == "sm-";if (isIphone) {return 'iphone';} else if (isHuawei || isHonor) {return 'huawei';} else if (isOppo || isOppoR15) {return 'oppo';} else if (isVivo) {return 'vivo';} else if (isXiaomi || isRedmi || isXiaomi2s) {return 'xiaomi';} else if (isSamsung) {return 'samsung';} else {return 'default';}}function createUrl(url, obj) {//拼接跳转链接及参数生成新的链接let params = [];for (let p in obj) {if (obj[p] != null && obj[p] != '') {params.push(p + '=' + obj[p])}}return url + '?' + params.join("&");}function isIos() {return navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null;}//涉及到的相关方法function is_weixin() {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}}function isWeibo() {var ua = window.navigator.userAgent;return !!/__weibo__/.exec(ua);}function showDiv(divName, isShow) {if (isShow) {$(divName).show();} else {$(divName).hide();}}<?php $this->endBlock() ?>
</script>
<?php $this->registerJs($this->blocks['js_end'], \yii\web\View::POS_END); ?>