更新记录

1.0.0（2020-03-24） 下载此版本

小程序插件，方便生成海报

平台兼容性

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

uniapp小程序海报生成插件-painter

小程序海报生成插件-painter

海报生成工具

• 快速制作生成海报，直接导出代码，再也不用拼命去兼容，无助的调试了
• 如果想要将导出的json,再导入查看效果，需要重新格式化压缩下json。

  快捷键：

• ‘←’ 左移一像素
• ‘→’ 右移一像素
• ‘↑’ 上移一像素
• ‘↓’ 下移一像素
• ‘ctrl + z’ 撤销
• ‘ctrl + y’ 恢复
• ‘delete’ 删除
• ‘[’ 提高元素的层级
• ‘]’ 降低元素的层级

uniapp中使用方法

• 通过上面的海报生成工具导出的json代码，先保存起来

• 先去github插件文档 https://github.com/Kujiale-Mobile/Painter

• 将目录下components/painter 文件下载下来

• 在本地项目新建wxcomponents文件夹 将下载的painter文件夹复制进来

• 在本地项目pages.json中 globalStyle 属性下加入引入路径

  "globalStyle": {
  "usingComponents":{
      "painter":"/wxcomponents/painter/painter"
  }
  }

• 在需要的地方引入,传入参数组件初始化自动生成 canvas图片

<painter
    @imgOK="onImgOk"
    @imgErr="onImgErr"
    widthPixels="750"
    :customStyle="customStyle"
    :palette="template"
/>

• palette => template 传入的json代码
• onImgOk 海报生成成功的回调函数, e.detail.path 获取 生成的图片
• onImgErr 海报生成失败的回调函数
• widthPixels 强制指定生成的图片的像素宽度，否则，根据你画布中设置的大小来动态调节，此属性可以提高图片分辨率。
• customStyle 设置生成的canvas图片样式

在 onImgOk 中成功生成的图片地址,才是应该展示的图片，canvas图片可通过 设置样式隐藏起来

card.js

• 在适合的地方创建card.js，将上面工具生成的json代码复制进去
• 引入 import Card from '所在目录/card'
• this.template = new Card(cardInfo) 赋值 cardInfo 自定义传入参数，可在card.js中，处理生成的json对象

关于动态生成小程序码，需要后端支持,通过 wx.downloadFile 下载下来，再加入参数生成海报