微信小程序之mpvue的插件weapp-qrcode.js二维码

最新推荐文章于 2025-04-23 07:14:49 发布

原创最新推荐文章于 2025-04-23 07:14:49 发布

· 4k 阅读

8 ·

版权

文章标签：

#mpvue #weapp-qrcode.js #微信小程序

本文详细介绍如何使用weapp-qrcode.js库在mpvue和wepy框架下生成二维码，通过实例展示了如何将文字内容转换为二维码图片，并在小程序中展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

weapp-qrcode.js下载https://github.com/Pudon/weapp-qrcode-base64

适应mpvue , wepy框架。

<template>
	<div id="twodcode">
        <image class="twoDCode" :src="qrcodeURL"></image>
    </div>
</template>
<script>
const QR = require('@/utils/weapp-qrcode.js')         //引入二维码的weapp-qrcode.js
export default{
		data(){
			return{
				qrcodeURL:"",
				codeText:'蜻蜓在阳光下逡巡 \n树叶在微风中摇摆 \n一阵突来的山风 \n卷走了你张开的手帕 \n手帕在温暖的注视中\n 飘成了云彩'
//这里是需要转为二维码的文字内容
			}
		},
		methods:{
			drawImg: function () {
   				
   				var imgData = QR.drawImg(this.codeText, {
      									typeNumber: 4,
				      					errorCorrectLevel: 'M',
				     			 		size: 500
                                     //这里照着写就是，如果要彻底弄懂请看weapp-qrcode.js
				     			 	})
   				this.qrcodeURL=imgData;
  			} 
		},
		mounted(){
			this.drawImg();
		
		}
	}
</script>
<style scoped>

.twoDCode{
		width: 200px;
		height: 200px;
		margin:20% 0 0 0;
	}

</style>

生成的二维码，用任何扫码软件都可以得到codeText的内容。如图demo

weapp-qrcode.js下载https://github.com/Pudon/weapp-qrcode-base64