微信小程序绘制二维码
一、前言
在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求。使用场景很多,例如绘制在海报上,例如制作票务码、核销码等等。
这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助。
二、实现原理
使用微信小程序的canvas组件进行绘制,但是在该组件用起来并不是很顺手,所以使用了第三方的框架:
Painter
Painter的Github地址
用你的方法,把这个框架下载下来,里面会有示范代码,我们只需要把其中的核心代码拿出来就行。
对于框架的使用介绍,大家可以前往github浏览,我这就直接上手了。
painter能做的不仅仅只是绘制一个二维码。戳下面链接查看带参海报绘制。
实战篇-制作微信小程序码宣传海报
三、实现代码
前期准备
1、新建components文件夹,放置painter核心代码
2、新建palette文件夹,放置绘制实现代码
painter.js代码
export default class LastMayday {palette(viewList) {return (viewList);}
}
3、新建绘制的具体属性信息文件夹posterViewjs,放置例如绘制的大小、位置等信息js。
二维码绘制属性信息js代码
const getPosterView01 = (qrcodeText) => {const poster01 = {"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 poster01
}module.exports = {getPosterView01: getPosterView01
}
实现
实现页面目录结构
wxml代码
<view class="flex-jc-ac-col" style="margin-top: 200rpx;"><image class="qrcode-img" src="{{imgUrl?imgUrl:''}}" mode="widthFix"></image><button type="primary" style="margin-top: 105rpx;" 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隐藏 -->
wxss代码
.qrcode-img{background-color: #999999;height: 300rpx;width: 300rpx;
}
json代码
注意记得在使用的页面引用painter组件
{"usingComponents": {"painter":"/components/painter/painter"},"navigationBarTitleText": "绘制二维码"
}
JS代码
// pages/makeQRCode/makeQRCode.js
import poster from '../../palette/painter'
const posterView = require("../../posterViewjs/posterView")
Page({/*** 页面的初始数据*/data: {imgUrl: null,QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",paintPallette: '',},/*** 生命周期函数--监听页面加载*/onLoad() {},/*** 生命周期函数--监听页面显示*/onShow () {},/** 生成海报点击监听 */makeQRCodeTap() {wx.showLoading({title: '获取海报中',mask: true})// 绘制海报this.makePoster(this.data.QRCodeText)},/** 绘制完成后的回调函数*/onImgOK(res) {wx.hideLoading()// 这个路径就可以作为保存图片时的资源路径// console.log("海报临时路径", res.detail.path)this.setData({imgUrl: res.detail.path})},/** 生成海报 */makePoster(qrcodeText) {wx.showLoading({title: '生成海报中',})// 这是绘制海报所用到JSON数据const viewList = posterView.getPosterView01(qrcodeText)this.setData({paintPallette: new poster().palette(viewList)})},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
实现效果
四、结语
实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。
有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)
以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。
微信小程序绘制二维码相关推荐
- 微信小程序绘制二维码(附微信小程序开发学习手册)
一.前言 在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求.使用场景很多,例如绘制在海报上,例如制作票务码.核销码等等. 这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助. ...
- 5分钟实现微信小程序绘制二维码
一.话不多,直接先看效果:
- 【微信小程序】二维码跳转规则的前缀匹配是什么意思?
前言 基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则 为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
- 微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
- 微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码 也是从onLoad的 options 里解构出来,此时options ...
- 微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
- 微信小程序转二维码方法分享
微信小程序转二维码方法分享 需要转码的可以看看 这个东西是看个人需求的,618就要来了,各种活动也将来袭 有些小伙伴不知道怎么生成 为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法 首 ...
- 微信小程序分享二维码生成
生成微信小程序分享二维码 微信小程序官方开放的二维码的接口,其中有一个是生成小程序二维码的,还有一个是圆形的小程序码,我这里就用php生成二维码. 完整代码: public function shar ...
- 微信小程序获取二维码接口整理,.Net Core后台获取小程序二维码
2019独角兽企业重金招聘Python工程师标准>>> 一.关于二维码接口说明 参考:https://my.oschina.net/tianma3798/blog/1811307 获 ...
最新文章
- java 排序算法 讲解_java实现排序算法之冒泡排序法详细讲解
- 20十年后的计算机作文600字,20年后的学校作文600字
- 如何访问ASP.Net网站bin目录内的文件
- Windows 7平台安装Oracle Client 10g版本时需要做的一点变更
- redis -cli command not found_记一次 Linux 服务器 redis 漏洞分析
- python显示日历_python显示日期
- 关于在Mac上安装模拟器的坑比~~~~~
- springMVC的各种路径含义及其作用
- 火力发电计算机控制参数详细过程,火力发电过程
- 自媒体行业的发展和前景
- js 检测浏览器开发者控制台是否被打开
- 安利 : プログラミングで彼女をつくる 全攻略~
- 普林斯顿陈丹琦组:以实体为问题中心,让稠密检索模型DPR光环暗淡
- 算法珠玑算法总结(转)
- Android中ButterKnife的使用
- 【前端】一、web技术基础
- OpenCV图像处理——重映射 remap函数
- 《极简学习法》读书笔记
- 大数据学习01:大数据概述
- oracle实例的内存(SGA和PGA)的调整和优化(转载)