前端生成小程序二维码

效果

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

前端生成小程序二维码相关推荐

php生成小程序二维码出现40001的情况
php生成小程序二维码出现40001的情况获取二维码时,小程序的access_token莫名奇妙失效了? 生成小程序二维码时遇到的坑,明明刚获取到的access_token,生成二维码时总是提示说 ...
PC端生成小程序二维码海报并下载
我采用了前端截屏+前端生成二维码的方法展示海报并下载上代码 //截屏组件 import html2canvas from 'html2canvas' //生成二维码组件 import QRCode ...
node 无脑生成小程序二维码图
RT 新建createwxaqrcode.js: const request = require('request') const fs = require('fs')// eg:生成购物车列表圆形二 ...
聚合二维码生成(小程序二维码、付款码)
1. 付款码点击前往 2. 小程序二维码扫码进入小程序第一步: 配置微信小程序二维码微信公众平台 >开发 >开发设置 >扫普通链接二维码打开小程序点击添加,配置二维码规则 ...
三种方式生成小程序二维码
通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面,所有生成的二维码永久有效,可放心使用.目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示: 为满 ...
调用支付宝接口生成小程序二维码的坑（PHP）
引言:最近在开发支付宝小程序生成二维码的时候碰到了一点问题,记录一下 1.需求正在开发的这个项目是一个电商类小程序,需求是给每个产品生成一个独立的小程序二维码 2.实现了解了需求之后,开始查官方文 ...
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
图片二维码生成 <?php //二进制转图片image/pngfunction burryToBase64($contents, $mime){$base64 = base64_encode($ ...
【小程序】node/小程序云开发生成小程序二维码并添加文件到云存储/腾讯云存储
[前情提要] 1-小程序云函数生成小程序码 2-小程序云函数上传到云存储,云存储包括小程序云存储/腾讯云存储 (因为云函数就是node.js语法写的吗,所以下面写法对于node同样适用) 3-这里 ...
Java生成小程序二维码并带参数
直接上代码: 工具类MpQrUtils.java,获取accessToken与二维码的输入流: import javax.servlet.http.HttpServletRequest;import ...
php 生成小程序二维码（扫码进入小程序）
function qrCodeIsGenerated($code) {$appid = config('weChat.appid');$secret = config('weChat.secret') ...

前端生成小程序二维码

前端生成小程序二维码相关推荐

最新文章

热门文章