首页专栏 javascript 文章详情

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

Suo不倒 发布于 5 月 18 日

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

我们小程序的客户说商品生成的海报有点模糊，因为之前都是后台生成的，没有办法设置清晰度参数，所以需要换一种生成方式，之前也看过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里的设置并未生效，设置延迟也不管用，各种查资料，逛社区，愣是没遇到和我情况一样的。正在心态快蹦了的时候，突然想到体验版还没试过呢，抱着赌一把的心态，点击了上传。

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

上线！

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

但是不影响用户使用

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

javascript 小程序

阅读 19 更新于 5 月 18 日

赞收藏

本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

Suo不倒

愿我永远善良。

1 声望

0 粉丝

关注作者

0 条评论

得票数最新

提交评论