在uniapp中使用 wxml-to-canvas

发表于 阅读次数：

用 uniapp 开发微信小程序，使用微信原生组件 wxml-to-canvas 将页面生成图片

wxml-to-canvas 微信官方文档

第一步 npm 安装 wxml-to-canvas

1
npm install --save wxml-to-canvas

第二步 在项目根目录新建文件夹 wxcomponents

这是 uniapp 要求的，请看这里：小程序自定义组件支持

在该文件夹中新建两个文件夹：

  • wxml-to-canvas
  • widget-ui

第三步 查看 node_modules 文件夹

找到 wxml-to-canvas 和 widget-ui 文件夹

复制 wxml-to-canvas > miniprogram_dist 中的文件到 wxcomponents > wxml-to-canvas 中

复制 widget-ui > dist 中的文件到 wxcomponents > widget-ui 中

第四步 修改 /wxcomponents/wxml-to-canvas/index.js 中的如下内容

1
2
3
module.exports = require("widget-ui");
//改为
module.exports = require("../widget-ui/index.js")

第五步 配置 pages.json

在需要用的页面 或者 全局配置 usingComponents：

1
2
3
4
5
6
7
8
9
10
"pages": [
    {
        "path": "pages/xxx",
        "style": {
            "usingComponents": {
            　　"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
            }
        }
    },
]

使用 请看官方文档中的代码片段

wxml-to-canvas 微信官方文档

亲测有效，可扫码博客最底部的小程序二维码 「随机算数」 模块体验。