怎么实现扫描二维码跳转到指定页面

Posted 2023-05-09

1，打开百度首页，在搜索栏中输入“二维码生成器”，按下回车进行搜索。

2，搜索之后，在搜索结果中点击“草料二维码生成器”进入该页面。

3，进入页面之后，点击上方的“网址”，进行网址二维码的生成。

4，输入一个网址。以百度网为例。输入网址之后，点击下方的“生成二维码”按钮。

5，点击之后，右侧就会出现生成好的二维码。此时点击“保存图片”保存即可。扫描该二维码也就可以直接跳转到网页。

参考技术A

你需要一款二维码生成工具，具体操作步骤如下：

进入网站登录到操作后台。

2.点击二维码内容。（第一次用会直接显示第三步的内容）

3.编辑二维码里的内容，添加链接。

保存后即可生成二维码。识别二维码后点击链接即可跳转到相应网站。

希望可以帮助到你！

参考技术B 简单，因为你这个是微信直接生成的，要跳到官网，只要下面几步
1、你跑到二维码乐园网站去
2、点击二维码在线生成
3、把你们网站链接复制粘贴，生成就OK啦
4、把二维码发布到你们有的渠道

实现微信扫一扫跳转到小程序指定页面

使用微信扫一扫进入小程序内的指定页面

文章目录

• 使用微信扫一扫进入小程序内的指定页面
• 前言
• 一、微信小程序平台配置
• 二、前端uniapp中的获取二维码信息
• 三.后端处理参数
• 总结

前言

使用场景：例如我们经常用到的共享充电宝，首先我们需要使用手机上的微信，打开微信扫一扫，扫描共享充电宝上的二维码，当我们扫描二维码后微信会直接跳转到小程序内的某个页面（不一定是首页）。像其他的一些共享设备也是一样的运行模式。那么怎么样才能通过微信扫一扫跳转到自己的小程序内并且跳转到指定页面呢？
所以接下来主要说一下用代码如何实现 通过微信扫一扫进入到小程序的指定页面。
下面把前后端以及小程序平台需要如何配置分开来说。
前端技术：uniapp
后端技术：c#，netcore5.0

一、微信小程序平台配置

1.首先登录微信平台，需要拥有小程序开发者权限登录微信平台。
2.登录进去后点击 开发管理-开发设置 找到 扫普通链接二维码打开小程序

3.点击添加，这里面有几个需要注意的地方，第一：因为我这里后端使用的.net，所以在把后端文件发布到服务器的IIS后，有一个wwwroot文件夹，下载下来的校验文件就放在wwwroot文件夹下就可以了，目前有的net项目在发布后，没有wwwroot文件夹，这时候只需要在项目中手动添加一个wwwroot文件夹就可以，发布到服务器后需要注意给文件夹可读权限，不然访问不到这个校验文件，默认都是有可读权限的。第二：测试连接，后面就是用这个连接生成的二维码，目前我是用草料二维码（网址：https://cli.im/url）把这个链接生成的二维码。当使用微信扫一扫功能扫描这个生成的二维码时就会自动跳转到配置好的pages/ScanCode/ScanCode页面，链接里面的linkcode是固定的，不需要更改，BoardNoByte是自定义的参数，根据自己的业务需求去自定义，你可以叫 aa=11等等。

4：添加完成后，就会出现一条数据,然后去草料二维码生成一个二维码就可以了，到此，小程序平台配置就算完成了。

二、前端uniapp中的获取二维码信息

1：打开小程序项目，因为我之前在小程序平台配置的跳转页面是pages/ScanCode/ScanCode，所以我需要找到这个页面

2：下面附上代码，通过这段代码会读取二维码图片里面的参数，然后跳转到/pages/ScanCode/FastOil页面：

	/*扫描二维码*/
			scanQrCode() 
				let that = this;
				if (!this.token) return this.delayNavigate()
				// 允许从相机和相册扫码
				uni.scanCode(
					success(res) 
					that.result1 = res.result;
					const BoardNo = encodeURIComponent(that.result1)
					console.log(BoardNo);
						// code = url.substring(46);
					 // const BoardNo = encodeURIComponent(code)
						uni.navigateTo(
							url: '/pages/ScanCode/FastOil?url='+BoardNo
						)
					
				);
			,

顺便说一句，这段代码不仅可以实现微信扫一扫，也可以实现小程序内自己开发的扫一扫功能。
3：下面附上/pages/ScanCode/FastOil页面的图片和主要代码

		onLoad(options) 
			// this.queryObj.BoardNoByte = 'HYBubokQKkEnqbg3yaZBCbYA=='
			// console.log(options);
			// console.log(decodeURIComponent(options.code));
			// const url = decodeURIComponent(options.q);
			const url = options.q ? decodeURIComponent(options.q) :'';
			// console.log(options);
			const BoardNocode = decodeURIComponent(options.url);
			// if(url==""||BoardNocode=="")
			// 	return uni.$showMsg("参数错误，请重新扫码");
			// ;
			let code = url.substring(46)||BoardNocode.substring(46);
			this.queryObj.BoardNoByte = code;
			// console.log(this.queryObj.BoardNoByte);
			// console.log(url);
			// console.log(BoardNocode);
			// console.log(code);
			
			// console.log(decodeURIComponent(options.code));
			// this.queryObj.oilCode = options.oilCode || '2'
			// this.queryObj.terminal = options.terminal || '3'
			this.getFastOil()
		,

到这一步前端就算是跳转到了指定页面，然后读取到了参数值，后面我是把这个加密后的参数值通过后端接口传递给了后端，进行业务上的处理

三.后端处理参数

通过前端传来的参数值，后端就可以进行业务上的处理了。

总结

以上就是微信扫一扫跳转小程序指定页面的全部配置，代码不多，主要在于理解。有两点需要注意：第一.目前我讲解的二维码生成是通过草料二维码把链接生成的二维码，这样只是为了测试跳转功能是否能用，等项目真正上线后，肯定是需要通过后端代码生成这个二维码。第二.在平台配置跳转页面的时候，我是指定到ScanCode页面，在前端代码中又从ScanCode页面跳转到FastOil页面，至于为什么先跳转到ScanCode页面，主要因为ScanCode页面是微信内部扫一扫页面，前面就说过了，我做的这个小程序不仅可以使用微信扫一扫，也可以使用小程序内部扫一扫功能，所以先在这个ScanCode页面进行二维码的统一处理，不管使用微信扫一扫还是小程序内部扫码功能，都在ScanCode页面进行处理后，然后再决定跳转到具体页面。