You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
6.5 KiB
227 lines
6.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" >
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<title>loading</title>
|
|
<script charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
|
<script type="text/javascript" src="src/utils/import-util.js"></script>
|
|
|
|
<style type="text/css">
|
|
.map__box {
|
|
width:300px;
|
|
height:200px;
|
|
position:absolute;
|
|
left:50%;
|
|
top:50%;
|
|
margin:-100px 0 0 -40px;
|
|
font-size: 18px;
|
|
color: rgba(80, 183, 234, 0.5);
|
|
}
|
|
|
|
|
|
.loading {
|
|
position: relative;
|
|
width: 50px;
|
|
perspective: 200px;
|
|
}
|
|
|
|
|
|
.loading:before,
|
|
.loading:after {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
content: "";
|
|
animation: jumping 0.5s infinite alternate;
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.text:after {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
content: "导";
|
|
animation: text_jumping 0.5s infinite alternate;
|
|
}
|
|
|
|
.text:before{
|
|
position: absolute;
|
|
margin-left: 30px;
|
|
width: 20px;
|
|
height: 20px;
|
|
content: "航";
|
|
animation: text_jumping 0.5s infinite alternate;
|
|
}
|
|
|
|
|
|
@keyframes text_jumping {
|
|
0% {
|
|
transform: scale(1) translateY(0px) rotateX(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1.2) translateY(-25px) rotateX(45deg);
|
|
}
|
|
}
|
|
|
|
|
|
.loading:before {
|
|
left: 0;
|
|
}
|
|
|
|
.loading:after {
|
|
right: 0;
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
|
|
@keyframes jumping {
|
|
0% {
|
|
transform: scale(1) translateY(0px) rotateX(0deg);
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1.2) translateY(-25px) rotateX(45deg);
|
|
background: rgba(80, 183, 234, 0.5);
|
|
box-shadow: 0 25px 40px rgba(80, 183, 234, 0.5);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="map__box">
|
|
<div class="text"></div>
|
|
<div style="margin-left: 80px;" class="loading"></div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
var name = WxConfig.map.name
|
|
|
|
var address = WxConfig.map.address
|
|
var key = WxConfig.map.key
|
|
var zoom = WxConfig.map.zoom
|
|
|
|
var appId = WxConfig.map.appId
|
|
|
|
var x = WxConfig.map.x
|
|
var y = WxConfig.map.y
|
|
|
|
function randomString(e) {
|
|
e = e || 32;
|
|
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
|
|
a = t.length,
|
|
n = "";
|
|
for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
|
|
return n
|
|
}
|
|
|
|
function encodeUTF8(s) {
|
|
var i, r = [], c, x;
|
|
for (i = 0; i < s.length; i++)
|
|
if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
|
|
else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
|
|
else {
|
|
if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
|
|
c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
|
|
r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
|
|
else r.push(0xE0 + (c >> 12 & 0xF));
|
|
r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
|
|
};
|
|
return r;
|
|
}
|
|
|
|
// 字符串加密成 hex 字符串
|
|
function sha1(s) {
|
|
var data = new Uint8Array(encodeUTF8(s))
|
|
var i, j, t;
|
|
var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2);
|
|
s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
|
|
for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);
|
|
s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
|
|
s[l - 1] = data.length << 3;
|
|
var w = [], f = [
|
|
function () { return m[1] & m[2] | ~m[1] & m[3]; },
|
|
function () { return m[1] ^ m[2] ^ m[3]; },
|
|
function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; },
|
|
function () { return m[1] ^ m[2] ^ m[3]; }
|
|
], rol = function (n, c) { return n << c | n >>> (32 - c); },
|
|
k = [1518500249, 1859775393, -1894007588, -899497514],
|
|
m = [1732584193, -271733879, null, null, -1009589776];
|
|
m[2] = ~m[0], m[3] = ~m[1];
|
|
for (i = 0; i < s.length; i += 16) {
|
|
var o = m.slice(0);
|
|
for (j = 0; j < 80; j++)
|
|
w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
|
|
t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
|
|
m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
|
|
for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0;
|
|
};
|
|
t = new DataView(new Uint32Array(m).buffer);
|
|
for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2);
|
|
|
|
var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
|
|
return (e < 16 ? "0" : "") + e.toString(16);
|
|
}).join("");
|
|
return hex;
|
|
}
|
|
|
|
|
|
getSignature(randomString(16), parseInt(new Date().getTime()/1000) )
|
|
|
|
function getSignature(nonceStr, timestamp) {
|
|
axios.get(`/wx/api/getWxJsapiTicket`).then(resp => {
|
|
if (resp.data.code === 200) {
|
|
splice = 'jsapi_ticket=' + resp.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href.split('#')[0];
|
|
console.log(splice)
|
|
signature = sha1(splice)
|
|
wx.config({
|
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
appId: appId, // 必填，公众号的唯一标识
|
|
timestamp:timestamp , // 必填，生成签名的时间戳
|
|
nonceStr: nonceStr, // 必填，生成签名的随机串
|
|
signature: signature,// 必填，签名
|
|
jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
|
|
})
|
|
setTimeout(function() {
|
|
wx.openLocation({
|
|
latitude: y, // 纬度，浮点数，范围为90 ~ -90
|
|
longitude: x, // 经度，浮点数，范围为180 ~ -180。
|
|
name: name, // 位置名
|
|
address: address, // 地址详情说明
|
|
scale: zoom, // 地图缩放级别,整形值,范围从1~28。默认为最大
|
|
})
|
|
}, 1000);
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
created() {
|
|
}
|
|
}).use(store)
|
|
.use(VueConfig)
|
|
.use(VueRouter.createRouter({
|
|
history: VueRouter.createWebHashHistory(),
|
|
routes: []
|
|
})).mount('#app');
|
|
</script>
|
|
|
|
</html>
|
|
|