1

pages/index/index.vue

@@ -1,46 +1,46 @@
 <template>
-  <view>
+	<view>
-    <!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
+		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
-    <canvas 
+		<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;"></canvas>
-      canvas-id="canvas" 
+
-      id="canvas"
+		<!-- 添加一个按钮，用于触发绘图 -->
-      style="width: 200px; height: 200px;"  
+		<button @click="handleDraw()">点击绘制圆形</button>
-    ></canvas>
+	</view>
-  </view>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+	import {
+		ref
+	} from 'vue'
 
-function draw() {
+	// 定义绘图函数
-  const ctx = uni.createCanvasContext('canvas')  // 创建canvas绘图上下文
+	function draw() {
+		const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文
 
-  // 绘制外圆
+		// 绘制外圆
-  ctx.beginPath()  // 开始路径
+		ctx.beginPath() // 开始路径
-  ctx.arc(100, 100, 80, 0, Math.PI * 2)  // 在坐标(100, 100)处绘制半径为80的圆形
+		ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
-  ctx.setFillStyle('rgba(0, 0, 255, 0.3)')  // 设置填充颜色为蓝色，透明度为0.3
+		ctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度
-  ctx.fill()  // 填充所创建的路径
+		ctx.fill() // 填充所创建的路径
-  
+		
-  // 绘制内圆以形成环形效果
+		// 绘制内圆以形成环形效果
-  // ctx.beginPath()  // 开始新的路径
+		ctx.beginPath() // 开始新的路径
-  // ctx.arc(100, 100, 60, 0, Math.PI * 2)  // 在相同中心点(100, 100)，但半径为60的圆形
+		ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
-  // ctx.setFillStyle('white')  // 设置填充颜色为白色
+		ctx.setFillStyle('white') // 设置填充颜色为白色
-  // ctx.fill()  // 填充以“清除”内部区域，形成环形
+		ctx.fill() // 填充以“清除”内部区域，形成环形
+		ctx.draw() // 将上述所有操作提交到canvas进行渲染
+	}
 
-  // // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：
+	// 按钮点击事件处理函数
-  // ctx.beginPath()  // 开始一个新的路径
+	const handleDraw = () => {
-  // ctx.rect(50, 50, 40, 40)  // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形
+		draw(); // 调用绘图函数
-  // ctx.setFillStyle('green')  // 设置填充颜色为绿色
+	}
-  // ctx.fill()  // 填充矩形
-  
-  ctx.draw()  // 将上述所有操作提交到canvas进行渲染
-}
-
-onMounted(() => {
-  draw()  // 页面加载完成后调用draw函数开始绘图
-})
 </script>
 
 <style scoped>
-/* 样式部分 */
+	/* 样式部分 */
+	button {
+		margin-top: 10px;
+		/* 给按钮设置一些上边距以避免过于紧凑 */
+	}
 </style>

unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\n  <view>\n    <!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n    <canvas \n      canvas-id=\"canvas\" \n      id=\"canvas\"\n      style=\"width: 200px; height: 200px;\"  \n    ></canvas>\n  </view>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\n\nfunction draw() {\n  const ctx = uni.createCanvasContext('canvas')  // 创建canvas绘图上下文\n\n  // 绘制外圆\n  ctx.beginPath()  // 开始路径\n  ctx.arc(100, 100, 80, 0, Math.PI * 2)  // 在坐标(100, 100)处绘制半径为80的圆形\n  ctx.setFillStyle('rgba(0, 0, 255, 0.3)')  // 设置填充颜色为蓝色，透明度为0.3\n  ctx.fill()  // 填充所创建的路径\n  \n  // 绘制内圆以形成环形效果\n  // ctx.beginPath()  // 开始新的路径\n  // ctx.arc(100, 100, 60, 0, Math.PI * 2)  // 在相同中心点(100, 100)，但半径为60的圆形\n  // ctx.setFillStyle('white')  // 设置填充颜色为白色\n  // ctx.fill()  // 填充以“清除”内部区域，形成环形\n\n  // // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：\n  // ctx.beginPath()  // 开始一个新的路径\n  // ctx.rect(50, 50, 40, 40)  // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形\n  // ctx.setFillStyle('green')  // 设置填充颜色为绿色\n  // ctx.fill()  // 填充矩形\n  \n  ctx.draw()  // 将上述所有操作提交到canvas进行渲染\n}\n\nonMounted(() => {\n  draw()  // 页面加载完成后调用draw函数开始绘图\n})\n</script>\n\n<style scoped>\n/* 样式部分 */\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni","onMounted"],"mappings":";;;;;AAcA,aAAS,OAAO;AACd,YAAM,MAAMA,cAAAA,MAAI,oBAAoB,QAAQ;AAG5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,sBAAsB;AACvC,UAAI,KAAM;AAcV,UAAI,KAAM;AAAA,IACZ;AAEAC,kBAAAA,UAAU,MAAM;AACd,WAAM;AAAA,IACR,CAAC;;;;;;;ACvCD,GAAG,WAAW,eAAe;"}
+{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view>\r\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\r\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;\"></canvas>\r\n\r\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\r\n\t\t<button @click=\"handleDraw()\">点击绘制圆形</button>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n\t// 定义绘图函数\r\n\tfunction draw() {\r\n\t\tconst ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\r\n\r\n\t\t// 绘制外圆\r\n\t\tctx.beginPath() // 开始路径\r\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\r\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\r\n\t\tctx.fill() // 填充所创建的路径\r\n\t\t\r\n\t\t// 绘制内圆以形成环形效果\r\n\t\tctx.beginPath() // 开始新的路径\r\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\r\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\r\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw() // 将上述所有操作提交到canvas进行渲染\r\n\t}\r\n\r\n\t// 按钮点击事件处理函数\r\n\tconst handleDraw = () => {\r\n\t\tdraw(); // 调用绘图函数\r\n\t}\r\n</script>\r\n\r\n<style scoped>\r\n\t/* 样式部分 */\r\n\tbutton {\r\n\t\tmargin-top: 10px;\r\n\t\t/* 给按钮设置一些上边距以避免过于紧凑 */\r\n\t}\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni"],"mappings":";;;;;AAgBC,aAAS,OAAO;AACf,YAAM,MAAMA,cAAAA,MAAI,oBAAoB,QAAQ;AAG5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,kBAAkB;AACnC,UAAI,KAAM;AAGV,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,OAAO;AACxB,UAAI,KAAM;AACV,UAAI,KAAM;AAAA,IACV;AAGD,UAAM,aAAa,MAAM;AACxB;IACA;;;;;;;;;ACnCF,GAAG,WAAW,eAAe;"}

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -4931,6 +4931,101 @@ function getCreateApp() {
     return my[method];
   }
 }
+function vOn(value, key) {
+  const instance = getCurrentInstance();
+  const ctx = instance.ctx;
+  const extraKey = typeof key !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq" || ctx.$mpPlatform === "mp-xhs") && (isString(key) || typeof key === "number") ? "_" + key : "";
+  const name = "e" + instance.$ei++ + extraKey;
+  const mpInstance = ctx.$scope;
+  if (!value) {
+    delete mpInstance[name];
+    return name;
+  }
+  const existingInvoker = mpInstance[name];
+  if (existingInvoker) {
+    existingInvoker.value = value;
+  } else {
+    mpInstance[name] = createInvoker(value, instance);
+  }
+  return name;
+}
+function createInvoker(initialValue, instance) {
+  const invoker = (e2) => {
+    patchMPEvent(e2);
+    let args = [e2];
+    if (instance && instance.ctx.$getTriggerEventDetail) {
+      if (typeof e2.detail === "number") {
+        e2.detail = instance.ctx.$getTriggerEventDetail(e2.detail);
+      }
+    }
+    if (e2.detail && e2.detail.__args__) {
+      args = e2.detail.__args__;
+    }
+    const eventValue = invoker.value;
+    const invoke = () => callWithAsyncErrorHandling(patchStopImmediatePropagation(e2, eventValue), instance, 5, args);
+    const eventTarget = e2.target;
+    const eventSync = eventTarget ? eventTarget.dataset ? String(eventTarget.dataset.eventsync) === "true" : false : false;
+    if (bubbles.includes(e2.type) && !eventSync) {
+      setTimeout(invoke);
+    } else {
+      const res = invoke();
+      if (e2.type === "input" && (isArray(res) || isPromise(res))) {
+        return;
+      }
+      return res;
+    }
+  };
+  invoker.value = initialValue;
+  return invoker;
+}
+const bubbles = [
+  // touch事件暂不做延迟，否则在 Android 上会影响性能，比如一些拖拽跟手手势等
+  // 'touchstart',
+  // 'touchmove',
+  // 'touchcancel',
+  // 'touchend',
+  "tap",
+  "longpress",
+  "longtap",
+  "transitionend",
+  "animationstart",
+  "animationiteration",
+  "animationend",
+  "touchforcechange"
+];
+function patchMPEvent(event, instance) {
+  if (event.type && event.target) {
+    event.preventDefault = NOOP;
+    event.stopPropagation = NOOP;
+    event.stopImmediatePropagation = NOOP;
+    if (!hasOwn(event, "detail")) {
+      event.detail = {};
+    }
+    if (hasOwn(event, "markerId")) {
+      event.detail = typeof event.detail === "object" ? event.detail : {};
+      event.detail.markerId = event.markerId;
+    }
+    if (isPlainObject(event.detail) && hasOwn(event.detail, "checked") && !hasOwn(event.detail, "value")) {
+      event.detail.value = event.detail.checked;
+    }
+    if (isPlainObject(event.detail)) {
+      event.target = extend({}, event.target, event.detail);
+    }
+  }
+}
+function patchStopImmediatePropagation(e2, value) {
+  if (isArray(value)) {
+    const originalStop = e2.stopImmediatePropagation;
+    e2.stopImmediatePropagation = () => {
+      originalStop && originalStop.call(e2);
+      e2._stopped = true;
+    };
+    return value.map((fn) => (e3) => !e3._stopped && fn(e3));
+  } else {
+    return value;
+  }
+}
+const o = (value, key) => vOn(value, key);
 function createApp$1(rootComponent, rootProps = null) {
   rootComponent && (rootComponent.mpType = "app");
   return createVueApp(rootComponent, rootProps).use(plugin);
@@ -7693,5 +7788,5 @@ const createSubpackageApp = initCreateSubpackageApp();
 exports._export_sfc = _export_sfc;
 exports.createSSRApp = createSSRApp;
 exports.index = index;
-exports.onMounted = onMounted;
+exports.o = o;
 //# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map

unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -7,15 +7,21 @@ const _sfc_main = {
       const ctx = common_vendor.index.createCanvasContext("canvas");
       ctx.beginPath();
       ctx.arc(100, 100, 80, 0, Math.PI * 2);
-      ctx.setFillStyle("rgba(0, 0, 255, 0.3)");
+      ctx.setFillStyle("rgba(0, 0, 0, 1)");
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(100, 100, 75, 0, Math.PI * 2);
+      ctx.setFillStyle("white");
       ctx.fill();
       ctx.draw();
     }
-    common_vendor.onMounted(() => {
+    const handleDraw = () => {
       draw();
-    });
+    };
     return (_ctx, _cache) => {
-      return {};
+      return {
+        a: common_vendor.o(($event) => handleDraw())
+      };
     };
   }
 };

unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
-<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas></view>
+<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas><button class="data-v-1cf27b2a" bindtap="{{a}}">点击绘制圆形</button></view>

unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -1,2 +1,6 @@
 
-/* 样式部分 */
+	/* 样式部分 */
+button.data-v-1cf27b2a {
+		margin-top: 10px;
+		/* 给按钮设置一些上边距以避免过于紧凑 */
+}