当前位置：首页 > 编程日记 > 正文

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

编程日记 2024-08-04 22:20:00

代码段作用讲解：

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>

https://www.dkcj.cn/info/12841.html

[亲测]在Mac下配置php开发环境：Apache+php+MySql

公司给我们配上了高大上的Apple Mac Pro本本，这两天自己正在习惯中。通过虚拟机PD，确实解决了一些因为工作习惯无法在iOS上很好完成的事情，但是我想，既然用起了iOS就尽量将一些事务在iOS环境下处理，免得好似关羽耍着大…

编程日记2024/08/04 22:10:00

RabbitMQ 异常与任务分发

RabbitMQ 异常与任务分发异常情况处理上篇最后提到了这个问题， consumer异常退出、queue出错、甚至rabbitMQ崩溃。因为它们都是软件 ，软件都会有bug，这是无法避免的。所以RabbitMQ在设计的时候也想到了这一点在之前，消息分发给…

编程日记2024/08/04 22:00:01

reddit_如何使用Python创建自定义Reddit通知系统

redditby Kelsey Wang王凯西如何使用Python创建自定义Reddit通知系统 (How to make a custom Reddit notification system with Python) Don’t you just love automated emails? I know I do. I mean, who doesn’t enjoy waking up to 236 new messages from Nike, Ticket…

编程日记2024/08/04 21:50:00

1016. Phone Bills (25)

时间限制400 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, Yue去掉非法数据计算账单A long-distance telephone company charges its customers by the following rules:Making a long-distance call costs a certain amount per minute, depending on the…

编程日记2024/08/04 21:40:00

样式集（五）微信朋友圈样式模拟

效果图： 小图标： 源码：  <image class"xxiangji" catchtap"xxiangji" src"/images/xxiangji.png"></image> <image class"top_img" src&…

编程日记2024/08/04 21:30:00

为什么要选择useState而不是useReducer

by Austin Malerba奥斯汀马勒巴(Austin Malerba) 为什么要选择useState而不是useReducer (Why you should choose useState instead of useReducer) 通过useState进行本地和全局状态管理的指南 (A guide to local and global state management via useState) Since the introd…

编程日记2024/08/04 21:20:00

php 类中的变量的定义

php 如果在类中定义变量，在类的方法中调用时应该加上$this-> . class ClassName {private $a 333;function __construct(){$this->a 2222;}public function bbb($value){echo $this->a;} } $b new className(); echo $b->bbb();转载于:https://www.c…

编程日记2024/08/04 21:10:00

微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据

效果图小程序云开发分页加载代码  <view class"pageTitle">家博慧</view> <view class" search_arr"><icon class"searchcion" size16 typesearch></icon><input …

编程日记2024/08/04 21:00:00

Linux(Centos)之安装Java JDK及注意事项

1.准备工作 a.因为Java JDK区分32位和64位系统，所以在安装之前必须先要判断以下我们的Centos系统为多少位系统，命令如下： uname -a解释：如果有x86_64就是64位的，没有就是32位的。后面是X686或X86_64则内核是64位的&…

编程日记2024/08/04 20:50:00

2019web前端趋势_2019年最值得关注的Web开发趋势

2019web前端趋势by Mrudul Shah通过Mrudul Shah 2019年最值得关注的Web开发趋势 (Top Web Development trends to look out for in 2019) Do you know that nearly 200 websites are pushed out every minute? Sounds astonishing right? But it is a fact and that’s why …

编程日记2024/08/04 20:40:00

WPF入门教程系列九——布局之DockPanel与ViewBox（四）

七. DockPanel DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。停靠面板其实就是在WinForm类似于Dock属性的元素。DockPanel会对每个子元素进行排序，并停靠在面板的一侧&…

编程日记2024/08/04 20:30:00

tabBar 自定义，小程序自定义底部导航栏

创建一个自定义组件 my_tab，组件代码在后面，先看调用自定义组件的代码，比如我需要在index 页面调用，就在index.json中引用组件，index.json 代码（引用的路径为你创建的自定义组件路径） {"n…

编程日记2024/08/04 20:20:00

2015年最新出炉的JavaScript开发框架

前端框架简化了开发过程中，像 Bootstrap 和 Foundation 就是前端框架的佼佼者。在这篇文章了，我们编制了一组新鲜的，实用的，可以帮助您建立高质量的 Web 应用程序的 JavaScript 框架清单。 1.Aurelia Aurelia是下一代JavaScript客…

编程日记2024/08/04 20:10:00

小程序前端性能测试_如何提高前端应用程序的性能

小程序前端性能测试If your website takes longer than 3 seconds to load, you could already be losing nearly half of your visitors.如果您的网站加载时间超过3秒，则可能已经失去了将近一半的访问者。 Yes this is a fact, proven by several research studie…

编程日记2024/08/04 20:00:00

10-TypeScript中的接口

接口是一种规约的约定，从接口继承的类必须实现接口的约定。在高级开发中，通常接口是用于实现各种设计模式的基础，没有接口，设计模式无从谈起。定义接口： interface ILog{recordlog():boolean; } 类从接口继承&#xf…

编程日记2024/08/04 19:50:00

样式集（六）仿微信通讯录样式

效果图： 这里有引用到自定义底部导航，自定义底部导航组件链接  <view class"top"><view class"pageTi…

编程日记2024/08/04 19:40:00

WCF动态添加ServiceKnownType

WCF中传输自定义类型时，必须在服务接口类（服务协定）上加上ServiceKnownType(typeof(yourClass)), 在实际应用中比较麻烦，可以用动态的办法来实现动态添加。服务接口类，加上一行 [ServiceKnownType("GetKnownType…

编程日记2024/08/04 19:30:00

博客 rss 如何使用_如何使用RSS从您的GatsbyJS博客自动交叉发布

博客 rss 如何使用With the recent exodus from Medium many developers are now creating their own GatsbyJS Blogs and then cross-posting to Medium or publications like freecodecamp.org and dev.to.随着Medium最近的离职，许多开发人员现在正在创建自己的Ga…

编程日记2024/08/04 19:20:00

大型技术网站的技术（高并发、大数据、高可用、分布式....）（一）

面对高并发、大流量、高可用、海量数据、用户分布广泛、网络情况复杂这类网站系统我们如何应对？？？ 第一阶段一台服务器不行就上多台服务器 1.应用程序与数据服务分离将应用程序、数据库、文件等资源放在一台服务器上，面对海量…

编程日记2024/08/04 19:10:00

BestCoder Round #65 B C D || HDU 5591 5592 5593

B 题意：ZYB在远足中,和同学们玩了一个“数字炸弹”游戏：由主持人心里想一个在[1,N][1,N]中的数字XX，然后玩家们轮流猜一个数字，如果一个玩家恰好猜中XX则算负，否则主持人将告诉全场的人当前的数和XX比是偏大还是偏小&a…

编程日记2024/08/04 19:00:00

数组去重，ES6数组去重 new Set()

普通数组去重 var b [...new Set([1,2, 3, 4, 5, 5, 5, 5])]console.log(b); 输出结果： 包含对象的数组去重 var o {a:1}var b [...new Set([o, o, 3, 4, 5, 5, 5, 5])]console.log(b); 输出结果： 包含对象的数组去重有一个坑 var b [...new Set([{…

编程日记2024/08/04 18:50:00

使用angular的好处_在项目中使用Angular的最大好处

使用angular的好处by Irina Sidorenko伊琳娜西多连科(Irina Sidorenko) 在项目中使用Angular的最大好处 (The top benefits of using Angular for your project) 在项目实施中使用Angular的11个理由及其好处 (11 reasons to use Angular and its benefits for your project im…

编程日记2024/08/04 18:40:00

python之路——模块和包

一、模块 1、什么是模块？ 常见的场景：一个模块就是一个包含了Python定义和声明的文件，文件名就是模块名字加上.py的后缀。但其实import加载的模块分为四个通用类别： 1、使用Python编写的代码（.py文件） 2、…

编程日记2024/08/04 18:30:00

夺命雷公狗---linux NO:3 centos_mini版的安装和备份

废话不多说，和前面的其实是差不多的，如下图所示： 安装其实是和桌面版的差不多的，但是经典版的不能自定义分区（如详细区，如home之类的）。。。因为我们使用的是命令行方式的所以直接选英文&#…

编程日记2024/08/04 18:20:00

快速学习 async await 的使用， Demo 解析

async 和 await 字面都很好理解，分别是异步和等待。来两个简单的 demo， demo1 tt2(){return new Promise(rps>{setTimeout(() > {rps(true)}, 1500);})},async tt1(){var a await this.tt2();console.log(a)},/*** 生命周期函数--监听页面加载*…

编程日记2024/08/04 18:10:00

小型工作室创业项目_为什么新开发人员应该在小型创业公司工作

小型工作室创业项目In my first year of working in the industry (6 months as an intern, 6 months as a full-time employee), I worked at startups that were less than 10 people large. I was one of the only 2 or 3 developers, and usually one of the first. Throug…

编程日记2024/08/04 18:00:00

head first python菜鸟学习笔记（第六章）

1. Python提供字典，允许有效组织数据，将数据与名关联，从而实现快速查找，而不是以数字关联。字典是内置数据结构，允许将数据与键而不是数字关联。这样可以使内存中的数据与实际数据的结构保持一致。？&#…

编程日记2024/08/04 17:50:00

小程序聊天室开发，发送文字，表情，图片，音频，视频，即时通讯，快速部署，可定制开发

效果图： 微信小程序聊天功能模块，现在已经支持发送图片，文字，音频，视频，表情，在线即时聊天啦。需要做的可以联系我微信。13977284413 上代码： <view class"bo">…

编程日记2024/08/04 17:40:00

常用浏览器插件

modify headers ：firefox的IP伪造插件 httpRequester：firefox的模拟http请求插件JSON-handle：chrome格式化json插件firebug：firefox查看http请求工具firepath：firefox中获取元素路径转载于:https://www.cnblogs.com/xx…

编程日记2024/08/04 17:30:00

编码中统一更该变量的快捷键_更多项目想法，以提高您的编码技能

编码中统一更该变量的快捷键Two weeks ago I published an article containing 15 project ideas that you can build to level up your coding skills, and people were very excited about that resource.两周前，我发表了一篇文章，其中包含15个项目构想…

编程日记2024/08/04 17:20:00

相关文章：