canvas代码优化

src/pages/first-try.vue

@@ -13,8 +13,9 @@ import BowPower from "@/components/BowPower.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
 import audioManager from "@/audioManager";
-import { createPractiseAPI } from "@/apis";
-import { generateCanvasImage, wxShare, debounce } from "@/util";
+import { createPractiseAPI, getPractiseAPI } from "@/apis";
+import { sharePractiseData } from "@/canvas";
+import { wxShare, debounce } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -60,34 +61,29 @@ const createPractise = async (arrows) => {
   if (result) practiseId.value = result.id;
 };
 
+const onOver = async () => {
+  start.value = false;
+  practiseResult.value = await getPractiseAPI(practiseId.value);
+};
+
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-      if (scores.value.length < total) {
-        scores.value.push(msg.target);
-      }
       if (step.value === 2 && msg.target.dst / 100 >= 5) {
         btnDisabled.value = false;
         showGuide.value = true;
+      } else if (scores.value.length < total) {
+        scores.value.push(msg.target);
       }
-    }
-    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-      if (practiseId.value && practiseId.value === msg.practice.id) {
-        setTimeout(() => {
-          start.value = false;
-          practiseResult.value = {
-            ...msg.practice,
-            arrows: JSON.parse(msg.practice.arrows),
-            lvl: msg.lvl,
-          };
-        }, 1500);
+      if (scores.value.length === total) {
+        setTimeout(onOver, 1500);
       }
     }
   });
 }
 
 const onClickShare = debounce(async () => {
-  await generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
+  await sharePractiseData("shareCanvas", 1, user.value, practiseResult.value);
   await wxShare("shareCanvas");
 });
 
@@ -262,7 +258,7 @@ const onClose = () => {
             : ''
         }finish-tip.png`"
       />
-      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+      <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">

src/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import AppFooter from "@/components/AppFooter.vue";
@@ -8,7 +8,6 @@ import UserHeader from "@/components/UserHeader.vue";
 import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
-import ScreenHint2 from "@/components/ScreenHint2.vue";
 
 import {
   getAppConfig,
@@ -35,7 +34,6 @@ const {
 const { user, device, rankData, online } = storeToRefs(store);
 const showModal = ref(false);
 const showGuide = ref(false);
-const showTheUser = ref(false);
 
 const toPage = async (path) => {
   if (!user.value.id) {
@@ -58,22 +56,6 @@ const toRankListPage = () => {
   });
 };
 
-watch(
-  () => user.value.id,
-  (newVal) => {
-    if (newVal && "823,209,293,257,210,290".indexOf(newVal) !== -1) {
-      const show = uni.getStorageSync("show-the-user");
-      if (!show) {
-        showTheUser.value = true;
-        uni.setStorageSync("show-the-user", true);
-      }
-    }
-  },
-  {
-    deep: false,
-  }
-);
-
 onShow(async () => {
   const token = uni.getStorageSync(
     `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
@@ -265,23 +247,6 @@ onShareTimeline(() => {
       <SModal :show="showModal" :onClose="() => (showModal = false)">
         <Signin :onClose="() => (showModal = false)" />
       </SModal>
-      <ScreenHint2 :show="showTheUser" :onClose="() => (showTheUser = false)">
-        <view class="tip-content">
-          <text>公告</text>
-          <text>小程序问题找客服 1v1 解答！</text>
-          <view>
-            <text>反馈 bug 可领取红包</text>
-            <image src="../static/hongbao.png" mode="widthFix" />
-          </view>
-          <text>射箭爱好者群等你，扫码加入～</text>
-          <image
-            src="../static/service-wechat.png"
-            mode="widthFix"
-            show-menu-by-longpress
-          />
-          <text>长按添加客服</text>
-        </view>
-      </ScreenHint2>
     </view>
     <AppFooter />
   </Container>
@@ -467,41 +432,6 @@ onShareTimeline(() => {
   line-height: 25px;
   font-weight: 500;
 }
-.tip-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 26rpx;
-  color: #333333;
-  line-height: 42rpx;
-  padding: 40rpx;
-}
-.tip-content > text:first-child {
-  font-weight: 500;
-  font-size: 30rpx;
-  color: #333333;
-  margin: 20rpx 0;
-}
-.tip-content > view {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.tip-content > view > image {
-  width: 26rpx;
-  height: 32rpx;
-  margin-left: 5rpx;
-}
-.tip-content > image {
-  width: 302rpx;
-  height: 302rpx;
-  margin: 10rpx;
-}
-.tip-content > text:last-child {
-  font-size: 24rpx;
-  color: #999999;
-}
 .top-theme {
   position: absolute;
   display: flex;

src/pages/point-book-detail.vue

@@ -7,8 +7,8 @@ import ScreenHint2 from "@/components/ScreenHint2.vue";
 import RingBarChart from "@/components/RingBarChart.vue";
 
 import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
-import { wxShare, generateShareCard } from "@/util";
-import { generateShareImage } from "@/canvas";
+import { wxShare } from "@/util";
+import { generateShareImage, generateShareCard } from "@/canvas";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";

src/pages/point-book-rank.vue

@@ -5,7 +5,7 @@ import PointRankItem from "@/components/PointRankItem.vue";
 import { getPointBookRankListAPI } from "@/apis";
 import { capsuleHeight } from "@/util";
 import { wxShare } from "@/util";
-import { sharePractiseData } from "@/canvas";
+import { sharePointData } from "@/canvas";
 
 const list = ref([]);
 const mine = ref({
@@ -24,7 +24,7 @@ const onLoad = async (page) => {
 const shareImage = async () => {
   if (loading.value || !mine.value.id) return;
   loading.value = true;
-  await sharePractiseData("shareCanvas", mine.value);
+  await sharePointData("shareCanvas", mine.value);
   await wxShare("shareCanvas");
   loading.value = false;
 };

src/pages/practise-one.vue

@@ -14,7 +14,8 @@ import BubbleTip from "@/components/BubbleTip.vue";
 import audioManager from "@/audioManager";
 
 import { createPractiseAPI, getPractiseAPI } from "@/apis";
-import { generateCanvasImage, wxShare, debounce } from "@/util";
+import { sharePractiseData } from "@/canvas";
+import { wxShare, debounce } from "@/util";
 import { MESSAGETYPES, roundsName } from "@/constants";
 
 import useStore from "@/store";
@@ -84,7 +85,7 @@ async function onComplete() {
 }
 
 const onClickShare = debounce(async () => {
-  await generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
+  await sharePractiseData("shareCanvas", 2, user.value, practiseResult.value);
   await wxShare("shareCanvas");
 });
 
@@ -155,7 +156,7 @@ onBeforeUnmount(() => {
               : ''
           }finish-tip.png`"
         />
-        <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+        <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
       </block>
     </view>
     <view :style="{ marginBottom: '20px' }">

src/pages/practise-two.vue

@@ -13,7 +13,8 @@ import BubbleTip from "@/components/BubbleTip.vue";
 import audioManager from "@/audioManager";
 
 import { createPractiseAPI, getPractiseAPI } from "@/apis";
-import { generateCanvasImage, wxShare, debounce } from "@/util";
+import { sharePractiseData } from "@/canvas";
+import { wxShare, debounce } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 
 import useStore from "@/store";
@@ -78,7 +79,7 @@ async function onComplete() {
 }
 
 const onClickShare = debounce(async () => {
-  await generateCanvasImage("shareCanvas", 3, user.value, practiseResult.value);
+  await sharePractiseData("shareCanvas", 3, user.value, practiseResult.value);
   await wxShare("shareCanvas");
 });
 
@@ -146,7 +147,7 @@ onBeforeUnmount(() => {
               : ''
           }finish-tip.png`"
         />
-        <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+        <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
       </block>
     </view>
     <view :style="{ marginBottom: '20px' }">