微信小程序生成分享二维码,自定义内容二维码_uniapp微信小程序将数据生成二维码并分享

本文主要介绍使用uniapp，再微信小程序端生成分享或自定义内容二维码，并保存到本地。

使用uQRCode插件生成

1、导入插件

在插件市场中搜索uQRCode，并使用hbuilderX导入该插件,插件官方地址；

2、使用插件

<template>
	<canvas id="uqrcode" canvas-id="uqrcode" style="height:200rpx"></canvas>
</template>
<script>
	import uQRCode from '../components/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js'
	import uqrcode from '../components/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'
	export default {
		components: {
			uqrcode
		},
		onReady() {
			this.makeCustom('二维码内容')
		},
		methods: {
			// 核销码
			makeCustom(text) {
				// 得到矩阵，可根据返回的矩阵信息自行实现二维码生成，甚至是样式。以下为示例
				var modules = uQRCode.getModules({
					// text: this.qrcodeTextRandom,
					text: text,
					errorCorrectLevel: uQRCode.errorCorrectLevel.H
				})
				// 定义样式信息
				var size = 160
				var margin = 10
				var tileW = (size - margin * 2) / modules.length
				var tileH = tileW
				var foregroundColor = '#000'
				var backgroundColor = '#ffffff'
				// canvas实例
				var canvasId = 'uqrcode'
				var ctx = uni.createCanvasContext(canvasId)
				ctx.setFillStyle(backgroundColor)
				ctx.fillRect(0, 0, size, size)
				for (var row = 0; row < modules.length; row++) {
					for (var col = 0; col < modules.length; col++) {
						// 计算每一个小块的位置
						var x = col * tileW + margin
						var y = row * tileH + margin
						var w = tileW
						var h = tileH
						// 画圆，随机颜色
						// var style = modules[row][col] ? this.getRandomColor() : backgroundColor
						// ctx.setFillStyle(style)
						// ctx.beginPath()
						// ctx.arc(x + 4, y + 4, w / 2, 0, 2 * Math.PI)
						// ctx.fill()
						// 画方
						var style = modules[row][col] ? foregroundColor : backgroundColor
						ctx.setFillStyle(style)
						ctx.fillRect(x, y, w, h)
					}
				}
				ctx.draw()
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

官方提供的API,分享页面二维码

微信官方文档

步骤：

1、取得access_token

uni.request({
	url: 'https://api.weixin.qq.com/cgi-bin/token',
	method: 'GET',
	data: {
		grant_type: 'client_credential',
		appid: '小程序appid',
		secret: '小程序secret'
	},
	header: {
		'content-type': 'application/json' // 默认值
	},
	success: res => {
	//成功回调,res.data.access_token
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、生成二维码

wx.request({
	url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + access_token,
	method: 'POST',
	responseType: 'arraybuffer',
	data: {
		path: "pages/index/index?spreadCode=" + 携带参数,
		width: 200
	},
	success: (res) => {
		var base64 = wx.arrayBufferToBase64(res.data).replace(/\. +/g, '')
		base64 = base64.replace(/[\r\n]/g, '')
		let wxaCode = 'data:image/png;base64,' + base64
		//根据需求继续
	},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完整代码

<template>
	<view class="body flex-center">
		<view class="flex-between radius column" v-if="wxaCode!==''">
			<image src="../../static/yaoqing_image.png" mode="" class="bg"></image>
			<text>我的邀请码:{{USERINFO.spread_code||''}}</text>
			<image :src="wxaCode" mode=""></image>
			<view class="flex-between">
				<button class="btn-black" @click="saveBase64">保存图片</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				wxaCode: uni.getStorageSync('wxaCode'),
			};
		},
		computed: mapState('user', ['USERINFO','SYS']),
		onLoad() {
			if (uni.getStorageSync('wxaCode') == '') {
				this.getToken()
			}
		},
		methods: {
			// 二维码
			//获取access_token
			getToken() {
				uni.showLoading({
					title: '生成中...'
				})
				uni.request({
					url: 'https://api.weixin.qq.com/cgi-bin/token',
					method: 'GET',
					data: {
						grant_type: 'client_credential',
						appid: 'appid',
						secret: 'secret'
					},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: res => {
						let access_token = res.data.access_token
						wx.request({
							url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + access_token,
							method: 'POST',
							responseType: 'arraybuffer',
							data: {
								path: "pages/index/index?spreadCode=11",
								width: 200
							},
							success: (res) => {
								var base64 = wx.arrayBufferToBase64(res.data).replace(/\. +/g, '')
								base64 = base64.replace(/[\r\n]/g, '')
								let wxaCode = 'data:image/png;base64,' + base64
								uni.setStorageSync('wxaCode', wxaCode)
								this.wxaCode = wxaCode
								uni.hideLoading()
							},
						})
					},
					complete: res => {
						console.log(res)
					}
				})
			},
			// 保存base64
			saveBase64() {
				var that = this
				var aa = wx.getFileSystemManager(); //获取文件管理器对象
				// console.log('that.data.wxaCode:', that.data.wxaCode)
				aa.writeFile({
					filePath: wx.env.USER_DATA_PATH + '/cmessage.png',
					data: this.wxaCode.slice(22),
					encoding: 'base64',
					success: res => {
						wx.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/cmessage.png',
							success: function(res) {
								wx.showToast({
									title: '保存成功',
								})
							},
							fail: function(err) {
								console.log(err, '失败')
							}
						})
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
			},
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102