菜花记录

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


思路：建一个中间组件页面 使用草料二维码生成二维码，这个二维码直接进入我们建的中间组件页面 在间组件页面元素创建之后判断用户手机系统，不同系统进入不同页面，我的提示语是透明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}}}

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