Generate an ordinary QR code in the WeChat applet, and jump to the corresponding page according to the parameters in the QR code

1. Open the WeChat public platform

Find under the development directory》 【Development Management】"[Development Settings] find the module [Scan the QR code of the common link to open the applet] module,
as shown in the figure:
insert image description here
click [Add]
insert image description here
insert image description here

Use encodeURIComponent() to transcode parameters

For example:
the link address of my generated QR code is
the server request address + the parameters that need to be jumped

Step 1: Encode the parameters to be passed

I want to jump to the information page,
server domain name: https://xxxxx.com
information page path: /pagesA/information/informationDetails,
query parameters: id=12 (variable parameters)
const params = “path=/pagesA/information/ informationDetails?id=12”
const paramsEncode=encodeURIComponent(params); // Encode splicing jump parameters:
console.log(paramsEncode);
// Encoding result: path%3D%2FpagesA%2Finformation%2FinformationDetails%3Fid%3D12

Step 2: Generate a QR code

Generate QR code link: Forage QR code generation website
https://xxxxx.com?path%3D%2FpagesA%2Finformation%2FinformationDetails%3Fid%3D12

Step 3: Obtain parameters from the transfer page [pages/middlePage/middlePage] of the applet, and write the jump logic

As shown in the figure: I actually jump to the page parameters
insert image description here

onLoad(options) {
	   console.log("[middle]", options)
	   if (options.hasOwnProperty('q') && options.q) {
	       //对参数进行解码
		    const tempUrl = decodeURIComponent(options.q);
		    //对解码后的参数进行拆分组装,获取要跳转的路径
		    const paramsObject = this.urlParams(tempUrl);
		    uni.redirectTo({
				     url: paramsObject
		    })
	   } else {
		    uni.switchTab({
				     url: "/pages/index/index"
		    })
	   }
},
 methods: {
	   urlParams(url) {
		    let str = decodeURIComponent(url.slice(url.indexOf('?') + 1))
		    let path = str.slice(str.indexOf('=') + 1);
		    return path
	   },
  }

For details, please read the official documentation

Note:
Trial version: The configured test link needs to be exactly the same as the link address generated by the QR code, and dynamic parameters cannot be generated.
Test: xxx.com?path%3D%2FpagesA%2Finformation%2FinformationDetails%3Fid%3D12

Online version: The configured test link only needs to fill in the domain name and jump page, such as: id does not need to be coded to fill in the test link
Formal: xxx.com?path%3D%2FpagesA%2Finformation%2FinformationDetails

Guess you like

Origin blog.csdn.net/qq_37117408/article/details/128012770