前端生成小程序二维码

效果

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;
}

标签：qrcodeText,palette,..,viewList,前端,getPoster,生成,二维码,posterView
来源： https://blog.csdn.net/hql1024/article/details/122377591