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

1.下载wxml-to-canvas包

2.使用

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

js 复制代码

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

index.js

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

js 复制代码

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

index.wxml

js 复制代码

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

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

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
 }

完事...

小程序生成海报wxml-to-canvas

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

1.下载wxml-to-canvas包

2.使用