1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：zhoupenghui168 分类：Toy博客 阅读(136) 违法举报

这篇具有很好参考价值的文章主要介绍了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

代码如下：文章来源地址https://www.toymoban.com/news/detail-541922.html

分享主页

<?php

use 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()
                //根据返回的手机类型，获取androidId
                if (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.app
            var url = '';
            if (type == 'oppo') { //oppo
                url = 'oppomarket://details?packagename=' + androidId
            } else if (type == 'huawei') { // huawei
                url = 'appmarket://details?id='  + androidId
            } else if (type == 'xiaomi') { // xiaomi
                url = 'mimarket://details?id='  + androidId
            } else if (type == 'vivo') { // vivo
                url = 'vivomarket://details?id='  + androidId
            } else if (type =='samsung') { // samsung
                url = 'samsungapps://ProductDetail/'  + androidId
            } else { // other
                url = '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); ?>

中转页

<?php

use 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()
                //根据返回的手机类型，获取androidId
                if (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.app
        var url = '';
        if (type == 'oppo') { //oppo
            url = 'oppomarket://details?packagename='
        } else if (type == 'huawei') { // huawei
            url = 'appmarket://details?id=com.bzyl.mahjongtown.HUAWEI'
        } else if (type == 'xiaomi') { // xiaomi
            url = 'mimarket://details?id='
        } else if (type == 'vivo') { // vivo
            url = 'vivomarket://details?id='
        } else if (type =='samsung') { // samsung
            url = 'samsungapps://ProductDetail/'
        } else { // other
            url = '';
        }

        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); ?>

到了这里，关于iOS和Android手机浏览器链接打开app store或应用市场下载软件讲解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包