微信小程序wxml-to-canvas 的使用以及遇到的坑

叁歲伎倆 2023-02-22 12:27 544阅读 0赞

## 1.首先根据官网提示安装即可 ##

npm install --save wxml-to-canvas

## 2.构建NPM ##

这一步很关键，在微信开发者工具左上角-》工具-》npm构建。  
PS：我第一次用的时候就忘了我构建了

## 3.引入组件 ##

<wxml-to-canvas class="widget"></wxml-to-canvas>
      // class="widget"  这里不能删。

## 4.获取实例 ##

ready(){    //组件中使用这个周期   页面中使用 onLoad(){}
        this.widget = this.selectComponent('.widget')
        setTimeout(() => {
          const p1 = this.widget.renderToCanvas({
            wxml,
            style
          })
          p1.then((res) => {
            console.log('container', res.layoutBox)
            this.container = res
          })
        }, 500)
      }
    //刚进入页面 的时候renderToCanvas()并没有被创建。所以我使用了一个定时器

## 5.wxml 模板 ##

支持 view、text、image 三种标签，通过 class 匹配 style 对象中的样式。  
**注意：需为每个元素指定 width 和 height 属性，否则会导致布局错误。**  
元素均为 flex 布局。left/top 等 仅在 absolute 定位下生效。

## 坑1：宽高被限制，里面的内容无法显示完全。 ##

组件默认是由固定的宽高的
    <wxml-to-canvas class="widget"></wxml-to-canvas>
    需要在组件中给定宽高，比如我项目中就给定了高
    <wxml-to-canvas class="widget" height="420"></wxml-to-canvas>

## 坑2：背景图引入无效 ##

1.首先下载引入官方demo，然后在node\_modules/wxml-to-canvas/miniprogram\_dist/index.js 里边，找到并复制如下代码：

async drawImage(img, box, style) {
        await new Promise((resolve, reject) => {
          const ctx = this.ctx
          const canvas = this.canvas
          const {
            borderRadius = 0
          } = style
          const {
            left: x, top: y, width: w, height: h
          } = box
          ctx.save()
          this.roundRect(x, y, w, h, borderRadius, false, false)
          ctx.clip()
          const Image = canvas.createImage()
          Image.onload = () => {
            ctx.drawImage(Image, x, y, w, h)
            ctx.restore()
            resolve()
          }
          Image.onerror = () => { reject() }
          Image.src = img
        })
      }

复制后找到 自己项目所对应的node\_modules/wxml-to-canvas/miniprogram\_dist/index.js中，粘贴（覆盖）原来所对应的代码即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200703165628367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200703165628345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz,size_16,color_FFFFFF,t_70