评论

wxml-to-canvas使用笔记

wxml-to-canvas使用笔记。小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图,生成小程序分享海报等场景。

wxml-to-canvas使用笔记。小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图,生成小程序分享海报等场景。

在已经创建好的项目中进行安装 wxml-to-canvas

1.详情-本地设置-使用npm;

2,在工具中的终端或者是电脑终端。新建终端命令

3,初始化npm 输入 npm init

大概需要点击8次回车。才能初始化完成。最后会出现OK,再回车一次

4,安装wxml-to-canvas插件

wxml-to-canvas插件介绍地址:https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html

5,构建npm

6,生成海报

海报的样式,支持 view、text、image 三种标签。按文档的要求进行拼装。文字和图片定位,我个人用position属性来定位的。

完!


最后一次编辑于  2021-07-26  
点赞 2
收藏
评论

5 个评论

  • 一路
    一路
    2022-05-10

    官网给的代码片段,我在真机上测试也是报同样的错的。有大佬可以帮忙解答一下吗?

    2022-05-10
    赞同
    回复
  • 一路
    一路
    2022-05-10

    为什么我的在开发工具中显示正常,到真机测试和体验版直接就报错了

    2022-05-10
    赞同
    回复
  • 老谢
    老谢
    2022-03-27

    怎么安装上去啊,大哥


    2022-03-27
    赞同
    回复
  • 老谢
    老谢
    2022-03-27

    我从第一步开始就有问题了。。。详情-本地配置 里面根本没有“使用NPM模块”的选项,麻烦大哥告诉我怎么做

    2022-03-27
    赞同
    回复
  • 仲夏
    仲夏
    2021-08-17

    大佬,为啥我这个绘制的时候会显示不完全

    2021-08-17
    赞同
    回复 2
    • 芒果
      芒果
      2022-03-04
      给组件加上宽高就行了,<wxml-to-canvas class="widget" width="380" height="500">这样,亲测有用
      2022-03-04
      回复
    • 呀嘿
      呀嘿
      2022-04-17回复芒果
      请问,wxml-to-canvas的宽高不确定,需要根据调用手机的尺寸来设置呢?就是初始值设置为空,然后onload时setdata,动态设置呢?我这样设置成功了,但是在画图时,他不使用setdata后的值,却使用初始值,请问有解决方案没有
      2022-04-17
      回复
登录 后发表内容