微信小程序wxml-to-canvas使用完整流程以及踩坑记录

Posted 2021-09-13 Suo不倒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序wxml-to-canvas使用完整流程以及踩坑记录相关的知识，希望对你有一定的参考价值。

第一次写文章记录自己的踩坑记录

我们小程序的客户说商品生成的海报有点模糊，因为之前都是后台生成的，没有办法设置清晰度参数，所以需要换一种生成方式，之前也看过wxml-to-canvas，但是一直没机会好好研究用上，这次机会来了，踩新坑的机会来了。

官方地址在此

1.根据官网提示安装

npm install --save wxml-to-canvas

一定要构建npm

2.引入组件

首先在你要用的页面json里引入
```
"usingComponents": {
  "wxml-to-canvas": "wxml-to-canvas"
  }
```
这里要注意的是，在引入的时候可能会报错，显示路径错误，原因是在miniprogram_npm文件夹下没找到相应的文件，但是在node包里是有的，然后我把官方demo里miniprogram_npm文件下的文件直接copy过来就可以用了。

在wxml文件里引入
```
<wxml-to-canvas class="widget" ></wxml-to-canvas>
```
这里要注意的点是，在外层不能用wx:if来包裹它，hidden也不行，css的display:none也不行，因为我们要做的是生成海报，所以canvas必须在页面上，但是不能显示出来，最后点击生成海报的时候直接导出图片，这时候可以用定位把canvas定位出页面就行了。

3. 对Js的封装引入

首先我是在一个名为util的js里封装了wxml以及style,以及wxml的动态传值方式

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>
   </view>
 </view>
 `
}

const style = {
 container: {
     width: 300,
     height: 456,
     backgroundColor: \'#fff\',
 },
 itemBox: {
     width: 300,
     height: 260,
     alignItems: \'center\',
 },
 itemBox2:{
     width: 300,
     height: 50,
     alignItems: \'center\',
     marginTop:20
 },
 itemBox3:{
     width: 300,
     height: 120,
     alignItems: \'center\'
 },
 img:{
     width:270,
     height:251,
     marginTop:15
 },
 img2:{
     width:100,
     height:100,
 },
 text: {
     width: 260,
     height: 40,
     textAlign: \'center\',
     fontSize:14,
     marginTop:5,
     lineHeight:\'1.1em\',
     scale:1
 }
}


module.exports = {
 wxml,style
}

2.在需要用的js里进行引入,路径改成你们自己的就可以用

const {
 wxml,
 style
} = require(\'../../../../utils/util.js\')

3.在onload写入

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
     var that = this;
     
     this.widget = this.selectComponent(\'.widget\');
     
     /**
     * 以下这种写法是我看其他博客有遇到这种情况，需要做延迟才能设置成功。
     * 因为当页面没有渲染出来的时候，是拿不到这个节点的
     * 如果有这种问题可以试一下
     * 时间自己定，能拿到就行
     */
     
     /**
      setTimeout(function(){
       that.widget = that.selectComponent(\'.widget\');
       },1000)
     */
     
 },

3.我们的需求是生成商品海报，里面是有小程序码的，所以我需要先请求接口给我二维码，然后我拿二维码和商品的信息去写到模板里

/**
*以下代码是写在我调小程序码接口的回调里
*/
const _wxml = wxml(参数1, 参数2,参数3)
               const p1 = that.widget.renderToCanvas({
                   wxml: _wxml,
                   style
               })
               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,
                       },function(){
                           wx.hideLoading();
                       })
                   }).catch(fail => {
                       wx.hideLoading();
                       wx.showToast({
                           icon: \'error\',
                           title: \'请稍后再试\',
                       })
                   })
               }).catch(fail => {
                   wx.hideLoading();
                   wx.showToast({
                       icon: \'error\',
                       title: \'请稍后再试\',
                   })
               })

4.调试

这时候功能基本上就开发好了，开发工具上生成的妥妥的，清晰度也比后台生成的清晰度多了，然后我去真机上瞅了一眼，得，报错了

fail canvas has not been created

在一顿操作下可以说是，找到原因了，但没完全找到，在onload里的设置并未生效，设置延迟也不管用，各种查资料，逛社区，愣是没遇到和我情况一样的。正在心态快蹦了的时候，突然想到体验版还没试过呢，抱着赌一把的心态，点击了上传。

哈哈哈哈，体验版没问题。

上线！

虽然还没找到具体是什么原因

但是不影响用户使用

第一次写文章，有点紧张，如有疏漏，欢迎补充。

以上是关于微信小程序wxml-to-canvas使用完整流程以及踩坑记录的主要内容，如果未能解决你的问题，请参考以下文章

超级详细的微信小程序登录基于SpringBoot