canvas和image切换法解决canvas真机层级问题

pages/index/index.js

@@ -16,6 +16,7 @@ Page({
     scene: 1001,
     progressCanvasContext: '',
     progressCanvasRate: '',
+    progressCanvasImage: '',
   },
   
   onShow() {
@@ -65,7 +66,20 @@ Page({
     context.arc(-245 * rate, 0, 7 * rate, 0, 2 * Math.PI, false);
     context.fill();
     // 画
-    context.draw();
+    context.draw(false, drawRes => {
+      if (drawRes.errMsg === 'drawCanvas:ok') {
+        wx.canvasToTempFilePath({
+          canvasId: 'progressCanvas',
+          success:(ImageRes) => {
+            this.setData({
+              progressCanvasImage: ImageRes.tempFilePath
+            });
+          }
+        });
+      } else {
+        // 重画
+      }
+    });
   },
 
   getPageData() {
@@ -277,9 +291,10 @@ Page({
               setData.currentSteps = (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0;
             }
             this.setData(setData);
+            wx.hideLoading();
             this.showToast();
           },
-          complete: () => {
+          fail: () => {
             wx.hideLoading();
           }
         });
@@ -364,7 +379,20 @@ Page({
     context.arc(-245 * rate, 0, 7 * rate, 0, 2 * Math.PI, false);
     context.fill();
     // 画
-    context.draw();
+    context.draw(false, drawRes => {
+      if (drawRes.errMsg === 'drawCanvas:ok') {
+        wx.canvasToTempFilePath({
+          canvasId: 'progressCanvas',
+          success:(ImageRes) => {
+            this.setData({
+              progressCanvasImage: ImageRes.tempFilePath
+            });
+          }
+        });
+      } else {
+        this.drawProgressCanvas();
+      }
+    });
   },
 
   // 获取微信步数失败处理，包括未授权、设备不支持等
@@ -501,7 +529,6 @@ Page({
     });
   },
 
-
   // 暂留==================================================================
 
   // 通过code2session方式拿unionid

pages/index/index.wxml

@@ -7,7 +7,8 @@
             <view>说明</view>
         </view>
         <view class="today-step-info" bindtap="clickStepData">
-            <canvas class="progress-canvas" canvas-id="progressCanvas"></canvas>
+            <image class="progress-canvas" src="{{progressCanvasImage}}" wx:if="{{activityExplainShow || showGetUserInfo}}"></image>
+            <canvas class="progress-canvas" canvas-id="progressCanvas" hidden="{{activityExplainShow || showGetUserInfo}}"></canvas>
             <block wx:if="{{stepAuth}}">
                 <view class="info-title">今日步数</view>
                 <view class="today-step-num">{{currentSteps}}</view>
@@ -35,7 +36,7 @@
     </view>
 </view>
 <!-- 活动说明弹窗 -->
-<view class="activity-explain-popup-bg" wx:if="{{activityExplainShow}}">
+<view class="activity-explain-popup-bg" catchtouchmove wx:if="{{activityExplainShow}}">
     <view class="activity-explain-popup-container">
         <view class="popup-title">活动说明</view>
         <view class="popup-explain">本小程序仅用于记录您的步数明细数据，获取步数数据成功后，返回报名页面，即打卡成功</view>