canvas生成图片

pages.json

@@ -6,6 +6,13 @@
 			{
 				"navigationBarTitleText" : ""
 			}
+		},
+		{
+			"path" : "pages/index/canvas",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	
 	],

pages/index/canvas.vue

@@ -0,0 +1,95 @@
+<template>
+  <view>
+    <canvas 
+      id="myCanvas" 
+      canvas-id="myCanvas" 
+      type="2d" 
+      style="width: 800px; height: 600px; border: 1px solid #eee;"
+    ></canvas>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    imgUrl: String
+  },
+  data() {
+    return {
+      canvasContext: null
+    };
+  },
+  watch: {
+    imgUrl: {
+      handler() {
+        this.drawImage();
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.initCanvas();
+  },
+  methods: {
+   initCanvas() {
+         const query = uni.createSelectorQuery().in(this);
+         query.select('#myCanvas')
+           .fields({ node: true, size: true })
+           .exec((res) => {
+             if (!res[0]) return;
+             
+             this.canvas = res[0].node;
+             this.ctx = res[0].node.getContext('2d');
+             this.canvasContext = this.ctx; // 保存上下文
+             
+             const dpr = uni.getSystemInfoSync().pixelRatio;
+             this.canvas.width = res[0].width * dpr;
+             this.canvas.height = res[0].height * dpr;
+             this.ctx.scale(dpr, dpr);
+             
+             // 如果已有图片URL，立即绘制
+             if (this.imgUrl) {
+               this.drawImage();
+             }
+           });
+       },
+    
+    async drawImage() {
+      if (!this.ctx || !this.imgUrl) return;
+      
+      try {
+        const image = await this.loadImage(this.imgUrl);
+        this.clearCanvas();
+        this.ctx.drawImage(image, 0, 0, 800, 600);
+      } catch (e) {
+        console.error("图片加载失败:", e);
+        this.clearCanvas();
+        this.ctx.fillStyle = '#f0f0f0';
+        this.ctx.fillRect(0, 0, 1000, 800);
+        this.ctx.fillStyle = '#999';
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'middle';
+        this.ctx.fillText('图片加载失败', 150, 100);
+      }
+    },
+    
+    clearCanvas() {
+			if (this.ctx) {
+				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+			}
+		},
+    loadImage(src) {
+			return new Promise((resolve, reject) => {
+				const image = this.canvas.createImage();
+				image.src = src;
+				
+				image.onload = () => resolve(image);
+				image.onerror = (err) => {
+					console.error('图片加载错误', err);
+					reject(err);
+				};
+			});
+		}
+  }
+}
+</script>

pages/index/index.vue

@@ -1,61 +1,26 @@
 <template>
 	<view>
-    <canvas 
+		<canvasChild :imgUrl="'https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg'"></canvasChild>
-      id="myCanvas" 
-      canvas-id="myCanvas" 
-      type="2d" 
-      style="width: 300px; height: 200px; border: 1px solid #eee;"
-    ></canvas>
 	</view>
 </template>
 
 <script>
-export default {
+	import canvasChild from './canvas'
-  onReady() {
+	export default {
-    this.drawImageOnCanvas();
+		components:{
+			canvasChild
+		},
+		data() {
+			return {
+				
+			}
 		},
 		methods: {
-    drawImageOnCanvas() {
-      // 获取Canvas节点
-      const query = uni.createSelectorQuery().in(this);
-      query.select('#myCanvas')
-        .fields({ node: true, size: true })
-        .exec(async (res) => {
-          if (!res[0]) return;
 			
-          const canvas = res[0].node;
-          const ctx = canvas.getContext('2d');
-          const dpr = uni.getSystemInfoSync().pixelRatio;
-          this.canvas = canvas
-          // 适配高清屏
-          canvas.width = res[0].width * dpr;
-          canvas.height = res[0].height * dpr;
-          ctx.scale(dpr, dpr);
-
-          // 加载图片
-          try {
-            const image = await this.loadImage('https://assets.tech.troyrc.com/sx25/images/background/odertupian.png');
-            ctx.drawImage(image, 0, 0, 300, 200);
-          } catch (e) {
-            console.error("图片加载失败:", e);
-            // 可选：绘制错误提示
-            ctx.fillStyle = '#f0f0f0';
-            ctx.fillRect(0, 0, 300, 200);
-            ctx.fillStyle = '#999';
-            ctx.textAlign = 'center';
-            ctx.fillText('图片加载失败', 150, 100);
-          }
-        });
-    },
-    
-    loadImage(src) {
-      return new Promise((resolve, reject) => {
-        const image = this.canvas.createImage();
-        image.onload = () => resolve(image);
-        image.onerror = reject;
-        image.src = src;
-      });
 		}
 	}
-}
 </script>
+
+<style>
+
+</style>

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

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["App.vue"],"sourcesContent":["<script>\n\texport default {\n\t\tonLaunch: function() {\n\t\t\tconsole.log('App Launch')\n\t\t},\n\t\tonShow: function() {\n\t\t\tconsole.log('App Show')\n\t\t},\n\t\tonHide: function() {\n\t\t\tconsole.log('App Hide')\n\t\t}\n\t}\n</script>\n\n<style>\n\t/*每个页面公共css */\n</style>\n"],"names":["uni"],"mappings":";;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,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;;;;;;;;;"}
+{"version":3,"file":"app.js","sources":["App.vue"],"sourcesContent":["<script>\n\texport default {\n\t\tonLaunch: function() {\n\t\t\tconsole.log('App Launch')\n\t\t},\n\t\tonShow: function() {\n\t\t\tconsole.log('App Show')\n\t\t},\n\t\tonHide: function() {\n\t\t\tconsole.log('App Hide')\n\t\t}\n\t}\n</script>\n\n<style>\n\t/*每个页面公共css */\n</style>\n"],"names":["uni"],"mappings":";;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,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;;;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sources":["pages/index/canvas.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/canvas.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;AACA,GAAG,WAAWA,OAAe,eAAA;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2.js","sources":["/Users/sunmeng/Desktop/wx/canvas/pages/index/canvas.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/canvas.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;AACA,GAAG,WAAWA,OAAe,eAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["pages/index/index.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,WAAW,eAAe;"}
+{"version":3,"file":"index.js","sources":["pages/index/index.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,WAAW,eAAe;"}

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

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

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

@@ -1,6 +1,7 @@
 {
   "pages": [
-    "pages/index/index"
+    "pages/index/index",
+    "pages/index/canvas"
   ],
   "window": {
     "navigationBarTextStyle": "black",

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

@@ -0,0 +1,82 @@
+"use strict";
+const common_vendor = require("./common/vendor.js");
+const _sfc_main = {
+  props: {
+    imgUrl: String
+  },
+  data() {
+    return {
+      canvasContext: null
+    };
+  },
+  watch: {
+    imgUrl: {
+      handler() {
+        this.drawImage();
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.initCanvas();
+  },
+  methods: {
+    initCanvas() {
+      const query = common_vendor.index.createSelectorQuery().in(this);
+      query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
+        if (!res[0])
+          return;
+        this.canvas = res[0].node;
+        this.ctx = res[0].node.getContext("2d");
+        this.canvasContext = this.ctx;
+        const dpr = common_vendor.index.getSystemInfoSync().pixelRatio;
+        this.canvas.width = res[0].width * dpr;
+        this.canvas.height = res[0].height * dpr;
+        this.ctx.scale(dpr, dpr);
+        if (this.imgUrl) {
+          this.drawImage();
+        }
+      });
+    },
+    async drawImage() {
+      if (!this.ctx || !this.imgUrl)
+        return;
+      try {
+        const image = await this.loadImage(this.imgUrl);
+        this.clearCanvas();
+        this.ctx.drawImage(image, 0, 0, 800, 600);
+      } catch (e) {
+        common_vendor.index.__f__("error", "at pages/index/canvas.vue:65", "图片加载失败:", e);
+        this.clearCanvas();
+        this.ctx.fillStyle = "#f0f0f0";
+        this.ctx.fillRect(0, 0, 1e3, 800);
+        this.ctx.fillStyle = "#999";
+        this.ctx.textAlign = "center";
+        this.ctx.textBaseline = "middle";
+        this.ctx.fillText("图片加载失败", 150, 100);
+      }
+    },
+    clearCanvas() {
+      if (this.ctx) {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      }
+    },
+    loadImage(src) {
+      return new Promise((resolve, reject) => {
+        const image = this.canvas.createImage();
+        image.src = src;
+        image.onload = () => resolve(image);
+        image.onerror = (err) => {
+          common_vendor.index.__f__("error", "at pages/index/canvas.vue:88", "图片加载错误", err);
+          reject(err);
+        };
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {};
+}
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.MiniProgramPage = MiniProgramPage;
+//# sourceMappingURL=../.sourcemap/mp-weixin/canvas.js.map

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

@@ -1252,6 +1252,9 @@ function isReadonly(value) {
 function isShallow(value) {
   return !!(value && value["__v_isShallow"]);
 }
+function isProxy(value) {
+  return isReactive(value) || isReadonly(value);
+}
 function toRaw(observed) {
   const raw = observed && observed["__v_raw"];
   return raw ? toRaw(raw) : observed;
@@ -2043,6 +2046,47 @@ function setCurrentRenderingInstance(instance) {
   instance && instance.type.__scopeId || null;
   return prev;
 }
+const COMPONENTS = "components";
+function resolveComponent(name, maybeSelfReference) {
+  return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
+}
+function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
+  const instance = currentRenderingInstance || currentInstance;
+  if (instance) {
+    const Component2 = instance.type;
+    if (type === COMPONENTS) {
+      const selfName = getComponentName(
+        Component2,
+        false
+      );
+      if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
+        return Component2;
+      }
+    }
+    const res = (
+      // local registration
+      // check instance[type] first which is resolved for options API
+      resolve(instance[type] || Component2[type], name) || // global registration
+      resolve(instance.appContext[type], name)
+    );
+    if (!res && maybeSelfReference) {
+      return Component2;
+    }
+    if (warnMissing && !res) {
+      const extra = type === COMPONENTS ? `
+If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``;
+      warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
+    }
+    return res;
+  } else {
+    warn$1(
+      `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().`
+    );
+  }
+}
+function resolve(registry, name) {
+  return registry && (registry[name] || registry[camelize(name)] || registry[capitalize(camelize(name))]);
+}
 const INITIAL_WATCHER_VALUE = {};
 function watch(source, cb, options) {
   if (!isFunction(cb)) {
@@ -3653,6 +3697,12 @@ const Static = Symbol.for("v-stc");
 function isVNode(value) {
   return value ? value.__v_isVNode === true : false;
 }
+const InternalObjectKey = `__vInternal`;
+function guardReactiveProps(props) {
+  if (!props)
+    return null;
+  return isProxy(props) || InternalObjectKey in props ? extend({}, props) : props;
+}
 const emptyAppContext = createAppContext();
 let uid = 0;
 function createComponentInstance(vnode, parent, suspense) {
@@ -4891,6 +4941,11 @@ function initApp(app) {
   }
 }
 const propsCaches = /* @__PURE__ */ Object.create(null);
+function renderProps(props) {
+  const { uid: uid2, __counter } = getCurrentInstance();
+  const propsId = (propsCaches[uid2] || (propsCaches[uid2] = [])).push(guardReactiveProps(props)) - 1;
+  return uid2 + "," + propsId + "," + __counter;
+}
 function pruneComponentPropsCache(uid2) {
   delete propsCaches[uid2];
 }
@@ -4931,6 +4986,7 @@ function getCreateApp() {
     return my[method];
   }
 }
+const p = (props) => renderProps(props);
 function createApp$1(rootComponent, rootProps = null) {
   rootComponent && (rootComponent.mpType = "app");
   return createVueApp(rootComponent, rootProps).use(plugin);
@@ -5251,8 +5307,8 @@ function promisify$1(name, fn) {
     if (hasCallback(args)) {
       return wrapperReturnValue(name, invokeApi(name, fn, args, rest));
     }
-    return wrapperReturnValue(name, handlePromise(new Promise((resolve, reject) => {
+    return wrapperReturnValue(name, handlePromise(new Promise((resolve2, reject) => {
-      invokeApi(name, fn, extend(args, { success: resolve, fail: reject }), rest);
+      invokeApi(name, fn, extend(args, { success: resolve2, fail: reject }), rest);
     })));
   };
 }
@@ -5567,7 +5623,7 @@ function invokeGetPushCidCallbacks(cid2, errMsg) {
   getPushCidCallbacks.length = 0;
 }
 const API_GET_PUSH_CLIENT_ID = "getPushClientId";
-const getPushClientId = defineAsyncApi(API_GET_PUSH_CLIENT_ID, (_, { resolve, reject }) => {
+const getPushClientId = defineAsyncApi(API_GET_PUSH_CLIENT_ID, (_, { resolve: resolve2, reject }) => {
   Promise.resolve().then(() => {
     if (typeof enabled === "undefined") {
       enabled = false;
@@ -5576,7 +5632,7 @@ const getPushClientId = defineAsyncApi(API_GET_PUSH_CLIENT_ID, (_, { resolve, re
     }
     getPushCidCallbacks.push((cid2, errMsg) => {
       if (cid2) {
-        resolve({ cid: cid2 });
+        resolve2({ cid: cid2 });
       } else {
         reject(errMsg);
       }
@@ -5645,9 +5701,9 @@ function promisify(name, api) {
     if (isFunction(options.success) || isFunction(options.fail) || isFunction(options.complete)) {
       return wrapperReturnValue(name, invokeApi(name, api, options, rest));
     }
-    return wrapperReturnValue(name, handlePromise(new Promise((resolve, reject) => {
+    return wrapperReturnValue(name, handlePromise(new Promise((resolve2, reject) => {
       invokeApi(name, api, extend({}, options, {
-        success: resolve,
+        success: resolve2,
         fail: reject
       }), rest);
     })));
@@ -6236,13 +6292,13 @@ function initRuntimeSocket(hosts, port, id) {
 }
 const SOCKET_TIMEOUT = 500;
 function tryConnectSocket(host2, port, id) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve2, reject) => {
     const socket = index.connectSocket({
       url: `ws://${host2}:${port}/${id}`,
       multiple: true,
       // 支付宝小程序 是否开启多实例
       fail() {
-        resolve(null);
+        resolve2(null);
       }
     });
     const timer = setTimeout(() => {
@@ -6250,19 +6306,19 @@ function tryConnectSocket(host2, port, id) {
         code: 1006,
         reason: "connect timeout"
       });
-      resolve(null);
+      resolve2(null);
     }, SOCKET_TIMEOUT);
     socket.onOpen((e) => {
       clearTimeout(timer);
-      resolve(socket);
+      resolve2(socket);
     });
     socket.onClose((e) => {
       clearTimeout(timer);
-      resolve(null);
+      resolve2(null);
     });
     socket.onError((e) => {
       clearTimeout(timer);
-      resolve(null);
+      resolve2(null);
     });
   });
 }
@@ -6694,7 +6750,7 @@ function initOnError() {
 function initRuntimeSocketService() {
   const hosts = "127.0.0.1,172.10.0.205";
   const port = "8090";
-  const id = "mp-weixin_UOOu72";
+  const id = "mp-weixin_S3vPwR";
   const lazy = typeof swan !== "undefined";
   let restoreError = lazy ? () => {
   } : initOnError();
@@ -7636,4 +7692,6 @@ const createSubpackageApp = initCreateSubpackageApp();
 exports._export_sfc = _export_sfc;
 exports.createSSRApp = createSSRApp;
 exports.index = index;
+exports.p = p;
+exports.resolveComponent = resolveComponent;
 //# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+const canvas = require("../../canvas.js");
+wx.createPage(canvas.MiniProgramPage);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/canvas.js.map

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

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

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

@@ -0,0 +1 @@
+<view><canvas id="myCanvas" canvas-id="myCanvas" type="2d" style="width:800px;height:600px;border:1px solid #eee"></canvas></view>

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

@@ -0,0 +1,4 @@
+"use strict";
+const canvas = require("../../canvas.js");
+wx.createPage(canvas.MiniProgramPage);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/canvas2.js.map

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

@@ -1,47 +1,25 @@
 "use strict";
 const common_vendor = require("../../common/vendor.js");
+const canvasChild = () => "./canvas2.js";
 const _sfc_main = {
-  onReady() {
+  components: {
-    this.drawImageOnCanvas();
+    canvasChild
   },
-  methods: {
+  data() {
-    drawImageOnCanvas() {
-      const query = common_vendor.index.createSelectorQuery().in(this);
-      query.select("#myCanvas").fields({ node: true, size: true }).exec(async (res) => {
-        if (!res[0])
-          return;
-        const canvas = res[0].node;
-        const ctx = canvas.getContext("2d");
-        const dpr = common_vendor.index.getSystemInfoSync().pixelRatio;
-        this.canvas = canvas;
-        canvas.width = res[0].width * dpr;
-        canvas.height = res[0].height * dpr;
-        ctx.scale(dpr, dpr);
-        try {
-          const image = await this.loadImage("https://assets.tech.troyrc.com/sx25/images/background/odertupian.png");
-          ctx.drawImage(image, 0, 0, 300, 200);
-        } catch (e) {
-          common_vendor.index.__f__("error", "at pages/index/index.vue:40", "图片加载失败:", e);
-          ctx.fillStyle = "#f0f0f0";
-          ctx.fillRect(0, 0, 300, 200);
-          ctx.fillStyle = "#999";
-          ctx.textAlign = "center";
-          ctx.fillText("图片加载失败", 150, 100);
-        }
-      });
-    },
-    loadImage(src) {
-      return new Promise((resolve, reject) => {
-        const image = this.canvas.createImage();
-        image.onload = () => resolve(image);
-        image.onerror = reject;
-        image.src = src;
-      });
-    }
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     return {};
+  },
+  methods: {}
+};
+if (!Array) {
+  const _component_canvasChild = common_vendor.resolveComponent("canvasChild");
+  _component_canvasChild();
+}
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.p({
+      imgUrl: "https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg"
+    })
+  };
 }
 const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
 wx.createPage(MiniProgramPage);

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

@@ -1,4 +1,6 @@
 {
   "navigationBarTitleText": "",
-  "usingComponents": {}
+  "usingComponents": {
+    "canvas-child": "./canvas"
+  }
 }

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

@@ -1 +1 @@
-<view><canvas id="myCanvas" canvas-id="myCanvas" type="2d" style="width:300px;height:200px;border:1px solid #eee"></canvas></view>
+<view><canvas-child wx:if="{{a}}" u-i="42112c14-0" bind:__l="__l" u-p="{{a}}"></canvas-child></view>