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:
click [Add]
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
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