微信小程序wxml-to-canvas 的使用

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

npm install --save wxml-to-canvas

2. json 中引入组件

    "usingComponents": {
            "wxml-to-canvas": "wxml-to-canvas"
        }

3. wxml 中

4. js 中 onload 中

引入

this.widget = this.selectComponent('.widget')

保存图片

      const { wxmlFun, style } = require('./wxmlView.js')
      console.log(res.tempFilePath)
      this.data.userInfo.src = res.tempFilePath
      this.data.userInfo.company = this.data.company
      const wxml = wxmlFun(this.data.userInfo)
      console.log(wxml)
      const p1 = this.widget.renderToCanvas({ wxml, style })
      p1.then((res) => {
        console.log('container', res.layoutBox)
        this.container = res
        return this.widget.canvasToTempFilePath()
      }).then(res => {
        console.log('canvasToTempFilePath', res)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath, //canvasToTempFilePath返回的tempFilePath
          success: (res) => {
            console.log(res)
          },
          fail: (err) => {
            util.showErrorToast(err)
          }
        })
      })

5. wxmlView.js

const wxmlFun = userInfo => {
  console.log(userInfo, '=========wxmlFun=========')
  return `
  <view class="flex_line container font-color-primary">
    <view class="top-left flex pb50">
      <image src="${userInfo.headerImageUrl}" class="head flex_none" mode="aspectFit"></image>
      <view class="flex_tb title">
        <view class="item"><text class="f30 b">${userInfo.name}</text></view>
        <view class="item"><text class="f26 font-color-tertiary">${userInfo.title} | ${userInfo.departmentName}</text></view>
        <view class="item"><text class="f26 font-color-tertiary">${userInfo.hospitalName}</text></view>
      </view>
    </view>
    <image src="${userInfo.src}" class="code"></image>
    <view class="item"></view>
    <view class="flex_line_m">
        <view class="item tc">
            <text class="f26 font-color-primary">扫一扫二维码</text>
        </view>
        <view class="item tc">
            <text class="f26 font-color-primary">在「${userInfo.company}」和我联系</text>
        </view>
    </view>
  </view>
`
}

const style = {
  container: {
    width: 300,
    height: 340,
    backgroundColor: '#ffffff',
    padding: 20
  },
  flexLine: {
    flexDirection: 'column'
  },
  topLeft: {
    width: 300,
    height: 80
  },
  flex: {
    display: 'flex',
    flexDirection: 'row'
  },
  pb50: {
    paddingBottom: 50
  },
  head: {
    width: 60,
    height: 60,
    borderRadius: 8,
    marginRight: 12
  },
  flexNone: {
    flex: 'none'
  },
  flexTb: {
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
  title: {
    width: 200,
    height: 60
  },
  f30: {
    fontSize: 15
  },
  b: {
    fontWeight: 'bold'
  },
  f26: {
    fontSize: 13
  },
  f28: {
    fontSize: 14
  },
  fontColorRertiary: {
    color: '#999999'
  },
  fontColorPrimary: {
    color: '#333333'
  },
  code: {
    width: 156,
    height: 156,
    alignSelf: 'center',
    paddingBottom: 20
  },
  item: {
    width: 260,
    height: 20
  },
  flexLineM: {
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column'
  },
  tc: {
    textAlign: 'center'
  }
}
module.exports = {
  wxmlFun,
  style
}

6. 注意
   文字必须写在text 标签
   需为每个元素指定 width 和 height 属性
   元素均为 flex 布局。left/top 等 仅在 absolute 定位下生效。
   支持 view、text、image 三种标签，通过 class 匹配 style 对象中的样式。