H5
/
wenhua818
關注 3
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 1 Wiki 活動
瀏覽代碼

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. 二進制
      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 查看文件

1 
+VITE_APP_API_BASE=

+ 1
- 0
.env.production 查看文件

1 
+VITE_APP_API_BASE=

+ 1
- 0
index.html 查看文件

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

+ 1
- 0
public/wx/jweixin-1.6.0.js
文件差異過大導致無法顯示
查看文件


+ 3
- 4
src/App.vue 查看文件

16 
 onMounted(() => {
 16 
 onMounted(() => {
17 
   preload(updateCallback).then((res) => {
 17 
   preload(updateCallback).then((res) => {
18 
     loading.value = false;
 18 
     loading.value = false;
19 
-    resources.value = res;
19 
+    resources.value = res.filter(x => !x.hidden);
20 
   })
 20 
   })
21 
 });
 21 
 });
22 
 </script>
 22 
 </script>
23
23
24 
 <template>
 24 
 <template>
25 
   <Loader :loading="loading" :percent="percent" />
 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 
 </template>
 28 
 </template>
29
29
30 
 <style lang="less" scoped>
 30 
 <style lang="less" scoped>
31 
-
32 
 </style>
 31 
 </style>

二進制
src/assets/index.jpg 查看文件


src/assets/cloud-texture.png → src/assets/mask.png 查看文件


+ 8
- 9
src/components/Mask.vue 查看文件

4
4
5 
 <script setup>
 5 
 <script setup>
6 
   import { onMounted, ref } from 'vue';
 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 
   // const props = defineProps({
 10 
   // const props = defineProps({
11 
   //   img: {
 11 
   //   img: {
15 
   // })
 15 
   // })
16
16
17 
   const emit = defineEmits(['end']);
 17 
   const emit = defineEmits(['end']);
18 
+  const { clientWidth, clientHeight } = document.body;
18
19
19 
   const cvsRef = ref();
 20 
   const cvsRef = ref();
20 
   const ctxRef = ref();
 21 
   const ctxRef = ref();
21 
   const img = new Image();
 22 
   const img = new Image();
23 
+  const imgHeight = ref();
22 
   img.src = indexImage;
 24 
   img.src = indexImage;
23 
   img.onload = function() {
 25 
   img.onload = function() {
24 
     const canv = cvsRef.value;
 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 
     canv.width = img.naturalWidth;
 30 
     canv.width = img.naturalWidth;
31 
-    canv.height = img.naturalHeight;
31 
+    canv.height = imgHeight.value; // img.naturalHeight;
32 
   }
 32 
   }
33 
   const imgMask = new Image();
 33 
   const imgMask = new Image();
34 
   imgMask.src = maskImage;
 34 
   imgMask.src = maskImage;
54 
     ctx.drawImage(imgMask, maskX, maskY, maskWidth, maskHeight);
 54 
     ctx.drawImage(imgMask, maskX, maskY, maskWidth, maskHeight);
55
55
56 
     ctx.globalCompositeOperation = "source-in";
 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 
     animationId = window.requestAnimationFrame(draw);
 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 
       window.cancelAnimationFrame(animationId);
 62 
       window.cancelAnimationFrame(animationId);
64 
       emit('end');
 63 
       emit('end');

+ 5
- 0
src/main.js 查看文件

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

+ 12
- 0
src/utils/resources.js 查看文件

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

+ 55
- 0
src/utils/wx.js 查看文件

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;