官方文檔：https://github.com/wechat-miniprogram/wxml-to-canvas

1. npm install wxml-to-canvas (下載完后重新構(gòu)建npm)
2. 新建組件-share.js
   因為我們涉及到動態(tài)參數(shù)，所以使用了傳參

const wxml = (img, name, organiseid, codeImg)=>{
  return `
      <view class="container">
        <view class="box1">
          <image class="img" src='`+img+`'></image>
        </view>
        <view class="namebox">
          <text class="nametext">`+name+`</text>
        </view>
        <view class="organizebox">
          <text class="organizetext">發(fā)起方：`+organiseid+`</text>
        </view>
        <view class="code">
          <image class="codeimg" src='`+codeImg+`'></image>
        </view>
        <view class="activity">
          <text class="activitytext">掃碼參加活動</text>
        </view>
        <view class="textboxtwo">
          <text class="text">長按識別二維碼</text>
        </view>
      </view>
    `
} 

3. 寫樣式，考慮到不同手機的適配問題

let unit = ''
wx.getSystemInfo({
  success: function (res) {
    unit=res.windowWidth/375
  },
})

有些寬高需要動態(tài)值，所以也用了傳參

const style = (nameHeight) => {
  return {
    container: {
      position:'relative',
      width: 315*unit,
      height: 440*unit,
      backgroundColor: '#fff',
      flexDirection: 'column',
      alignItems:'center',
      borderRadius: 8*unit
    },
    box1: {
      width: 283*unit,
      height: 159*unit,
      marginTop: 20*unit
    },
    img: {
      width: 283*unit,
      height: 159*unit,
      borderRadius: 4*unit
    },
    namebox: {
      width: 283*unit,
      height: nameHeight*unit,
      marginTop: 9*unit
    },
    nametext: {
      width: 283*unit,
      height: nameHeight*unit,
      fontSize: 16*unit,
      color: '#000'
    },
    organizebox: {
      width: 283*unit,
      height: 16*unit,
      marginTop: 8*unit
    },
    organizetext: {
      width: 283*unit,
      height: 16*unit,
      fontSize: 11,
      color: '#8C9098',
      verticalAlign: 'middle'
    },
    code: {
      width: 80*unit,
      height: 80*unit,
      marginTop: 24*unit
    },
    codeimg: {
      width: 80*unit,
      height: 80*unit
    },
    activity: {
      width: 86*unit,
      height: 20*unit,
      marginTop: 8*unit
    },
    activitytext: {
      width: 86*unit,
      height: 20*unit,
      fontSize: 14,
      color: '#333333',
      verticalAlign: 'middle'
    },
    textboxtwo: {
      width: 78*unit,
      height: 16*unit,
      marginTop: 4*unit
    },
    text: {
      width: 78*unit,
      height: 16*unit,
      fontSize: 11,
      color: '#646464',
      verticalAlign: 'middle'
    }
  }
}

4. 把定義的元素和樣式拋出去

module.exports = {
  wxml,
  style
}

5.在需要展示海報的地方引入
因為插件里的canvas有一個自己的寬高，所以我們需要把海報的寬高計算好傳入

<wxml-to-canvas class="widget" width="{{315*unit}}" height="{{440*unit}}"></wxml-to-canvas>

6.在js頁面引入

const { wxml, style } = require('./share.js')
onLoad() {
    this.widget = this.selectComponent('.widget')
    setTimeout(()=>{
          this.renderToCanvas()
        },150)
  },
renderToCanvas() {
    // 海報上動態(tài)展示的數(shù)據(jù)
    let name = app.globalData.userInfo.certification ? app.globalData.userInfo.certification.name : app.globalData.userInfo.name
    const _wxml = wxml(giftData, name, icon, code)
    // 動態(tài)樣式
    let wordwidth = word*12+24
    let wordleft = Math.floor((315-wordwidth)/2)
    let numWidth = num*22
    const _style = style(wordwidth, wordleft,numWidth)
    const p1 = this.widget.renderToCanvas({ 
      wxml: _wxml, 
      style: _style 
    })
    wx.showLoading({
      title: '生成中',
    })
    p1.then((res) => {
      this.container = res
    }).finally(() => {
      wx.hideLoading();
    })
  },