代碼段作用講解：
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，不填默認爲link
dataUrl: '', // 如果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 error
console.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>