H5
/
wenhua818
Наблюдаван 3
Харесван 0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 1 Уики Activity
Преглед на файлове

feats

张延森 преди 2 години
родител
8db479b71d
ревизия
564c454dce
променени са 11 файла, в които са добавени 87 реда и са изтрити 13 реда
Разделен изглед Покажи статистика за разликите
  1. 1
    0
      .env.development
  2. 1
    0
      .env.production
  3. 1
    0
      index.html
  4. 1
    0
      public/wx/jweixin-1.6.0.js
  5. 3
    4
      src/App.vue
  6. BIN
      src/assets/index.jpg
  7. 0
    0
      src/assets/mask.png
  8. 8
    9
      src/components/Mask.vue
  9. 5
    0
      src/main.js
  10. 12
    0
      src/utils/resources.js
  11. 55
    0
      src/utils/wx.js

+ 1
- 0
.env.development Целия файл 

@@ -0,0 +1 @@
1 
+VITE_APP_API_BASE=

+ 1
- 0
.env.production Целия файл 

@@ -0,0 +1 @@
1 
+VITE_APP_API_BASE=

+ 1
- 0
index.html Целия файл 

@@ -5,6 +5,7 @@
5 5 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6 6 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 7 
     <link rel="stylesheet" href="./fonts/iconfont.css">
8 
+    <script src="./wx/jweixin-1.6.0.js"></script>
8 9 
     <title>和“宁好”一起，跟着诗歌游南京</title>
9 10 
   </head>
10 11 
   <body>

+ 1
- 0
public/wx/jweixin-1.6.0.js
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 3
- 4
src/App.vue Целия файл 

@@ -16,17 +16,16 @@ const updateCallback = (num) => {
16 16 
 onMounted(() => {
17 17 
   preload(updateCallback).then((res) => {
18 18 
     loading.value = false;
19 
-    resources.value = res;
19 
+    resources.value = res.filter(x => !x.hidden);
20 20 
   })
21 21 
 });
22 22 
 </script>
23 23
24 24 
 <template>
25 25 
   <Loader :loading="loading" :percent="percent" />
26 
-  <ScrollDown />
27 
-  <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
26 
+    <ScrollDown />
27 
+    <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
28 28 
 </template>
29 29
30 30 
 <style lang="less" scoped>
31 
-
32 31 
 </style>

BIN
src/assets/index.jpg Целия файл


src/assets/cloud-texture.png → src/assets/mask.png Целия файл


+ 8
- 9
src/components/Mask.vue Целия файл 

@@ -4,8 +4,8 @@
4 4
5 5 
 <script setup>
6 6 
   import { onMounted, ref } from 'vue';
7 
-  import indexImage from '@/assets/images/1.jpg';
8 
-  import maskImage from '@/assets/cloud-texture.png';
7 
+  import indexImage from '@/assets/index.jpg';
8 
+  import maskImage from '@/assets/mask.png';
9 9
10 10 
   // const props = defineProps({
11 11 
   //   img: {
 
@@ -15,20 +15,20 @@
15 15 
   // })
16 16
17 17 
   const emit = defineEmits(['end']);
18 
+  const { clientWidth, clientHeight } = document.body;
18 19
19 20 
   const cvsRef = ref();
20 21 
   const ctxRef = ref();
21 22 
   const img = new Image();
23 
+  const imgHeight = ref();
22 24 
   img.src = indexImage;
23 25 
   img.onload = function() {
24 26 
     const canv = cvsRef.value;
25 27
26 
-    const { clientWidth, clientHeight } = document.body;
27 
-    canv.style.width = `${clientWidth}px`;
28 
-    canv.style.height = `${img.naturalHeight * clientWidth / img.naturalWidth}px`;
28 
+    imgHeight.value = img.naturalWidth * clientHeight / clientWidth
29 29
30 30 
     canv.width = img.naturalWidth;
31 
-    canv.height = img.naturalHeight;
31 
+    canv.height = imgHeight.value; // img.naturalHeight;
32 32 
   }
33 33 
   const imgMask = new Image();
34 34 
   imgMask.src = maskImage;
 
@@ -54,11 +54,10 @@
54 54 
     ctx.drawImage(imgMask, maskX, maskY, maskWidth, maskHeight);
55 55
56 56 
     ctx.globalCompositeOperation = "source-in";
57 
-    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
57 
+    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
58 58 
     animationId = window.requestAnimationFrame(draw);
59 59
60 
-    const { clientWidth, clientHeight } = document.body;
61 
-    if ((maskWidth - clientWidth + maskX) > img.naturalWidth && (maskHeight - clientHeight + maskY) > img.naturalHeight) {
60 
+    if ((maskWidth - clientWidth + maskX) > img.naturalWidth && (maskHeight - clientHeight + maskY) > imgHeight.value) {
62 61 
       // 动画就结束
63 62 
       window.cancelAnimationFrame(animationId);
64 63 
       emit('end');

+ 5
- 0
src/main.js Целия файл 

@@ -2,7 +2,12 @@ import { createApp } from 'vue'
2 2 
 import './style.css'
3 3 
 import App from './App.vue'
4 4 
 import store from './store'
5 
+import wxsdk from './utils/wx'
6 
+
7 
+const { share } = wxsdk(location.href)
5 8
6 9 
 const app = createApp(App);
7 10 
 app.use(store);
8 11 
 app.mount('#app');
12 
+
13 
+share();

+ 12
- 0
src/utils/resources.js Целия файл 

@@ -1,4 +1,8 @@
1 1
2 
+
3 
+import index from '@/assets/index.jpg';
4 
+import mask from '@/assets/mask.png';
5 
+
2 6 
 import img1 from '@/assets/images/1.jpg';
3 7 
 import img2 from '@/assets/images/2.jpg';
4 8 
 import img3 from '@/assets/images/3.jpg';
 
@@ -62,6 +66,14 @@ import audio26 from '@/assets/audios/26世界文学客厅.mp3';
62 66
63 67 
 // 预加载资源
64 68 
 export const resources = [
69 
+  {
70 
+    image: index,
71 
+    hidden: true,
72 
+  },
73 
+  {
74 
+    image: mask,
75 
+    hidden: true,
76 
+  },
65 77 
   {
66 78 
     image: img1,
67 79 
   },

+ 55
- 0
src/utils/wx.js Целия файл 

@@ -0,0 +1,55 @@
1 
+
2 
+function wxsdk() {
3 
+  const isDev = import.meta.env.DEV
4 
+  const apiBase = import.meta.env.VITE_APP_API_BASE
5 
+  // 分享接口
6 
+  const shareAPIs = [
7 
+    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
8 
+    'updateAppMessageShareData',
9 
+    // 自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
10 
+    'updateTimelineShareData',
11 
+    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
12 
+    'onMenuShareTimeline',
13 
+    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
14 
+    'onMenuShareAppMessage',
15 
+    // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
16 
+    'onMenuShareQQ',
17 
+    // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
18 
+    'onMenuShareWeibo',
19 
+    // 获取“分享到 QQ 空间”按钮点击状态及自定义分享内容接口（即将废弃）
20 
+    'onMenuShareQZone',
21 
+  ]
22 
+
23 
+  function init(url) {
24 
+    // 请求后台接口
25 
+    fetch(`${apiBase}?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
26 
+      wx.config({
27 
+        debug: isDev, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
28 
+        appId: res.appId, // 必填，公众号的唯一标识
29 
+        timestamp: res.timestamp, // 必填，生成签名的时间戳
30 
+        nonceStr: res.nonceStr, // 必填，生成签名的随机串
31 
+        signature: res.signature,// 必填，签名
32 
+        jsApiList: shareAPIs // 必填，需要使用的 JS 接口列表
33 
+      });
34 
+    })
35 
+  }
36 
+
37 
+  // 立即执行
38 
+  init();
39 
+
40 
+  function share(params) {
41 
+    if (isDev) return;
42 
+
43 
+    wx.ready(() => {
44 
+      for (let api of shareAPIs) {
45 
+        wx[api](params)
46 
+      }
47 
+    });
48 
+  }
49 
+
50 
+  return {
51 
+    share
52 
+  }
53 
+}
54 
+
55 
+export default wxsdk;