张延森 2 年前
父节点
当前提交
8eaab9bf6e
共有 10 个文件被更改,包括 54 次插入20 次删除
  1. 1
    1
      .env.development
  2. 1
    1
      .env.production
  3. 2
    0
      public/config.js
  4. 二进制
      public/share.jpg
  5. 二进制
      public/share.png
  6. 20
    2
      src/App.vue
  7. 2
    2
      src/components/Image.vue
  8. 3
    3
      src/components/ScrollDown.vue
  9. 20
    11
      src/utils/wx.js
  10. 5
    0
      vite.config.js

+ 1
- 1
.env.development 查看文件

1
-VITE_APP_API_BASE=
1
+# VITE_APP_API_BASE=https://api.h5.njyunzhi.com/mp/jssdk

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

1
-VITE_APP_API_BASE=
1
+# VITE_APP_API_BASE=/api/wx/jsapi

+ 2
- 0
public/config.js 查看文件

6
 }
6
 }
7
 
7
 
8
 const logo2URL = 'https://s.wenkor.com/group-collection-20220706/#/'
8
 const logo2URL = 'https://s.wenkor.com/group-collection-20220706/#/'
9
+
10
+const API_BASE = 'http://test-h5.njyunzhi.com/api/wx/jsapi'

二进制
public/share.jpg 查看文件


二进制
public/share.png 查看文件


+ 20
- 2
src/App.vue 查看文件

10
 const loading = ref(true);
10
 const loading = ref(true);
11
 const percent = ref(0);
11
 const percent = ref(0);
12
 const resources = ref([]);
12
 const resources = ref([]);
13
+const fixedLogoHidden = ref(false);
13
 
14
 
14
 const updateCallback = (num) => {
15
 const updateCallback = (num) => {
15
   percent.value = Math.round(num * 100);
16
   percent.value = Math.round(num * 100);
21
 }
22
 }
22
 
23
 
23
 onMounted(() => {
24
 onMounted(() => {
25
+  window.document.body.addEventListener('touchmove', () => {
26
+    fixedLogoHidden.value = true;
27
+  })
28
+  window.document.body.addEventListener('touchend', () => {
29
+    setTimeout(() => {
30
+      fixedLogoHidden.value = false;
31
+    }, 600);
32
+  })
33
+
24
   preload(updateCallback).then((res) => {
34
   preload(updateCallback).then((res) => {
25
     loading.value = false;
35
     loading.value = false;
26
     resources.value = res.filter(x => !x.hidden);
36
     resources.value = res.filter(x => !x.hidden);
32
   <Loader :loading="loading" :percent="percent" />
42
   <Loader :loading="loading" :percent="percent" />
33
   <ScrollDown />
43
   <ScrollDown />
34
   <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
44
   <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
35
-  <img :src="fixedLogo" alt="" class="fixed-log" @click="onClick">
45
+  <img :src="fixedLogo" alt="" class="fixed-log" :class="{ 'hidden': fixedLogoHidden }" @click="onClick">
36
 </template>
46
 </template>
37
 
47
 
38
 <style lang="less" scoped>
48
 <style lang="less" scoped>
39
 .fixed-log {
49
 .fixed-log {
40
   position: fixed;
50
   position: fixed;
41
   right: 20px;
51
   right: 20px;
42
-  bottom: 400px;
52
+  bottom: 100px;
43
   z-index: 50;
53
   z-index: 50;
44
   width: 48px;
54
   width: 48px;
45
   height: 48px;
55
   height: 48px;
46
   border: none;
56
   border: none;
47
   box-shadow: 0 0 2px 2px rgba(0,0,0, .1);
57
   box-shadow: 0 0 2px 2px rgba(0,0,0, .1);
48
   border-radius: 50%;
58
   border-radius: 50%;
59
+  transition: all 0.6s;
60
+  opacity: 1;
61
+  will-change: right opacity;
62
+
63
+  &.hidden {
64
+    right: -10px;
65
+    opacity: 0;
66
+  }
49
 }
67
 }
50
 </style>
68
 </style>

+ 2
- 2
src/components/Image.vue 查看文件

81
 
81
 
82
 <style lang="less" scoped>
82
 <style lang="less" scoped>
83
 .img-wrapper {
83
 .img-wrapper {
84
+  margin-top: -0.1px; // 解决 iphone13 白边问题
84
   position: relative;
85
   position: relative;
85
 
86
 
86
   .paybtn {
87
   .paybtn {
103
   img {
104
   img {
104
     display: block;
105
     display: block;
105
     width: 100vw;
106
     width: 100vw;
106
-    height: auto;
107
-    object-fit: contain;
107
+    object-fit: fill;
108
   }
108
   }
109
 }
109
 }
110
 </style>
110
 </style>

+ 3
- 3
src/components/ScrollDown.vue 查看文件

11
 
11
 
12
 const onScroll = (e) => {
12
 const onScroll = (e) => {
13
   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
13
   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
14
-  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
14
+  const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight;
15
   const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
15
   const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
16
-	if (clientHeight + scrollTop === scrollHeight) {
16
+	if (offsetHeight + scrollTop >= scrollHeight) {
17
 		style.value = { opacity: 0 }
17
 		style.value = { opacity: 0 }
18
     console.log('已到底部');
18
     console.log('已到底部');
19
 	} else {
19
 	} else {
39
 .scroll-down {
39
 .scroll-down {
40
   position: fixed;
40
   position: fixed;
41
   bottom: 100px;
41
   bottom: 100px;
42
-  right: 60px;
42
+  left: 50%;
43
   z-index: 2;
43
   z-index: 2;
44
 
44
 
45
   & > span {
45
   & > span {

+ 20
- 11
src/utils/wx.js 查看文件

1
 
1
 
2
-function wxsdk() {
2
+function wxsdk(url) {
3
   const isDev = import.meta.env.DEV
3
   const isDev = import.meta.env.DEV
4
-  const apiBase = import.meta.env.VITE_APP_API_BASE
4
+
5
+  // API_BASE 来源 public/config.js
6
+  const apiBase = API_BASE // import.meta.env.VITE_APP_API_BASE
7
+
5
   // 分享接口
8
   // 分享接口
6
   const shareAPIs = [
9
   const shareAPIs = [
7
     // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
10
     // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
20
     'onMenuShareQZone',
23
     'onMenuShareQZone',
21
   ]
24
   ]
22
 
25
 
23
-  function init(url) {
26
+  function init() {
24
     // 请求后台接口
27
     // 请求后台接口
25
     fetch(`${apiBase}?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
28
     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
-      });
29
+      if (res.code === 1000) {
30
+        const data = res.data;
31
+
32
+        wx.config({
33
+          debug: isDev, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
34
+          appId: data.appId, // 必填,公众号的唯一标识
35
+          timestamp: data.timestamp, // 必填,生成签名的时间戳
36
+          nonceStr: data.nonceStr, // 必填,生成签名的随机串
37
+          signature: data.signature,// 必填,签名
38
+          jsApiList: shareAPIs // 必填,需要使用的 JS 接口列表
39
+        });
40
+      }
34
     })
41
     })
35
   }
42
   }
36
 
43
 
42
 
49
 
43
     wx.ready(() => {
50
     wx.ready(() => {
44
       for (let api of shareAPIs) {
51
       for (let api of shareAPIs) {
52
+        if (typeof wx[api] === 'function') continue;
53
+
45
         wx[api]({
54
         wx[api]({
46
           ...shareOptTpl,
55
           ...shareOptTpl,
47
           ...params
56
           ...params

+ 5
- 0
vite.config.js 查看文件

7
   base: '',
7
   base: '',
8
   server:{
8
   server:{
9
     host: '0.0.0.0',
9
     host: '0.0.0.0',
10
+    proxy: {
11
+      '/api': {
12
+        target: 'http://127.0.0.1:7088',
13
+      }
14
+    }
10
   },
15
   },
11
   plugins: [vue()],
16
   plugins: [vue()],
12
   resolve:{
17
   resolve:{