使用微信掃一掃進(jìn)入小程序內(nèi)的指定頁面

前言

使用場景：例如我們經(jīng)常用到的共享充電寶，首先我們需要使用手機(jī)上的微信，打開微信掃一掃，掃描共享充電寶上的二維碼，當(dāng)我們掃描二維碼后微信會直接跳轉(zhuǎn)到小程序內(nèi)的某個(gè)頁面（不一定是首頁）。像其他的一些共享設(shè)備也是一樣的運(yùn)行模式。那么怎么樣才能通過微信掃一掃跳轉(zhuǎn)到自己的小程序內(nèi)并且跳轉(zhuǎn)到指定頁面呢？
所以接下來主要說一下用代碼如何實(shí)現(xiàn) 通過微信掃一掃進(jìn)入到小程序的指定頁面。
下面把前后端以及小程序平臺需要如何配置分開來說。
前端技術(shù)：uniapp
后端技術(shù)：c#，netcore5.0

一、微信小程序平臺配置

1.首先登錄微信平臺，需要擁有小程序開發(fā)者權(quán)限登錄微信平臺。
2.登錄進(jìn)去后點(diǎn)擊 開發(fā)管理-開發(fā)設(shè)置 找到 掃普通鏈接二維碼打開小程序

3.點(diǎn)擊添加，這里面有幾個(gè)需要注意的地方，第一：因?yàn)槲疫@里后端使用的.net，所以在把后端文件發(fā)布到服務(wù)器的IIS后，有一個(gè)wwwroot文件夾，下載下來的校驗(yàn)文件就放在wwwroot文件夾下就可以了，目前有的net項(xiàng)目在發(fā)布后，沒有wwwroot文件夾，這時(shí)候只需要在項(xiàng)目中手動添加一個(gè)wwwroot文件夾就可以，發(fā)布到服務(wù)器后需要注意給文件夾可讀權(quán)限，不然訪問不到這個(gè)校驗(yàn)文件，默認(rèn)都是有可讀權(quán)限的。第二：測試連接，后面就是用這個(gè)連接生成的二維碼，目前我是用草料二維碼（網(wǎng)址：https://cli.im/url）把這個(gè)鏈接生成的二維碼。當(dāng)使用微信掃一掃功能掃描這個(gè)生成的二維碼時(shí)就會自動跳轉(zhuǎn)到配置好的pages/ScanCode/ScanCode頁面，鏈接里面的linkcode是固定的，不需要更改，BoardNoByte是自定義的參數(shù)，根據(jù)自己的業(yè)務(wù)需求去自定義，你可以叫 aa=11等等。

4：添加完成后，就會出現(xiàn)一條數(shù)據(jù),然后去草料二維碼生成一個(gè)二維碼就可以了，到此，小程序平臺配置就算完成了。

二、前端uniapp中的獲取二維碼信息

1：打開小程序項(xiàng)目，因?yàn)槲抑霸谛〕绦蚱脚_配置的跳轉(zhuǎn)頁面是pages/ScanCode/ScanCode，所以我需要找到這個(gè)頁面

2：下面附上代碼，通過這段代碼會讀取二維碼圖片里面的參數(shù)，然后跳轉(zhuǎn)到/pages/ScanCode/FastOil頁面：

	/*掃描二維碼*/
			scanQrCode() {
				let that = this;
				if (!this.token) return this.delayNavigate()
				// 允許從相機(jī)和相冊掃碼
				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
						})
					}
				});
			},

順便說一句，這段代碼不僅可以實(shí)現(xiàn)微信掃一掃，也可以實(shí)現(xiàn)小程序內(nèi)自己開發(fā)的掃一掃功能。
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("參數(shù)錯(cuò)誤，請重新掃碼");
			// };
			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()
		},

到這一步前端就算是跳轉(zhuǎn)到了指定頁面，然后讀取到了參數(shù)值，后面我是把這個(gè)加密后的參數(shù)值通過后端接口傳遞給了后端，進(jìn)行業(yè)務(wù)上的處理

三.后端處理參數(shù)

通過前端傳來的參數(shù)值，后端就可以進(jìn)行業(yè)務(wù)上的處理了。

總結(jié)

以上就是微信掃一掃跳轉(zhuǎn)小程序指定頁面的全部配置，代碼不多，主要在于理解。有兩點(diǎn)需要注意：第一.目前我講解的二維碼生成是通過草料二維碼把鏈接生成的二維碼，這樣只是為了測試跳轉(zhuǎn)功能是否能用，等項(xiàng)目真正上線后，肯定是需要通過后端代碼生成這個(gè)二維碼。第二.在平臺配置跳轉(zhuǎn)頁面的時(shí)候，我是指定到ScanCode頁面，在前端代碼中又從ScanCode頁面跳轉(zhuǎn)到FastOil頁面，至于為什么先跳轉(zhuǎn)到ScanCode頁面，主要因?yàn)镾canCode頁面是微信內(nèi)部掃一掃頁面，前面就說過了，我做的這個(gè)小程序不僅可以使用微信掃一掃，也可以使用小程序內(nèi)部掃一掃功能，所以先在這個(gè)ScanCode頁面進(jìn)行二維碼的統(tǒng)一處理，不管使用微信掃一掃還是小程序內(nèi)部掃碼功能，都在ScanCode頁面進(jìn)行處理后，然后再決定跳轉(zhuǎn)到具體頁面。文章來源地址http://www.zghlxwxcb.cn/news/detail-781649.html

到了這里，關(guān)于實(shí)現(xiàn)微信掃一掃跳轉(zhuǎn)到小程序指定頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！