菜花记录

前端如何实现微信扫描二维码下载应用，根据手机系统跳转不同页面
需求 ：由于微信扫码无法直接下载需要再跳转到浏览器下载，所以微信扫码页面添加背景图和相关提示
草料二维码生成器地址
整改之前：
整改之后：


思路：建一个中间组件页面 使用草料二维码生成二维码，这个二维码直接进入我们建的中间组件页面 在间组件页面元素创建之后判断用户手机系统，不同系统进入不同页面，我的提示语是透明png 判断如果是浏览器就不展示提示语，反之继续展示
代码：

  created() {
    // var UA = require("ua-device");
    // if (navigator.userAgent.indexOf("MicroMessenger") != -1) {
    if (
      navigator.userAgent.indexOf('iPhone') != -1 ||
      navigator.userAgent.indexOf('iPad') != -1
    ) {
      this.show = 2
    } else if (navigator.userAgent.indexOf('Android') != -1) {
      if (
        navigator.userAgent.indexOf('HUAWEINOH') != -1 ||
        navigator.userAgent.indexOf('HarmonyOS') != -1
      ) {
        this.show = 3
      } else {
        this.show = 1
      }
    }
 }

每个页面再次进行判断是否展示提示语的遮罩层 （浏览器不需要，微信内部需要）

  created() {
    this.per()
  },
  methods: {
    per() {
      // var UA = require("ua-device");
      if (navigator.userAgent.indexOf('MicroMessenger') != -1) {
      //当前不是浏览器 遮罩层显示
        this.flag = true
      } else {
      //当前为浏览器遮罩层消失 下载应用
        window.location.href = '应用下载地址'
        this.flag = false
      }
    }
  }

语言组织不好，就先记到这里