优化渲染热力图

src/pages/point-book.vue

@@ -31,7 +31,6 @@ const isIOS = computed(() => {
   return systemInfo.osName === "ios";
 });
 
-const loadImage = ref(false);
 const showModal = ref(false);
 const showTip = ref(false);
 const data = ref({
@@ -76,8 +75,6 @@ const loadData = async () => {
   else if (result2.checkInCount >= 5) hot = 3;
   else if (result2.checkInCount === 7) hot = 4;
   uni.$emit("update-hot", hot);
-  loadImage.value = true;
-  // 异步生成热力图，不阻塞UI
   const generateHeatmapAsync = async () => {
     const weekArrows = result2.weekArrows
       .filter((item) => item.x && item.y)
@@ -90,7 +87,7 @@ const loadData = async () => {
           "heatMapCanvas",
           rect.width,
           rect.height,
-          weekArrows,
+          weekArrows
         );
         heatMapImageSrc.value = quickPath;
         // 延迟后再渲染精细版本
@@ -107,15 +104,13 @@ const loadData = async () => {
           range: [0, 1],
           gridSize: 120, // 更高的网格密度，减少锯齿
           bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
-          showPoints: false,
+          showPoints: false
         }
       );
       heatMapImageSrc.value = finalPath;
-      loadImage.value = false;
       console.log("热力图图片地址:", finalPath);
     } catch (error) {
       console.error("生成热力图图片失败:", error);
-      loadImage.value = false;
     }
   };
 
@@ -287,9 +282,22 @@ onShareTimeline(() => {
           :src="heatMapImageSrc"
           mode="aspectFill"
         />
-        <view v-if="loadImage" class="load-image">
-          <text>生成中...</text>
-        </view>
+        <!-- #ifdef MP-WEIXIN -->
+        <canvas
+          id="heatMapCanvas"
+          canvas-id="heatMapCanvas"
+          type="2d"
+          style="
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: -1000px;
+            left: 0;
+            z-index: 2;
+          "
+        />
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN -->
         <canvas
           canvas-id="heatMapCanvas"
           style="
@@ -301,6 +309,7 @@ onShareTimeline(() => {
             z-index: 2;
           "
         />
+        <!-- #endif -->
       </view>
       <view class="reward" v-if="data.totalArrow">
         <button hover-class="none" @click="showTip = true">
@@ -451,19 +460,6 @@ onShareTimeline(() => {
   top: 0;
   left: 0;
 }
-.load-image {
-  position: absolute;
-  width: 160rpx;
-  top: calc(50% - 65rpx);
-  left: calc(50% - 75rpx);
-  /* background: rgb(0 0 0 / 0.4); */
-  /* padding: 20rpx; */
-  color: #525252;
-  font-size: 20rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 .reward {
   width: 100%;
   display: flex;