效果
1.文件目录
引入的painter文件地址
2.引入的posterView.js
const getPoster = (qrcodeText) => { const poster = { "width": "256px", "height": "256px", "background": "#f8f8f8", "views": [{ "type": "qrcode", "content": qrcodeText, "css": { "color": "#000000", "background": "#ffffff", "width": "256px", "height": "256px", "top": "0px", "left": "0px", "rotate": "0", "borderRadius": "0px" } }] } return poster } module.exports = { getPoster: getPoster }
3.引入的palette.js
export default class LastMayday { palette(viewList) { return ( viewList ); } }
4.页面代码
ercode.wxml
<view> <image class="qrcode_img" src="{{imgUrl}}" mode="widthFix"></image> <button type="primary" bindtap="makeQRCodeTap">生成二维码</button> </view> <!-- canvas隐藏 --> <painter customStyle='position: absolute; left: -9999rpx;' customActionStyle="{{customActionStyle}}" dancePalette="{{template}}" palette="{{paintPallette}}" bind:imgOK="onImgOK" bind:touchEnd="touchEnd" action="{{action}}" use2D="{{true}}" widthPixels="720" /> <!-- canvas隐藏 -->
ercode.json
{ "usingComponents": { "painter": "../../utils/painter/painter" } }
ercode.js
import poster from '../../utils/posterViewjs/palette' const posterView = require("../../utils/posterViewjs/posterView") data: { imgUrl: null, QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",//二维码参数 paintPallette: '', }, /** 生成海报点击监听 */ makeQRCodeTap() { wx.showLoading({ title: '获取海报中', mask: true }) this.makePoster(this.data.QRCodeText) }, /** 绘制完成后的回调函数*/ onImgOK(res) { wx.hideLoading() this.setData({ imgUrl: res.detail.path }) }, makePoster(qrcodeText) { wx.showLoading({ title: '生成海报中', }) // 绘制海报所用到JSON数据 let viewList = posterView.getPoster(qrcodeText) this.setData({ paintPallette: new poster().palette(viewList) }) },
ercode.wxss
.box { width: 100%; text-align: center; } .qrcode_img { background-color: #999999; height: 300rpx; width: 300rpx; }