1

pages.json

@@ -1,6 +1,11 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/index/index_step4",
+			"style": {
+				"navigationBarTitleText": "step"
+			}
+		},{
 			"path": "pages/index/step2",
 			"style": {
 				"navigationBarTitleText": "fu"

pages/index/index.vue

@@ -34,12 +34,11 @@
 
 	// 按钮点击事件处理函数
 	const handleDraw = () => {
-		console.log('111111');
 		draw(); // 调用绘图函数
-		console.log('222222222');
 	}
 
 	onMounted(() => {
+		// draw()
 		// 确保在组件挂载后可以获取到Canvas元素
 	})
 </script>

pages/index/index_step4.vue

@@ -0,0 +1,53 @@
+<template>
+	<view>
+		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
+		<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;border: 1px solid red;" :width="canvasWidth" :height="canvasHeight"></canvas>
+
+		<!-- 添加一个按钮，用于触发绘图 -->
+		<button @click="handleDraw">跳转step2</button>
+	</view>
+</template>
+
+<script setup>
+	import { ref, onMounted ,getCurrentInstance } from 'vue'
+
+	const canvasWidth = ref(200)  // 动态设置Canvas宽度
+	const canvasHeight = ref(200) // 动态设置Canvas高度
+	const instance = getCurrentInstance()  
+	// 定义绘图函数
+	function draw() {
+		const ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文
+		console.log(ctx,'12');
+		// 绘制外圆
+		ctx.beginPath() // 开始路径
+		ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
+		ctx.setFillStyle('rgba(100, 220, 0, 1)') // 设置填充颜色为黑色，无透明度
+		ctx.fill() // 填充所创建的路径
+		
+		// 绘制内圆以形成环形效果
+		ctx.beginPath() // 开始新的路径
+		ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
+		ctx.setFillStyle('white') // 设置填充颜色为白色
+		ctx.fill() // 填充以“清除”内部区域，形成环形
+		ctx.draw()
+	}
+
+	// 按钮点击事件处理函数
+	const handleDraw = () => {
+		uni.navigateTo({
+			url:'/pages/index/step2'
+		})
+		draw(); // 调用绘图函数
+	}
+
+	onMounted(() => {
+		draw()
+		// 确保在组件挂载后可以获取到Canvas元素
+	})
+</script>
+
+<style scoped>
+	button {
+		margin-top: 10px;
+	}
+</style>

unpackage/dist/dev/.sourcemap/mp-weixin/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\n","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n  ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n  const app = createSSRApp(App)\n  return {\n    app\n  }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;AACC,YAAO,IAAA,MAAA,MAAA;;"}
+{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\n","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n  ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n  const app = createSSRApp(App)\n  return {\n    app\n  }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;AACC,YAAO,IAAA,MAAA,MAAA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["pages/index/index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted ,getCurrentInstance } from 'vue'\n\n\tconst canvasWidth = ref(200)  // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\tconst instance = getCurrentInstance()  \n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw()\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"names":["ref","getCurrentInstance","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAC5B,UAAM,WAAWC,cAAAA,mBAAoB;AAErC,aAAS,OAAO;AACf,YAAM,MAAMC,cAAG,MAAC,oBAAoB,UAAS,QAAQ;AACrDA,oBAAA,MAAA,MAAA,OAAA,+BAAY,KAAI,IAAI;AAEpB,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;AACxBA,oBAAAA,MAAY,MAAA,OAAA,+BAAA,QAAQ;AACpB;AACAA,oBAAAA,MAAA,MAAA,OAAA,+BAAY,WAAW;AAAA,IACvB;AAEDC,kBAAAA,UAAU,MAAM;AAAA,IAEjB,CAAE;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["pages/index/index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted ,getCurrentInstance } from 'vue'\n\n\tconst canvasWidth = ref(200)  // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\tconst instance = getCurrentInstance()  \n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw()\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\n\t\tdraw(); // 调用绘图函数\n\t}\n\n\tonMounted(() => {\r\n\t\t// draw()\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"names":["ref","getCurrentInstance","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAC5B,UAAM,WAAWC,cAAAA,mBAAoB;AAErC,aAAS,OAAO;AACf,YAAM,MAAMC,cAAG,MAAC,oBAAoB,UAAS,QAAQ;AACrDA,oBAAA,MAAA,MAAA,OAAA,+BAAY,KAAI,IAAI;AAEpB,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;AAEDC,kBAAAA,UAAU,MAAM;AAAA,IAGjB,CAAE;;;;;;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index_step4.js","sources":["pages/index/index_step4.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXhfc3RlcDQudnVl"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">跳转step2</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted ,getCurrentInstance } from 'vue'\n\n\tconst canvasWidth = ref(200)  // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\tconst instance = getCurrentInstance()  \n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(100, 220, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw()\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tuni.navigateTo({\r\n\t\t\turl:'/pages/index/step2'\r\n\t\t})\n\t\tdraw(); // 调用绘图函数\n\t}\n\n\tonMounted(() => {\r\n\t\tdraw()\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index_step4.vue'\nwx.createPage(MiniProgramPage)"],"names":["ref","getCurrentInstance","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAC5B,UAAM,WAAWC,cAAAA,mBAAoB;AAErC,aAAS,OAAO;AACf,YAAM,MAAMC,cAAG,MAAC,oBAAoB,UAAS,QAAQ;AACrDA,oBAAA,MAAA,MAAA,OAAA,qCAAY,KAAI,IAAI;AAEpB,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,sBAAsB;AACvC,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;AACxBA,oBAAAA,MAAI,WAAW;AAAA,QACd,KAAI;AAAA,MACP,CAAG;AACD;IACA;AAEDC,kBAAAA,UAAU,MAAM;AACf,WAAM;AAAA,IAER,CAAE;;;;;;;;;;;AC5CF,GAAG,WAAW,eAAe;"}

unpackage/dist/dev/mp-weixin/app.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const common_vendor = require("./common/vendor.js");
 if (!Math) {
+  "./pages/index/index_step4.js";
   "./pages/index/step2.js";
   "./pages/index/index.js";
 }

unpackage/dist/dev/mp-weixin/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/index/index_step4",
     "pages/index/step2",
     "pages/index/index"
   ],

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

@@ -20,9 +20,7 @@ const _sfc_main = {
       ctx.draw();
     }
     const handleDraw = () => {
-      common_vendor.index.__f__("log", "at pages/index/index.vue:37", "111111");
       draw();
-      common_vendor.index.__f__("log", "at pages/index/index.vue:39", "222222222");
     };
     common_vendor.onMounted(() => {
     });

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

@@ -0,0 +1,42 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const _sfc_main = {
+  __name: "index_step4",
+  setup(__props) {
+    const canvasWidth = common_vendor.ref(200);
+    const canvasHeight = common_vendor.ref(200);
+    const instance = common_vendor.getCurrentInstance();
+    function draw() {
+      const ctx = common_vendor.index.createCanvasContext("canvas", instance);
+      common_vendor.index.__f__("log", "at pages/index/index_step4.vue:20", ctx, "12");
+      ctx.beginPath();
+      ctx.arc(100, 100, 80, 0, Math.PI * 2);
+      ctx.setFillStyle("rgba(100, 220, 0, 1)");
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(100, 100, 75, 0, Math.PI * 2);
+      ctx.setFillStyle("white");
+      ctx.fill();
+      ctx.draw();
+    }
+    const handleDraw = () => {
+      common_vendor.index.navigateTo({
+        url: "/pages/index/step2"
+      });
+      draw();
+    };
+    common_vendor.onMounted(() => {
+      draw();
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: canvasWidth.value,
+        b: canvasHeight.value,
+        c: common_vendor.o(handleDraw)
+      };
+    };
+  }
+};
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-7e4ca425"]]);
+wx.createPage(MiniProgramPage);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index_step4.js.map

unpackage/dist/dev/mp-weixin/pages/index/index_step4.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "step",
+  "usingComponents": {}
+}

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

@@ -0,0 +1 @@
+<view class="data-v-7e4ca425"><canvas class="data-v-7e4ca425" canvas-id="canvas" id="canvas" style="width:200px;height:200px;border:1px solid red" width="{{a}}" height="{{b}}"></canvas><button class="data-v-7e4ca425" bindtap="{{c}}">跳转step2</button></view>

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

@@ -0,0 +1,4 @@
+
+button.data-v-7e4ca425 {
+		margin-top: 10px;
+}