简介：

带后台
带下载统计,带数据分析图,可一键编辑APP信息
此为1.0版本,后期会推出更多的新功能,尽请期待
注意:这个不是PHP开发的,用ASP.NET开发的,需要部署到window服务器,部署有点麻烦,选择win2019server版本,先在服务器上手动安装iis,不要用宝塔一键安装,宝塔安装的iis无法部署项目,安装完iis后再安装宝塔推荐,数据库用的是mysql数据库,安装完导入数据库即可,在web.config里面修改数据库连接信息
后台地址:/admin/login
测试站:http://wxappstore.top/ 账号:liqi199312 密码:123456

网盘下载地址：

http://kekewangLuo.net/at6KaENc3vY0

图片：

最近呢，接到一个新需求，在我们负责的H5网页网站添加一个app下载引导页，成功之后来给大家分享一下！
先给大家来看一下ios跟Android微信内点击链接有什么不同：

Android展示显示微信内空白页，点击右上角三个点打开浏览器(展示的图并没有Android端加上遮罩层的效果图,图的比例不太一样啊，哈哈哈，不影响效果)

ios展示直接打开跳转应用商店

首先呢来考虑一下步骤：
第一步呢，是要判断是ios还是Android端，下载链接是不一样的，我这里直接用的a标签：

<a v-if="iosOrAndroid===true" class="download" href="Android下载地址" @click="anzhuo($event)">
  点击下载APP
</a>
<a v-if="iosOrAndroid===false" class="download" href="ios下载地址" @click="ios($event)">
  点击下载APP2
</a>
<div class="bd_drop" ref="backdrop" v-show="show" @click="bdrop">
  <span class="tip"></span>
  <p class="tip_text">点击右上角选择<br />在浏览器中打开</p>
</div>
.download {position: absolute;display: block;top: 85%;height: 100px;width: 60%;background: red;opacity: .3;left: 20%;}
.bd_drop{background: rgba(0, 0, 0, 0.8);text-align: center;position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 998;display: none;}
.tip{width: 69px;height: 64px;position: absolute;color: #fff;right: 50px;top: 30px;background: url("../../../image/app/top_right.png") no-repeat center center;background-size: 100% 100%;}
.tip_text {font-style: italic;color: #fff;font-size: 26px;line-height: 2;position: absolute;width: 40%;height: 150px;padding-top: 26px;box-sizing: border-box;left: 30%;border: 2px #fff dashed;border-radius: 75px;top:40%;transform: translateY(-50%);}

通过这上下两个代码块大家也都明白了，Android和ios链接是通过一个变量来控制是否显示的，进入页面要先判断是Android手机还是ios手机，呐，就是下面

// 判断ios Or  安卓
    isIosOrAndroid() {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // alert('是否是Android：'+isAndroid);
        // alert('是否是iOS：'+isiOS);
        if(isiOS){
          this.iosOrAndroid=false
        }else{
          this.weixinTip()
          this.iosOrAndroid=true
        }
    },

第二部呢，要判断是否是微信打开，如果是微信打开的话，可以加一个遮罩层来提示一下点击右上角三个点在浏览器打开

// 判断是否微信打开
    weixinTip() {
      var ua = navigator.userAgent
      var isWeixin = !!/MicroMessenger/i.test(ua)
      isWeixin?this.show=true:this.show=false
    }

点击链接的时候显示遮罩层（遮罩层只在Android手机微信打开才显示）

    // 安卓下载
    anzhuo(e){
      if(this.show===true){
        window.event ? (window.event.returnValue = false) : e.preventDefault();
        this.show===true?this.$refs.backdrop.style.display = "block":this.$refs.backdrop.style.display = "none"
      }
    },
    // ios下载
    ios(){
      // window.event ? (window.event.returnValue = false) : e.preventDefault();
      this.$refs.backdrop.style.display = "none"
    },
    // 点击遮罩层关闭
    bdrop(){
      this.$refs.backdrop.style.display = "none"
    }

遮罩层这个根据自己需要来使用，不加遮罩层在浏览器打开能直接显示是否下载APP，加上之后到浏览器中会先显示当前页面，重新点击下载链接显示是否下载APP

H5 引用vue 打开app（如何该手机内有某个app则直接打开app，如果没有则跳转app下载页面）

**ps： 一定一定一定一定先向 ios要 （ ios下载地址 和 ios对应的app协议 ），找安卓要（ android下载地址 和 andriod对应的app协议 ）

• 点击按钮 有两种情况
• 1.该手机没有app，则跳转下载页面
  
• 2.该手机内有app，即可打开app

------------------------步骤如下：------------------

1. 判断是否是微信打开页面还是浏览器打开（并强制让用户使用浏览器打开）
   强制让用户使用浏览器打开代码：

  <div id='guideZfbPayPage' v-if="iosApp">
    <div class="wx-open" >
      <p>1.请点击右上角 • • •</p>
      <p>2.选择在浏览器中打开</p>
      <img src="./images/arrow_right.png" />
    </div>
  </div>

mounted时 判断该页面是微信打开还是浏览器打开，强制让用户使用浏览器打开代码
代码如下：

    mounted(){
      if (this.isWeixin()) {
        this.iosApp = true
      } else {
        //显示手动打开外置浏览器提示
        this.iosApp = false
      }
    },

methods:{
      isWeixin() {
        return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
      },
}

2. 点击按钮

<div @click="openApp> 打开app</div>

   methods:{  
      openApp() {
        const ua = window.navigator.userAgent.toLowerCase();
        // 非微信浏览器
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
          const loadDateTime = +new Date();
          window.setTimeout(function () {
            const timeOutDateTime = +new Date();
            if ((timeOutDateTime - loadDateTime) < 5000) {
              window.location.href = '// ios下载地址'; 
            } else {
              window.close()
            }
          }, 2000);
          window.location.href = '// ios对应的app协议'; 
        } else if (navigator.userAgent.match(/android/i)) {
          const state = null;
          try {
            window.location.href = '// 安卓对应的app协议'; 
            setTimeout(function () {
              window.location.href = '// android下载地址'; 
            }, 500);
          } catch (e) {
          }
        }
      }
    }

纯H5 原生js 代码

代码如下：

// =======================  Dom  ==========================

<div id='guideZfbPayPage' style="display: block;" >
  <div class="wx-open" >
      <p>1.请点击右上角 • • •</p>
      <p>2.选择在浏览器中打开</p>
      <img src="./image/arrow_right.png" />
  </div>
</div>

// =======================  css 样式  ==========================
<style>
/* 提示浏览器打开 */
#guideZfbPayPage {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 777;
}
.wx-open {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 888888;
}
.wx-open p {
    position: relative;
    top: 38%;
    margin-block-start: 0;
    color: white;
    font-size: 18px;
    line-height: 20px;
}
.wx-open img {
    width: 25%;
    border-style: none;
    position: absolute;
    transform: rotateZ(246deg);
    top: 6%;
    right: 28px;
}
</style>

// =======================  js  ==========================
<script>
// 页面加载时，立即执行代码
(function(){
  var u = navigator.userAgent,
  app = navigator.appVersion
  var isAndroidNum = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
  var isIOSNum = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isAndroidNum) {
    isAndroid = true
    schemeUrl= 'android://com.xpx.watercamera/open'
    downloadUrl = 'https://www.pgyer.com/8PGW'
  }
  if (isIOSNum) {
    isIos = true
    schemeUrl= 'iOSXPXMJCamera://'
    downloadUrl = 'itms-apps://itunes.apple.com/app/id1549495554'
  }
  if (isWeixin()) {
    console.log(11111111);
  document.getElementById("guideZfbPayPage").style.display=  "block"
  } else {
    //显示手动打开外置浏览器提示
    document.getElementById("guideZfbPayPage").style.display=  "none"
  }
})();

//判断当前是什么浏览器
function isWeixin() {
  return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
};
function openApp() {
  const ua = window.navigator.userAgent.toLowerCase();
  // 非微信浏览器
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    const loadDateTime = +new Date();
    window.setTimeout(function () {
      const timeOutDateTime = +new Date();
      if ((timeOutDateTime - loadDateTime) < 5000) {
        window.location.href = '// ios下载地址'; 
      } else {
        window.close()
      }
    }, 2000);
    window.location.href = '// ios对应的app协议'; 
  } else if (navigator.userAgent.match(/android/i)) {
    const state = null;
    try {
      window.location.href = '// 安卓对应的app协议'; 
      setTimeout(function () {
        window.location.href = '// android下载地址'; 
      }, 500);
    } catch (e) {
    }
  }
}
</script>

此方法存在一个小问题：
如果该手机已存有app时，会弹出是否打开app的弹框，在这期间会继续执行跳转链接页面，如果要求不是很大，这样足以；
目前还没找到合适的方法，如果有哪位同僚也在解决这个，知道一些解决方法希望能在下方告知一二。

开发工程中 参考链接：
1.https://blog.csdn.net/qq_36710522/article/details/100769219
2.https://www.dazhuanlan.com/2020/03/09/5e65d7366b6aa/
3.https://blog.csdn.net/w18246390463/article/details/81707961