uniapp使用uQRCode绘制二维码，下载到本地，调起微信扫一扫二维码核销

1.效果

2.在utils文件夹下创建uqrcode.js

// uqrcode.js
//---------------------------------------------------------------------
// github https://github.com/Sansnn/uQRCode
//---------------------------------------------------------------------
 
let uQRCode = {};
 
(function() {
	//---------------------------------------------------------------------
	// QRCode for JavaScript
	//
	// Copyright (c) 2009 Kazuhiko Arase
	//
	// URL: http://www.d-project.com/
	//
	// Licensed under the MIT license:
	//   http://www.opensource.org/licenses/mit-license.php
	//
	// The word "QR Code" is registered trademark of 
	// DENSO WAVE INCORPORATED
	//   http://www.denso-wave.com/qrcode/faqpatent-e.html
	//
	//---------------------------------------------------------------------
 
	//---------------------------------------------------------------------
	// QR8bitByte
	//---------------------------------------------------------------------
 
	function QR8bitByte(data) {
		this.mode = QRMode.MODE_8BIT_BYTE;
		this.data = data;
	}
 
	QR8bitByte.prototype = {
 
		getLength: function(buffer) {
			return this.data.length;
		},
 
		write: function(buffer) {
			for (var i = 0; i = 7) {
				this.setupTypeNumber(test);
			}
 
			if (this.dataCache == null) {
				this.dataCache = QRCode.createData(this.typeNumber, this.errorCorrectLevel, this.dataList);
			}
 
			this.mapData(this.dataCache, maskPattern);
		},
 
		setupPositionProbePattern: function(row, col) {
 
			for (var r = -1; r  lostPoint) {
					minLostPoint = lostPoint;
					pattern = i;
				}
			}
 
			return pattern;
		},
 
		createMovieClip: function(target_mc, instance_name, depth) {
 
			var qr_mc = target_mc.createEmptyMovieClip(instance_name, depth);
			var cs = 1;
 
			this.make();
 
			for (var row = 0; row > i) & 1) == 1);
				this.modules[Math.floor(i / 3)][i % 3 + this.moduleCount - 8 - 3] = mod;
			}
 
			for (var i = 0; i > i) & 1) == 1);
				this.modules[i % 3 + this.moduleCount - 8 - 3][Math.floor(i / 3)] = mod;
			}
		},
 
		setupTypeInfo: function(test, maskPattern) {
 
			var data = (this.errorCorrectLevel > i) & 1) == 1);
				if (i > i) & 1) == 1);
				if (i  0; col -= 2) {
 
				if (col == 6) col--;
 
				while (true) {
 
					for (var c = 0; c >> bitIndex) & 1) == 1);
							}
 
							var mask = QRUtil.getMask(maskPattern, row, col - c);
 
							if (mask) {
								dark = !dark;
							}
 
							t服务器托管网his.modules[row][col - c] = dark;
							bitIndex--;
 
							if (bitIndex == -1) {
								byteIndex++;
								bitIndex = 7;
							}
						}
					}
 
					row += inc;
 
					if (row  totalDataCount * 8) {
			throw new Error("code length overflow. (" +
				buffer.getLengthInBits() +
				">" +
				totalDataCount * 8 +
				")");
		}
 
		// end code
		if (buffer.getLengthInBits() + 4 = totalDataCount * 8) {
				break;
			}
			buffer.put(QRCode.PAD0, 8);
 
			if (buffer.getLengthInBits() >= totalDataCount * 8) {
				break;
			}
			buffer.put(QRCode.PAD1, 8);
		}
 
		return QRCode.createBytes(buffer, rsBlocks);
	}
 
	QRCode.createBytes = function(buffer, rsBlocks) {
 
		var offset = 0;
 
		var maxDcCount = 0;
		var maxEcCount = 0;
 
		var dcdata = new Array(rsBlocks.length);
		var ecdata = new Array(rsBlocks.length);
 
		for (var r = 0; r = 0) ? modPoly.get(modIndex) : 0;
			}
 
		}
 
		var totalCodeCount = 0;
		for (var i = 0; i = 0) {
				d ^= (QRUtil.G15 = 0) {
				d ^= (QRUtil.G18 >>= 1;
			}
 
			return digit;
		},
 
		getPatternPosition: function(typeNumber) {
			return QRUtil.PATTERN_POSITION_TABLE[typeNumber - 1];
		},
 
		getMask: function(maskPattern, i, j) {
 
			switch (maskPattern) {
 
				case QRMaskPattern.PATTERN000:
					return (i + j) % 2 == 0;
				case QRMaskPattern.PATTERN001:
					return i % 2 == 0;
				case QRMaskPattern.PATTERN010:
					return j % 3 == 0;
				case QRMaskPattern.PATTERN011:
					return (i + j) % 3 == 0;
				case QRMaskPattern.PATTERN100:
					return (Math.floor(i / 2) + Math.floor(j / 3)) % 2 == 0;
				case QRMaskPattern.PATTERN101:
					return (i * j) % 2 + (i * j) % 3 == 0;
				case QRMaskPattern.PATTERN110:
					return ((i * j) % 2 + (i * j) % 3) % 2 == 0;
				case QRMaskPattern.PATTERN111:
					return ((i * j) % 3 + (i + j) % 2) % 2 == 0;
 
				default:
					throw new Error("bad maskPattern:" + maskPattern);
			}
		},
 
		getErrorCorrectPolynomial: function(errorCorrectLength) {
 
			var a = new QRPolynomial([1], 0);
 
			for (var i = 0; i  5) {
						lostPoint += (3 + sameCount - 5);
					}
				}
			}
 
			// LEVEL2
 
			for (var row = 0; row = 256) {
				n -= 255;
			}
 
			return QRMath.EXP_TABLE[n];
		},
 
		EXP_TABLE: new Array(256),
 
		LOG_TABLE: new Array(256)
 
	};
 
	for (var i = 0; i >> (7 - index % 8)) & 1) == 1;
		},
 
		put: function(num, length) {
			for (var i = 0; i >> (length - i - 1)) & 1) == 1);
			}
		},
 
		getLengthInBits: function() {
			return this.length;
		},
 
		putBit: function(bit) {
 
			var bufIndex = Math.floor(this.length / 8);
			if (this.buffer.length >> (this.length % 8));
			}
 
			this.length++;
		}
	};
 
	//---------------------------------------------------------------------
	// Support Chinese
	//---------------------------------------------------------------------
	function utf16To8(text) {
		var result = '';
		var c;
		for (var i = 0; i = 0x0001 && c  0x07FF) {
				result += String.fromCharCode(0xE0 | c >> 12 & 0x0F);
				result += String.fromCharCode(0x80 | c >> 6 & 0x3F);
				result += String.fromCharCode(0x80 | c >> 0 & 0x3F);
			} else {
				result += String.fromCharCode(0xC0 | c >> 6 & 0x1F);
				result += String.fromCharCode(0x80 | c >> 0 & 0x3F);
			}
		}
		return result;
	}
 
	uQRCode = {
 
		errorCorrectLevel: QRErrorCorrectLevel,
 
		defaults: {
			size: 354,
			margin: 0,
			backgroundColor: '#ffffff',
			foregroundColor: '#000000',
			fileType: 'png', // 'jpg', 'png'
			errorCorrectLevel: QRErrorCorrectLevel.H,
			typeNumber: -1
		},
 
		make: function(options) {
			return new Promise((reslove, reject) => {
				var defaultOptions = {
					canvasId: options.canvasId,
					componentInstance: options.componentInstance,
					text: options.text,
					size: this.defaults.size,
					margin: this.defaults.margin,
					backgroundColor: this.defaults.backgroundColor,
					foregroundColor: this.defaults.foregroundColor,
					fileType: this.defaults.fileType,
					errorCorrectLevel: this.defaults.errorCorrectLevel,
					typeNumber: this.defaults.typeNumber
				};
				if (options) {
					for (var i in options) {
						defaultOptions[i] = options[i];
					}
				}
				options = defaultOptions;
				if (!options.canvasId) {
					console.error('uQRCode: Please set canvasId!');
					return;
				}
 
				function createCanvas() {
					var qrcode = new QRCode(options.typeNumber, options.errorCorrectLevel);
					qrcode.addData(utf16To8(options.text));
					qrcode.make();
 
					var ctx = uni.createCanvasContext(options.canvasId, options.componentInstance);
					ctx.setFillStyle(options.backgroundColor);
					ctx.fillRect(0, 0, options.size, options.size);
 
					var tileW = (options.size - options.margin * 2) / qrcode.getModuleCount();
					var tileH = tileW;
 
					for (var row = 0; row  {
											resData = res.target.result;
											options.success && options.success(resData);
											reslove(resData);
										};
										// #endif
 
										// #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
										uni.getFileSystemManager().readFile({
											filePath: tempFilePath,
											encoding: 'base64',
											success: res => {
												resData = 'data:image/png;base64,' + res.data;
												options.success && options.success(resData);
												reslove(resData);
											}
										})
										// #endif
 
										// #ifndef H5 || APP-PLUS || MP-WEIXIN || MP-QQ || MP-TOUTIAO
										if (plus) {
											const path = plus.io.convertLocalFileSystemURL(tempFilePath) // 绝对路径
											let fileReader = new plus.io.FileReader();
											fileReader.readAsDataURL(path);
											fileReader.onloadend = res => {
												resData = res.target.result;
												options.success && options.success(resData);
												reslove(resData);
											};
										} else {
											uni.request({
												url: tempFilePath,
												method: 'GET',
												responseType: 'arraybuffer',
												success: res => {
													resData = `data:image/png;base64,${uni.arrayBufferToBase64(res.data)}`; // 把arraybuffer转成base64
													options.success && options.success(resData);
													reslove(resData);
												}
											})
										}
										// #endif
									},
									fail: function(error) {
										options.fail && options.fail(error);
										reject(error);
									},
									complete: function(res) {
										options.complete && options.complete(res);
									}
								}, options.componentInstance);
							}, options.text.length + 100);
						})());
					}, 150);
				}
 
				createCanvas();
			});
		}
	}
 
})()
 
export default uQRCode

3.在需要使用的页面引入js

template>
view>
view class="codeBox" @click="save">
				
				canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;">canvas>
				view class="saveCode">
					保存二维码
				view>
			view>
view>
template>
script>
	import uqrCode from '@/utils/uqrcode.js'
	export default {
		data() {
			return {
			qrcode: false,
			imgCode: '', // 后续保存到手机相册所需要用到的字段
			}
			},
			onLoad(){
			this.generate('https://www.baidu.com?id=1')
			},
			methods:{
			//  生成二维码事件
			generate(e) {
				uqrCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: e, // 想生成二维码到内容
					size: 200,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uqrCode.errorCorrectLevel.H,
					success: res => {
						this.imgCode = res // base64的图片格式
					}
				})
			},
			// 保存到手机
			save() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.aveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.aveImageToPhotosAlbum();
								},
								fail: () => {
									// 提示
									uni.showToast({
										title: "请打开保存相册权限，再点击保存到手机",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			aveImageToPhotosAlbum() {
				let base64 = this.imgCode.replace(/^data:image/w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/writeOff.png'; //   路径文件名
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
							filePath: filePath,
							success: function(res2) {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									icon: "none",
									duration: 5000
								})
							},
							fail: function(err) {
								uni.hideLoading();
								// console.log(err.errMsg);
							}
					服务器托管网	})
					},
					fail: err => {
						uni.hideLoading();
						//console.log(err)
					}
				})
			},
			}
			}

4.掉起微信扫一扫核销，将二维码扫出来的参数传个后端

template>
	view>
	view  @click="scanCode">点击核销view>
	view>
template>
script>
	export default {
		data() {
			return {
			}
			},
			onLoad() {},
			methods: {
			scanCode() {
				let that = this;
				uni.scanCode({
					onlyFromCamera: true, //只能通过相机扫码
					success: function(res) {
						console.log('扫码', res.result)
						let obj = {id:that.getQueryString(res.result,'id'),
						}
						uni.showLoading({
							mask: true,
							title: '核销中...'
						})
						setTimeout(res => {
							uni.hideLoading();
						}, 500)
					}
				});
			},
			// 解析链接中的参数
			getQueryString (url, name) {
  console.log("url = " + url)
  console.log("name = " + name)
  var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
  var r = url.substr(1).match(reg)
  if (r != null) {
    console.log("r = " + r)
    console.log("r[2] = " + r[2])
    return r[2]
  }
  return null;
}
			}
			}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 【简单的留言墙】HTML+CSS+JavaScript

目标：做一个简单的留言墙 1.首先我们用HTML的一些标签，初步构造区服务器托管网域样式。 留言墙 /* …… */ 留言服务器托管网墙 输入内容后，点击提交即可 谁： 服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net相…