uni-app微信小程序扫普通二维码分享小程序

柔光的暖阳◎ 2022-12-22 11:23 216阅读 0赞

这里需要扫普通二维码分享的话就需要先产生二维码了

文档：[https://github.com/yingye/weapp-qrcode][https_github.com_yingye_weapp-qrcode]

### 1.绘制二维码 ###

我这里使用的是资源是weapp.qrcode.esm.js文件，进入[资源][Link 1]下载即可，

下载后获取该文件的位置为weapp-qrcode-master.zip\\weapp-qrcode-master\\dist

准备工作完成，现在开始绘制二维码

具体实现

1.引入weapp.qrcode.esm.js文件

import drawQrcode from '@/common/weapp.qrcode.esm.js';

2.使用canvas绘制二维码，

3.使用1产生的drawQrcode对canvas进行绘制

drawQrcode({
      width: 200,
      height: 200,
      canvasId: 'myQrcode',
      text: this.text,
      // v1.0.0+版本支持在二维码上绘制图片
      image: {
    	imageResource: '/static/imgs/5c1ca95856f99.png',
    	dx: 70,
    	dy: 70,
    	dWidth: 60,
    	dHeight: 60
      }
    })

这里有宽高的设置，选择对应的canvasId，

text是二维码的内容，因为我这里是变量，所以使用this.text，如果不是变量则可以直接写值 text: "https://blog.csdn.net/a18792627168"

image是在二维码上绘制图片的操作，内有该图片宽高位置以及imageResource(图片来源)等设置。

下面是全部代码

<template>
    	<view class="page">
    		<canvas class="refer-canvas" canvas-id="myQrcode"></canvas>
    	</view>
    </template>
    
    <script>
    	import drawQrcode from '@/common/weapp.qrcode.esm.js';
    	export default {
    		data() {
    			return {
    				text: ''
    			}
    		},
    		computed: {
    			
    		},
    		onShow() {
    			this.text = "https://blog.csdn.net/a18792627168";
    			console.log("this.text",this.text);
    			this.showRefer()
    		},
    		methods: {
    			showRefer(){
    				drawQrcode({
    				  width: 200,
    				  height: 200,
    				  canvasId: 'myQrcode',
    				  text: this.text,
    				  // v1.0.0+版本支持在二维码上绘制图片
    				  image: {
    					imageResource: '/static/imgs/5c1ca95856f99.png',
    					dx: 70,
    					dy: 70,
    					dWidth: 60,
    					dHeight: 60
    				  }
    				})
    			},
    			
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    
    </style>

到目前呢，绘制二维码完成。

二维码完成，接下来是通过这个二维码打开小程序啦，我这个二维码和打开的小程序是同一个小程序的。

### 2.扫普通二维码打开小程序 ###

先来查看官方文档： 微信小程序的[扫普通链接二维码打开小程序][Link 2]文档

当然我有的没看懂

当中说需要一个 域名 ，这个域名需要已经上线的域名，这个域名如果你不知道，可能需要先创建域名，或者公司有已经上线的域名的话，可以直接拿来用。最好是和你这个项目相关的域名。

这里的校验文件是需要放到你这个域名所在的服务器上的路径下的。。

对于官网的分析到此，主要看文档其他的还是主要看文档。

校验文件的添加：

![20201120122714674.png][]

我当时碰到的这两个问题是主要有后端同事帮忙解决。。。感谢

然后现在是需要配置了二维码。

配置需要在微信公众平台的开发--->开发管理--->开发设置内的  扫普通链接二维码打开小程序，点击启用，

然后进行配置，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

你可用的域名，放置在二维码规则处，启动页的设置，选择体验版还是开发版，最后根据官网文档添加你的测试链接。添加完成后需要点击发布。

根据官网可以发现，你发布的线上环境必须是代码先发布，然后再发布二维码的配置。

这里如果你设置的是体验版，你就需要发布版本作为体验版进行测试，二维码的内容必须为测试链接的内容才会打开体验版（亲测有效）。。。不然其他的内容会打开线上版本。

然后说一下这里报错吧

这里在校验文件处可能会报错，这里的报错可能是因为你这里写的域名与你文件存放的位置不一致，需要存放到对应位置才会保存成功（踩过了）。

### 3.扫码打开后获取参数 ###

扫码打开后需要获取二维码传递过来的参数

因为我使用的uni-app，这里是vue，在页面加载时

onLoad(options) {
    	console.log("options",options);
    	let id = decodeURIComponent(options.q);
    	console.log("id",id);
    	this.userId = id.split("=")[1];
    },

我的这个链接过来类似于[https://wx.qq.com/mp?id=123][https_wx.qq.com_mp_id_123]  所以直接拿取值。

### 题外话 ###

这里不使用QRCode.js的原因是：[https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html][https_www.runoob.com_w3cnote_javascript-qrcodejs-library.html]

![2020112014382362.png][]

可查看菜鸟教程的资料，这里uni-app操作数据即可，不需要操作dom。所以weapp-qrcode.js更适合这个项目的需求。。

[https_github.com_yingye_weapp-qrcode]: https://github.com/yingye/weapp-qrcode
[Link 1]: https://download.csdn.net/download/a18792627168/13129313
[Link 2]: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html
[20201120122714674.png]: /images/20221120/15616d43b38d4dfa8fb97f7aa1c04cd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221120/3b2dbaf699864a23bde1a5a5c99e1170.png
[https_wx.qq.com_mp_id_123]: https://wx.qq.com/mp?id=123
[https_www.runoob.com_w3cnote_javascript-qrcodejs-library.html]: https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
[2020112014382362.png]: /images/20221120/40518e1029df42ad966462e7b10e79db.png