IOS手机全屏长按识别二维码HTML代码

代码段作用讲解：

1. 二维码的全屏样式,

opacity: 0; 透明样式，

touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none; 禁止IOS默认长按事件

.codePage {position: absolute;touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none;padding-bottom:100%;width: 100%;top: 0;left: 0;opacity: 0;z-index: 9998;}

2. 防止页面没加载完vue.js时页面乱码

[v-cloak]{display: none;
}
<div id="app" class="app" v-cloak></div>

3.页面开启调试模式

     <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><script>// new VConsole(); //调试阶段</script>

4.创建音频

audio = new Audio(res.module.myCard.backgroundMusicFileUrl);

完整代码：

<!DOCTYPE html>
<html><head><script type="text/javascript">window.trkPageStart = new Date().getTime();</script><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><meta name="description" content="不超过150个字符" /><meta name="keywords" content="" /><meta content="caibaojian" name="author" /><title></title><script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><script>// new VConsole(); //调试阶段</script><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!-- <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> --><style>.wrap {width: 100%;padding-left: 10px;margin: 0;padding: 0;height: 400px;}[v-cloak]{display: none;}.wug{width: 120px;height: 90px;position: absolute;right: 10px;top: -110px;}.codePage {position: absolute;touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none;padding-bottom:100%;width: 100%;top: 0;left: 0;opacity: 0;z-index: 9998;}.jiaz {text-align: center;margin-top: 100px;width: 100%;}.img11 {width: 100%;}.img12 {width: 100%;position: absolute;bottom: 50px;}* {margin: 0;padding: 0;}body {background-color: #FFFFFF;}.top {position: relative;top: 0;width: 100%;overflow: hidden;}.head {width: 100%;z-index: 0;}.zuan {animation: rotate 6s linear infinite;}.top_txt {position: absolute;/* background-color: rgba(0,0,0,0.2); */background: linear-gradient(to bottom, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.3));bottom: 0;width: 100%;color: white;padding-left: 30px;padding-top: 60px;z-index: 1;letter-spacing: 3px;}img {border: 0;vertical-align: bottom;}.position {letter-spacing: 2px;color: #e4e5e5;}.name {font-weight: 400;font-size: 26px;margin-top: 6px;padding-bottom: 16px;}.ms {position: absolute;top: 20px;right: 20px;width: 1.8rem;height: 1.8rem;z-index: 9999;}@keyframes rotate {0% {transform: rotateZ(0deg);/*从0度开始*/}100% {transform: rotateZ(360deg);/*360度结束*/}}.sss {position: absolute;bottom: 0;width: 100%;}.code {width: 100px;height: 100px;margin-top: 14px;margin-right: 14px;-moz-box-shadow: 0px 1px 18px #dfdfdf;-webkit-box-shadow: 0px 1px 18px #dfdfdf;box-shadow: 0px 1px 18px #dfdfdf;}.code1 {width: 100px;height: 100px;margin-top: 14px;-moz-box-shadow: 0px 1px 18px #dfdfdf;-webkit-box-shadow: 0px 1px 18px #dfdfdf;box-shadow: 0px 1px 18px #dfdfdf;position: absolute;top: 20px;right: 20px;}.erweima1{position: absolute;top: 133px;right: 35px;width: 100px;}.code2 {top: 0px;margin-top: 14px;width: 100px;height: 100px;}.centent {background-color: white;position: relative;background-size: 100%;/* background-size: 80%; */color: #474747;height: 18rem;}.centent2 {background-color: white;position: relative;background-size: 100%;/* background-size: 80%; */color: #474747;height: 18rem;}.rig_logo{position: absolute;top: 0px;right: 0;width: 100%;z-index: 1;}.rig_logo1{z-index: 0;}.logo {position: absolute;right: 0;top: 0;height: 260px;}.centent_block{position: relative;z-index: 2;height: 400px;}.bottom_txt {color: #dfdfdf;width: 100%;position: relative;bottom: 0;height: 50px;line-height: 50px;text-align: center;}.img133 {position: relative;margin-bottom: 20px;width: 20px;line-height: 40px;text-align: center;left: 50%;margin-left: -10px;}.centent_txt {margin-bottom: 5px;font-size: 16px;width: 70%;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}.centent_txt1 {margin-bottom: 7px;font-size: 16px;width: 50%;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}.lou_b {position: absolute;bottom: 0;width: 80%;left: 10%;z-index: 0;}.app{background-color: #fff;}.erweima{color: #cfcfcf;font-size: 12px;width: 100px;text-align: center;margin-top: 10px;}</style></head><body><div id="app" class="app" v-cloak><div v-if="!template_type" class="jiaz">加载中 ···</div><di class="wrap" v-if="template_type"><img class="codePage" :src="myCard.qrCode" @click="click_v"><div v-if="template_type==1"><div class="top"><img class="ms" :class="[rotate?'zuan ms':'ms']" :src="ms_url"><img class="head" v-if="myCard.avatarOpen==1" :src="myCard.avatar || 'https://xxx.cn:8080/static/de_head.jpg'"><img class="head" v-else src="https://xxx.cn:8080/static/de_head.jpg" /><div class="top_txt"><div class="position" v-if="myCard.positionOpen == 1 && myCard.position">{{ myCard.position }}</div><div class="name">{{ myCard.name }}</div></div></div><div class="centent"><div class="centent_block" style="margin-left: 30px;"><div class="centent_txt" style="padding-top: 32px">{{myCard.corpName}}</div><div class="centent_txt1" v-if="myCard.addressOpen == 1 && myCard.address">{{myCard.address}}</div><div class="centent_txt" v-if="myCard.mobileOpen == 1 && myCard.mobile">{{myCard.mobile}}</div><img class="code code1" :src="myCard.qrCode"><div class="centent_txt erweima erweima1" style="">长按识别二维码</div></div><img class="rig_logo rig_logo1" src="https://xxx.cn/work/weixin/file/png17.png"></div></div><div v-if="template_type==2"><div class="top"><img class="ms" :class="[rotate?'zuan ms':'ms']" :src="ms_url" @click="click_v"><img class="head " v-if="myCard.avatarOpen==1" :src="myCard.avatar || 'https://xxx.cn:8080/static/de_head.jpg'"><img class="head " v-else src="https://xxx.cn:8080/static/de_head.jpg" /><div class="top_txt"><div class="position" v-if="myCard.positionOpen == 1 && myCard.position">{{ myCard.position }}</div><div class="name">{{ myCard.name }}</div></div></div><div class="centent2"><img src="https://xxx.cn/work/weixin/file/card/weein_5g.png" class="wug"><div style="margin-left: 24px; position: relative; width: 90%;z-index: 2;"><div class="centent_txt" style="padding-top: 28px">{{myCard.corpName}}</div><div class="centent_txt" v-if="myCard.addressOpen == 1 && myCard.address">{{myCard.address}}</div><div class="centent_txt" v-if="myCard.mobileOpen == 1 && myCard.mobile">{{myCard.mobile}}</div><img class="code code2" :src="myCard.qrCode"><div class="centent_txt erweima" style="">长按识别二维码</div></div><img class="rig_logo" src="https://xxx.cn/work/weixin/file/png18.png"></div></div></div><div v-if="template_type" class="bottom_txt">愿您感受我的真心，请加我企业微信</div><img v-if="template_type" class="img133" src="https://xxx.cn/work/weixin/file/card/weein_logo.png"></div><script>var audio = "";window.onload = function() {//const vConsole = new VConsole(); //调试阶段window.vm = new Vue({el: '#app',data: {template_type: false,myCard: {},//template_type: 2,//myCard:{"addressOpen":0,"avatarOpen":0,"backgroundMusic":"1254343664029798400","backgroundMusicFileUrl":"https://xxx.cn/work/weixin/file/nv7.mp3","backgroundMusicName":"请加我企业微信女声版","backgroundMusicPicUrl":"","backgroundPic":"1254771577548050432","backgroundPicUrl":"https://xxx.cn/work/weixin/file/card/b2_1.png","corpId":"wwe094a1deac86058c","corpName":"码多多","createTime":"2020-06-17 12:37:26","email":"","emailOpen":0,"id":"1270938165796032512","mobile":"13977284413","mobileOpen":1,"name":"a_靖","position":"","positionOpen":0,"qrCode":"https://wework.qpic.cn/wwpic/817705_zCXev0t3R7SX_kZ_1583717752/0","templateId":"1252576158818635776","templateName":"模板2","templatePreviewUrl":"https://xxx.cn/work/weixin/file/card/t2.png","userId":"a_Jing","userid":"cdce4068a0f579517d73ec2106a0501bdaedf91ac6ab7d80"},ms_url: 'https://xxx.cn/work/weixin/file/png26.png',rotate: true,},created() {let that = this;that.loading = true;let inviteId = that.getQueryVariable('id');console.log('inviteId', inviteId)setTimeout(() => {console.log('------', this.template_type)}, 500)if (inviteId) {axios.post(`${window.location.origin}/v1/businesscard/getH5MyCard/${inviteId}.do`).then(res => {res = res.data;console.log('==========', res)if (res.success) {this.myCard = res.module.myCard;audio = new Audio(res.module.myCard.backgroundMusicFileUrl);if (res.module.myCard.templateId == "1252576158818635776") {this.template_type = 1;} else {this.template_type = 2;}that.getConfig();} else {that.error = res.errorMsg;setTimeout(() => {that.error = null;}, 1000)}}).finally(() => {that.loading = false;})}$('html,body').animate({scrollTop:1},500);},methods: {click_v() {console.log('点击音频')if(this.rotate){this.voiceClose()}else{this.voicePaly()}},click_vv(){//audio.play();},voicePaly() {console.log('播放，播放结束继续播放')audio.play();this.rotate = true;this.ms_url = "https://xxx.cn/work/weixin/file/png26.png"// 循环播放，播放结束继续播放if(this.rotate){$(audio).unbind("ended").bind("ended", function() {console.log('播放结束继续播放')audio.play();})}},voiceClose() {audio.pause();this.rotate = false;this.ms_url = "https://xxx.cn/work/weixin/file/png25.png"},//获取url参数getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return '';},//获取jssdk配置getConfig() {var that = this;axios.get(`${window.location.origin}/v1/invite/getConfig.do`, {params: {url: encodeURIComponent(window.location.href.split('#')[0])}}).then(function(response) {console.log(response);const {data} = response;if (data.success) {let info = JSON.parse(data.module.config);wx.config({debug: false, // 开启调试模式appId: info.appId, // 必填，公众号的唯一标识timestamp: info.timestamp, // 必填，生成签名的时间戳nonceStr: info.nonceStr, // 必填，生成签名的随机串signature: info.signature, // 必填，签名jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表});wx.ready((res) => {console.log('初始化成功');that.voicePaly()console.log(wx.updateAppMessageShareData, wx.updateTimelineShareData);var wx_title = "请加我企业微信";var wx_desc = "我是您的专属服务顾问，我来自中国电信，请加我企业微信，hello 5G充满诚信";wx.updateAppMessageShareData({title: wx_title, // 分享标题desc: wx_desc, // 分享描述link: window.location.href, // 分享链接imgUrl: 'https://xxx.cn/work/weixin/file/card/5g.png', // 分享图标type: 'link', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});wx.updateTimelineShareData({title: wx_title, // 分享标题link: window.location.href, // 分享链接imgUrl: 'https://xxx.cn/work/weixin/file/card/5g.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});})wx.error(function(res) {console.log('失败');alert('初始化失败,请刷新页面重试。')});}}).catch(function(error) {// handle errorconsole.log(error);}).then(function() {// always executed});}}})}</script></body><div id=app></div><script type="text/javascript">window.trkPageEnd = new Date().getTime();window.trkArea = "bj";</script><script type="text/javascript" src="https://xxx.cn/client/wap/common/js/s_code.js"></script>
</html>

IOS手机全屏长按识别二维码HTML代码相关推荐

移动端（ios and android）长按识别二维码（含js与原生互调）
这篇文章就整理下移动端长按识别二维码的实现吧!实现方式可以分为三种一.长按原生控件,直接获取控件中的图片数据(src或background) 二.长按原生控件,截图识别三.长按web中的图片,ap ...
关于ios在H5页面长按识别二维码无效
环境框架: vue 操作系统: ios 解决如果你的vue-router用了mode:history: 把它去掉用默认的就OK了转载于:https://www.cnblogs.com/ruthl ...
IOS长按识别二维码失败
IOS长按不识别二维码,出现放大图片的问题解决. CSS加入样式: touch-callout: none; -webkit-touch-callout: none; -ms-touch-callou ...
微信长按识别二维码 -- 页面多个二维码如何识别？
常规的在公众号html页面中要实现长按识别二维码,直接使用img显示图片就可以了,如下: <img name="qrCodeImg" src="/images/it ...
微信小程序长按识别二维码，小程序相关问题总结
微信小程序长按识别二维码,小程序相关问题总结开发小程序中,长按识别二维码,小程序码跳转,已知问题整理: 小程序中,不支持长按识别二维码,和小程序码. 可利用小程序图片预览功能识别小程序码并进行跳 ...
(补充)微信长按识别二维码 -- 页面多个二维码如何识别？（二）
基于上一篇微信长按识别二维码 -- 页面多个二维码如何识别? )在部分设备上,如果图片非常多,还是会出现识别错误的bug(主要是二维码显示一半或居于底部时),修改了识别流程,改为点击图片弹窗,然后长按 ...
二维码扫描+长按识别二维码demo
二维码扫描+长按识别二维码demo,已封装好源码下载
微信小程序web-view 实现长按识别二维码
小程序长按识别二维码, 网页在小程序中长按识别二维码,web-view长按识别二维码效果图: html 代码: <!DOCTYPE html> <html><head& ...
jquery实现微信长按识别二维码
jquery实现微信长按识别二维码 (完整代码如下) <!DOCTYPE html> <html> <head><meta charset="utf ...

IOS手机全屏长按识别二维码HTML代码

IOS手机全屏长按识别二维码HTML代码相关推荐

最新文章

热门文章