chore: 引导页新增小程序码 (#290)
This commit is contained in:
parent
790a4cd808
commit
042a91336e
@ -43,6 +43,10 @@
|
||||
<a href="/static/default/index.html" class="href">默认主题</a>
|
||||
<a href="/static/pure/index.html" class="href">Pure主题</a>
|
||||
<a href="/static/xplayer/index.html" class="href">XMusicPlayer</a>
|
||||
<div class="weapp">
|
||||
<a href="https://github.com/F-loat/xiaoplayer" class="href" target="_blank">微信小程序</a>
|
||||
<iframe width="240px" height="240px" src="/static/weapp/qrcode.html"></iframe>
|
||||
</div>
|
||||
<a href="https://afdian.com/a/imhanxi" target="_blank">爱发电</a>
|
||||
<a href="https://github.com/hanxi/xiaomusic" target="_blank">GitHub</a>
|
||||
</div>
|
||||
@ -65,6 +69,9 @@
|
||||
.options a{ color: #a2a9af; text-decoration: none; font-size: 1.1em; position: relative; display: inline; margin: 10px auto;}
|
||||
.options a::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #ebedec; transform-origin: bottom right; transform: scaleX(0); transition: transform 0.3s ease;}
|
||||
.options a:hover::before{ transform-origin: bottom left; transform: scaleX(1);} .options a:hover{ color:#ebedec;}
|
||||
.weapp { position: relative; text-align: center; margin: 10px auto; }
|
||||
.weapp iframe { display: none; border: none;position: absolute; top: -80px; right: 100px; }
|
||||
.weapp:hover iframe { display: block; }
|
||||
footer{ display: flex; justify-content: center; color: #4c5870;} footer a{ color:inherit; text-decoration: none; margin: auto 10px;}
|
||||
</style>
|
||||
</body>
|
||||
|
60
xiaomusic/static/weapp/qrcode.html
Normal file
60
xiaomusic/static/weapp/qrcode.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Weapp QRCode</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
flex: 1;
|
||||
max-width: 180px;
|
||||
border-radius: 12px;
|
||||
background-color: white;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.4.0/cloud.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="qrcode" src="https://assets-1251785959.cos.ap-beijing.myqcloud.com/xiaoplayer/weappcode.jpg" />
|
||||
<script>
|
||||
const c1 = new cloud.Cloud({
|
||||
identityless: true,
|
||||
resourceAppid: 'wx5931d820da6e8e50',
|
||||
resourceEnv: 'cards-ahoy-3g50hglqe5f630e4'
|
||||
})
|
||||
|
||||
c1.init().then(() => {
|
||||
c1.callFunction({
|
||||
name: 'qrcode',
|
||||
data: {
|
||||
host: location.host,
|
||||
protocol: location.protocol
|
||||
},
|
||||
complete: (res) => {
|
||||
if (res.errMsg === 'cloud.callFunction:ok' && !res.result.errCode) {
|
||||
const blob = new Blob([res.result.buffer])
|
||||
const url = URL.createObjectURL(blob)
|
||||
document.querySelector('#qrcode').setAttribute('src', url)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user