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

最新推荐文章于 2024-09-19 09:58:11 发布

DOM曼珠沙华

最新推荐文章于 2024-09-19 09:58:11 发布

阅读量2.8k

点赞数 1

分类专栏： uni-app 文章标签： uni-app vue.js

本文链接：https://blog.csdn.net/a18792627168/article/details/109841701

版权

uni-app 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

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

文档：https://github.com/yingye/weapp-qrcode

1.绘制二维码

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

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

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

具体实现

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

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

2.使用canvas绘制二维码，

<canvas class="refer-canvas" canvas-id="myQrcode"></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.扫普通二维码打开小程序

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

当然我有的没看懂

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

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

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

校验文件的添加：

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

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

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

然后进行配置，如下图：

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

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

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

然后说一下这里报错吧

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

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 所以直接拿取值。