正文

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

Suo不倒  2022-02-11  377

关键词：

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

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

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

上线！

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

但是不影响用户使用

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

微信小程序海报uniapp(代码片段)

方案：依托微信官方wxml-to-canvas的一套生成方案wxml-to-canvas|微信开放文档详细项目配置信息毕竟我们是uni-app项目，所以跟原生小程序开发还是不一样。所以我们只看微信官网是不能正常实现生成canvas的。一、在uniapp项目... 查看详情

微信小程序支付完整流程（前端）(代码片段)

微信小程序中，常见付款给商家的场景，下面列出企业小程序中，从0起步完整微信支付流程。一，注册微信支付商户号（由上级或法人注册）接入微信支付-微信商户平台此商户号，需要由主管及... 查看详情

超级详细的微信小程序登录基于springboot(代码片段)

基于SpringBoot的微信小程序登录前后端完整详解文章目录基于SpringBoot的微信小程序登录前后端完整详解前言一、java后台用什么判断微信用户？二、微信小程序登录的具体流程1.官方流程图2.流程讲解以及代码实现1.wx.login获取co... 查看详情

微信小程序全栈开发课程课程目录（mpvue+koa2+mysql）

...你很快也会有自己的小程序~2、课程目录第一章1.1【微信小程序全栈课程】课程介绍（mpvue+koa2+mysql）1.2【微信小程序全栈课程】小程序介绍–真自律1.3【微信小程序全栈课程】小程序账号注册、开发工具下... 查看详情

微信小程序登陆流程

...址的APPID、SECRET、JSCODE，其他不变，组装成完整的地址。微信小程序获得session_key和openId（加解密、签名系列）微信小程序获得session_key和openId（加解密、签名系列）总结：从1,2,3步骤可知，只要获得appid，secret，js_code就可得到sess... 查看详情

微信小程序--分包加载流程(代码片段)

微信小程序--分包加载流程1.为什么要分包小程序要求压缩包体积不能大于2M，否则无法发布实际开发中小程序体积如果大于2M就需要使用分包机制进行发布上传分包后可解决2M限制，并且能分包加载内容，提高性能... 查看详情

微信小程序--分包加载流程(代码片段)

小程序微信小程序开发流程(代码片段)

...）登录流程时序流程图2）认识openid，unionid和code一、概述微信小程序是一种基于微信平台的应用程序，用户可以在微信中直接使用这些小程序，无需下载和安装，具有轻便、快速、实用等特点。微信小程序通常可以提供各种服务... 查看详情

微信小程序｜基于小程序实现人脸数量检测

...销活动等。二、具体流程及准备2.1、注册百度开放平台及微信公众平台账号。2.2、下载及安装微信Web开发者工具。2.3、如需通过SDK调用及需准查看详情

微信小程序之小红书旅行频道

有时候抓取微信小程序（腾讯强制所有的小程序都使用https协议）作为数据来源，会给我们带来极大的便利。本篇文章通过抓取小红书，来演示小程序抓取的流程。阅读流程效果演示项目地址抓包分析温馨提示总... 查看详情

微信小程序使用towxml解析html流程及踩坑记录

参考技术A towxml相对于wxParse还是有一定优势的，首先一些废弃或者过新的标签wxParse是不能解析的，会导致整个页面不能显示，其次towxml对于界面的排版优化是比较美观的，对于开发者还算比较友好，个人是建议... 查看详情

微信小程序中使用ec-canvas制作环状饼图

参考技术A根据这个流程，就可以制作出自己需要的环状饼图了，如果大家需要其他的图，也可以根据这个流程去做。查看详情

微信小程序可以下载

关于微信小程序可以下载相关资料如下怎样下载微信小程序？1.按照附近的小程序添加想要下载微信小程序的用户，需要先进入到微信中的“发现”页面，再点击页面下方的“小程序”选项，会进入到微信小程序的页面，在这里... 查看详情

如何提交发布微信小程序

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。那么，开发者该怎么进行申请呢？01微信小程序介绍：小程序是一种新的开放功能，开发者可以快速地... 查看详情

微信小程序完整项目实战(前端+后端)(代码片段)

基于微信小程序的在线商城点单系统前言：闲来无事，想以后自己开一个小超市或者小吃店，能够支持线上下单，既方便客户也方便自己。系统采用C#语言作为后端实现与小程序的交互，给用来学习或者想自己... 查看详情

微信小程序canvas绘制多行文本（文本换行）

参考技术A有什么问题尽管留言~由于我平时主要使用wepy开发项目所以这些常用封装及项目架子都是使用的wepy覆盖了一些常用操作与封装、登录流程、保存图片至相册及相关授权流程查看详情

一篇文章带你入门《微信小程序》建议收藏

文章目录一、了解微信小程序的概念二、了解微信小程序开发流程三、会注册微信小程序账号四、会安装微信开发者工具五、会简单使用微信开发者工具六、微信开发者工具的使用一、了解微信小程序的概念微信小程序(WechatMiniP... 查看详情

微信小程序搭建流程

一、申请微信开发者账号虽然开发微信小程序可以使用工具提供的测试号，但是测试号提供的功能极为有限，而且使用测试号开发的微信小程序不能上架发布。因此说我们想要开发一个可以上架的微信小程序，首先必... 查看详情