wxml-to-canvas 传参

wxml-to-canvas

app.js

const { wxml, style } = require("./wxml_canvas.js");
Page({
data: {
    wxml: {
      text: "",
      },
      src:null
  },
  onLoad() {
    this.widget = this.selectComponent(".widget");
    this.renderToCanvas();
  },
  renderToCanvas() {
    setTimeout(() => {
      const p1 = this.widget.renderToCanvas({
        wxml: wxml(this.data.wxml),
        style,
      });
      p1.then((res) => {
        console.log("container", res.layoutBox);
        this.container = res;
      });
    }, 2000);
  },
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath();
    p2.then((res) => {
      console.log(res);
      this.setData({
        src: res.tempFilePath,
        width: this.container.layoutBox.width,
        height: this.container.layoutBox.height,
      });
    });
  },
});

wxml_canvas.js

const wxml = (content) =>
  `
<view class="container" >
  <image class="container_bj" src="../../images/share/bj.png" alt="" />
  <view class="content_box">
    <text class="tip_content">` +
  getText(content.text) +
  `</text>
    </view>
  <view class="content_btm">
   <image class="content_btm_left" src="../../images/share/btn_bg.png" alt="" />
    <text class="save_tetx">长按保存图片</text>
   <image class="qr" src="../../images/about/log.png" alt="" />
   </view>
</view>
`;

//  自定义方法
function getText(str) {
	return str
}

const style = {
  container: {
    width: 300,
    height: 530,
    display: "flex",
    flexDirection: "column",
    position: "relative",
  },
};

module.exports = {
  wxml,
  style,
};