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 代码如下：
分享主页
<?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 != null && obj != '') {
params.push(p + '=' + obj)
}
}
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 != null && obj != '') {
params.push(p + '=' + obj)
}
}
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); ?>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]