如何让Android和iOS应用下载共用一个二维码及遇到的坑

  一般APP应用都分安卓下载链接和IOS链接,安卓可以直接通过下载链接下载安装包安装,但是IOS就不行了,IOS只能通过苹果应用商店安装。所以在推广的时候一般会将安卓和IOS的应用下载链接合成在一个二维码里。安卓手机扫描的话,可以直接下载安装;苹果手机扫描的话,就打开苹果app store对象的应用页。

一、利用网上三方

  网上一搜有蛮多这种合成方案,比如“草料二维码”、“芝麻二维码”,其中也遇到坑,就是这种在线的,都有扫描次数限制,很坑。比如芝麻二维码,每天就限制10次扫描,需要多的就需要收费,收费还挺贵,1000多,我就呵呵了,其实也就是蛮简单的一个处理。

  还有比较方便的就是腾讯应用宝,有自带的一个“微下载”,但是前提是需要应用在腾讯应用宝审核通过。我们的app因为腾讯应用宝要求首次进入app就同意隐私条款之类的,就没接着弄了。但是腾讯应用宝的微下载有点坑的是总是想法设法让用户选“安全下载”从而先下它的应用宝,这点很恶心。

  还有就是uniapp提供了统一发行页面,也可以直接使用。

二、自己写个中间页面转换

  其实业务也蛮简单,就是增加一个中间的转换页面,写一个HTML文件放在服务器上,二维码就用该html文件的链接二维码。当不同客户端的二维码进行扫描的时候,调用不同的浏览器,根据判断是什么系统的设备扫描,进行跳转,比如是微信扫描跳转,利用Safari浏览器打开跳转到你的下载页面,如果是Android设备,跳到Android下载地址。

  简单代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>墨天轮APP下载</title>
  <style>
  html, body{
     100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .app_bg{
     100%;
    height: 100%;
    background-image: url('https://***/app_bg.png');
    background-size: 100% 100%;
    background-position: center;
  }
  </style>
</head>
<body>
  <div class="app_bg" onclick="goDownload(true)"></div>
  <script>
    function isWeixin(){
      let ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('micromessenger') !== -1
    }
    function isIos(){
      let ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('iphone') > -1 || ua.indexOf('mac os') > -1
    }
    function goDownload(wxClick) {
      if(isIos()) {
        window.location.href = 'https://apps.apple.com/cn/app/id***'
      } else if (isWeixin()) { // 微信浏览器时点击弹出提示,其他浏览器直接触发下载
        if(wxClick) alert("请点击右上角按钮, 选择使用浏览器打开")
      } else {
        window.location.href = 'https://***.apk'
      }
    }
    goDownload()
  </script>
</body>
</html>

  通过背景图还可以随意切换下载页的背景,比如有什么活动,只需要ui出个图,然后在oss上换下背景图即可,方便快捷。

  代码比较简陋,主要是知道这个方案,根据需要丰富该中间页面的设计及业务处理即可。

原文地址:https://www.cnblogs.com/goloving/p/14427646.html