uniapp使用tki-qrcode插件生成二维码，并且可以分享给微信好友

最新推荐文章于 2024-09-04 11:50:21 发布

peepeeman

最新推荐文章于 2024-09-04 11:50:21 发布

阅读量353

点赞数 3

文章标签： uni-app 微信小程序

本文链接：https://blog.csdn.net/peepeeman/article/details/141863512

版权

在这里插入图片描述

1、导入插件

npm i tki-qrcode

2、页面引入插件并挂载

	<view class="content-qr-box">
		<tki-qrcode cid="qrcode2" ref="qrcode2" :val="qr_content" :size="390" :onval="true" :loadMake="true"
			:usingComponents="true" @result="qrResult" />
	</view>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';

	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				qr_content: '1', // 生成的转接码内容
				result: ''
			}
		},
		methods: {
			// 二维码保存
			saveQrCode() {
				this.$refs.qrcode2._saveCode();
			},
			qrResult(e) {
				console.log("生成的图片base64或图片临时地址", e);
				this.result = e;
			},
			// 分享图片到微信
			shareToWechat() {
				let _this = this;
				wx.showShareImageMenu({
					path: _this.result //要分享的图片地址，必须为本地路径或临时路径
				})
			}
		},
	}
</script>

按钮

<view class="content-btn common-flex">
	<view class="btn left-btn" @click="saveQrCode()">下载保存</view>
	<view class="btn right-btn" @click="shareToWechat">分享到微信</view>
</view>