前端生成小程序二维码

2022-01-08 11:31:22 阅读：259 来源： 互联网

标签：qrcodeText palette .. viewList 前端 getPoster 生成二维码 posterView

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端生成小程序二维码