feats

.env.development

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

.env.production

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

public/config.js

@@ -6,3 +6,5 @@ const shareOptTpl = {
 }
 
 const logo2URL = 'https://s.wenkor.com/group-collection-20220706/#/'
+
+const API_BASE = 'http://test-h5.njyunzhi.com/api/wx/jsapi'

src/App.vue

@@ -10,6 +10,7 @@ const fixedLogo = './fixed-logo.png';
 const loading = ref(true);
 const percent = ref(0);
 const resources = ref([]);
+const fixedLogoHidden = ref(false);
 
 const updateCallback = (num) => {
   percent.value = Math.round(num * 100);
@@ -21,6 +22,15 @@ const onClick = () => {
 }
 
 onMounted(() => {
+  window.document.body.addEventListener('touchmove', () => {
+    fixedLogoHidden.value = true;
+  })
+  window.document.body.addEventListener('touchend', () => {
+    setTimeout(() => {
+      fixedLogoHidden.value = false;
+    }, 600);
+  })
+
   preload(updateCallback).then((res) => {
     loading.value = false;
     resources.value = res.filter(x => !x.hidden);
@@ -32,19 +42,27 @@ onMounted(() => {
   <Loader :loading="loading" :percent="percent" />
   <ScrollDown />
   <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
-  <img :src="fixedLogo" alt="" class="fixed-log" @click="onClick">
+  <img :src="fixedLogo" alt="" class="fixed-log" :class="{ 'hidden': fixedLogoHidden }" @click="onClick">
 </template>
 
 <style lang="less" scoped>
 .fixed-log {
   position: fixed;
   right: 20px;
-  bottom: 400px;
+  bottom: 100px;
   z-index: 50;
   width: 48px;
   height: 48px;
   border: none;
   box-shadow: 0 0 2px 2px rgba(0,0,0, .1);
   border-radius: 50%;
+  transition: all 0.6s;
+  opacity: 1;
+  will-change: right opacity;
+
+  &.hidden {
+    right: -10px;
+    opacity: 0;
+  }
 }
 </style>

src/components/Image.vue

@@ -81,6 +81,7 @@ const onLoad = (e) => {
 
 <style lang="less" scoped>
 .img-wrapper {
+  margin-top: -0.1px; // 解决 iphone13 白边问题
   position: relative;
 
   .paybtn {
@@ -103,8 +104,7 @@ const onLoad = (e) => {
   img {
     display: block;
     width: 100vw;
-    height: auto;
-    object-fit: contain;
+    object-fit: fill;
   }
 }
 </style>

src/components/ScrollDown.vue

@@ -11,9 +11,9 @@ const style = ref({ opacity: 1 })
 
 const onScroll = (e) => {
   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight;
   const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
-	if (clientHeight + scrollTop === scrollHeight) {
+	if (offsetHeight + scrollTop >= scrollHeight) {
 		style.value = { opacity: 0 }
     console.log('已到底部');
 	} else {
@@ -39,7 +39,7 @@ onBeforeUnmount(() => {
 .scroll-down {
   position: fixed;
   bottom: 100px;
-  right: 60px;
+  left: 50%;
   z-index: 2;
 
   & > span {

src/utils/wx.js

@@ -1,7 +1,10 @@
 
-function wxsdk() {
+function wxsdk(url) {
   const isDev = import.meta.env.DEV
-  const apiBase = import.meta.env.VITE_APP_API_BASE
+
+  // API_BASE 来源 public/config.js
+  const apiBase = API_BASE // import.meta.env.VITE_APP_API_BASE
+
   // 分享接口
   const shareAPIs = [
     // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
@@ -20,17 +23,21 @@ function wxsdk() {
     'onMenuShareQZone',
   ]
 
-  function init(url) {
+  function init() {
     // 请求后台接口
     fetch(`${apiBase}?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
-      wx.config({
-        debug: isDev, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
-        appId: res.appId, // 必填，公众号的唯一标识
-        timestamp: res.timestamp, // 必填，生成签名的时间戳
-        nonceStr: res.nonceStr, // 必填，生成签名的随机串
-        signature: res.signature,// 必填，签名
-        jsApiList: shareAPIs // 必填，需要使用的 JS 接口列表
-      });
+      if (res.code === 1000) {
+        const data = res.data;
+
+        wx.config({
+          debug: isDev, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
+          appId: data.appId, // 必填，公众号的唯一标识
+          timestamp: data.timestamp, // 必填，生成签名的时间戳
+          nonceStr: data.nonceStr, // 必填，生成签名的随机串
+          signature: data.signature,// 必填，签名
+          jsApiList: shareAPIs // 必填，需要使用的 JS 接口列表
+        });
+      }
     })
   }
 
@@ -42,6 +49,8 @@ function wxsdk() {
 
     wx.ready(() => {
       for (let api of shareAPIs) {
+        if (typeof wx[api] === 'function') continue;
+
         wx[api]({
           ...shareOptTpl,
           ...params

vite.config.js

@@ -7,6 +7,11 @@ export default defineConfig({
   base: '',
   server:{
     host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:7088',
+      }
+    }
   },
   plugins: [vue()],
   resolve:{