保姆级·拿来即用·海报生成

1.下载wxml-to-canvas包

官方介绍地址

2.使用

下载包之后（在官方代码片段里粘出来miniprogram_npm文件夹也行） 新建我们的文件夹吧 app.json中page数组 其中下方的保存被我return了想用就放开吧 还有图片资源替换为自己的服务器图片否则会出现跨域哈

{
"pages": [
    "index/index"
  ],
  ...
}
  

index.js

const {
  wxml,style
 } = require('../utils/util')
Page({
  renderToCanvas() {
   
},

  /**
   * 页面的初始数据
   */
  data: {
    src:'',
    width:0,
    height:0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var that = this;
  this.widget = this.selectComponent('.widget');
  this.setData()
 },
 setData(){
   console.log(1111);
   var that = this
   /**
*以下代码是写在我调小程序码接口的回调里
*/
const _wxml = wxml('xxxxxxx',"http://aaa.jpg"
,"http://aaa.jpg"
)
setTimeout(async() => {
  const resP1 = await that.widget.renderToCanvas({
    wxml: _wxml,
    style
})
console.log(resP1);
const resP2 = await that.widget.canvasToTempFilePath()
console.log(resP2);
const resSave = await wx.saveImageToPhotosAlbum({
  filePath: resP2.tempFilePath,
})
console.log(resSave);
return

that.setData({
  src: resP2.tempFilePath,
  width: resP1.layoutBox.width,
  height: resP1.layoutBox.height,
})
console.log(this.data.src);
console.log(this.data.width);
console.log(this.data.height);
p1.then((res) => {
    that.container = res;
    const p2 = that.widget.canvasToTempFilePath()
    p2.then(res => {
        that.setData({
            src: res.tempFilePath,
            width: that.container.layoutBox.width,
            height: that.container.layoutBox.height,
        })
    }).catch(fail => {
        wx.hideLoading();
        wx.showToast({
            icon: 'error',
            title: '请稍后再试',
        })
    })
}).catch(fail => {
    wx.showToast({
        icon: 'error',
        title: '请稍后再试',
    })
})
  
}, 500);
 },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

index.json

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

index.wxml

<wxml-to-canvas class="widget" height="996" width="500"></wxml-to-canvas>

我是新建的/utils/utils.js文件夹大家自己看着办记得替换index.js中的引入

const wxml = (name,share_img,qrcode_img)=>{
  return `
  <view class="container" >
    <view class="item-box">
    <image class="img" src='`+share_img+`'></image>
    </view>
    <view class="item-box2" >
      <text class="text">`+name+`</text>
    </view>
    <view class="item-box3">
    <image class="img2" src='`+qrcode_img+`'></image>
    <text class="text2">长按识别小程序码，即可了解</text>
    </view>
  </view>
  `
 }
 
 const style = {
  container: {
      width: 310,
      height: 456,
      alignItems: 'center',
      backgroundColor: '#fff',
  },
  itemBox: {
      width: 300,
      height: 260,
      alignItems: 'center',
  },
  itemBox2:{
      width: 300,
      height: 50,
      alignItems: 'center',
      marginTop:10
  },
  itemBox3:{
      width: 300,
      height: 100,
      flexDirection:'row',
      alignItems: 'center',
  },
  img2:{
    width:100,
    height:100,
    marginLeft:5,
    marginRight:20,
},
  text2: {
    color:'#9e9e9e',
    width: 160,
    height: 12,
    lineHeight: '1.1em',
    textAlign: 'left',
    verticalAlign:'middle',
    fontSize:12,
    scale:1
},
  img:{
      width:290,
      height:251,
      marginTop:15,
      borderRadius:10
  },

  text: {
      width: 300,
      height: 40,
      textAlign: 'left',
      fontSize:14,
      marginTop:5,
      fontWeight:700,
      lineHeight:'1.3em',
      scale:1
  }
 }
 
 
 module.exports = {
  wxml,style
 }

完事...