Use WeChat to scan to enter the specified page in the Mini Program
Article directory
foreword
Usage scenario: For example, the shared power bank we often use, first we need to use WeChat on the mobile phone, open WeChat to scan, and scan the QR code on the shared power bank. When we scan the QR code, WeChat will directly jump Go to a certain page (not necessarily the home page) in the Mini Program. The same operation mode as some other shared devices. So how can you scan and jump to your own mini program and jump to the specified page by scanning WeChat?
So next, I will mainly talk about how to use code to enter the specified page of the applet by scanning WeChat.
Let's talk about how to configure the front and back ends and the applet platform separately.
Front-end technology: uniapp
Back-end technology: c#, netcore5.0
1. WeChat Mini Program Platform Configuration
1. To log in to the WeChat platform first, you need to have the permission of a small program developer to log in to the WeChat platform.
2. After logging in, click Development Management-Development Settings to find the QR code to scan the common link to open the applet
3. Click Add, there are a few things to pay attention to, first: because I use .net for the backend here, so After publishing the back-end files to the IIS of the server, there is a wwwroot folder , and the downloaded verification file can be placed in the wwwroot folder. At present, some net projects do not have a wwwroot folder after they are released. Sometimes you only need to manually add a wwwroot folder in the project. After publishing to the server, you need to pay attention to the readable permission of the folder, otherwise the verification file cannot be accessed, and it has readable permission by default. Second: Test the connection , followed by the QR code generated by this connection. At present, I use the grass QR code (URL: https://cli.im/url) to generate the QR code from this link. When scanning the generated QR code with the WeChat scan function, it will automatically jump to the configured pages/ScanCode/ScanCode page. The linkcode in the link is fixed and does not need to be changed. BoardNoByte is a custom parameter. Customize according to your own business needs, you can call aa=11 and so on.
4: After the addition is completed, a piece of data will appear, and then go to the grass QR code to generate a QR code. At this point, the configuration of the Mini Program platform is complete.
2. Obtain QR code information in the front-end uniapp
1: Open the applet project, because the jump page I configured on the applet platform is pages/ScanCode/ScanCode, so I need to find this page 2: The code is
attached below, and the QR code image will be read through this code The parameters inside, and then jump to the /pages/ScanCode/FastOil page:
/*扫描二维码*/
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
})
}
});
},
By the way, this code can not only realize WeChat scanning, but also realize the self-developed scanning function in the applet.
3: The picture and main code of the /pages/ScanCode/FastOil page are attached below
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()
},
At this point, the front end even jumps to the specified page, and then reads the parameter value. Later, I pass the encrypted parameter value to the back end through the back end interface for business processing.
3. Backend processing parameters
Through the parameter values transmitted from the front end, the back end can perform business processing.
Summarize
The above is all the configuration of the specified page of the WeChat scan and jump applet. There are not many codes, the main thing is to understand. There are two points to note: First, the QR code generation I am explaining at present is to generate a QR code from a link through a grass QR code. This is just to test whether the jump function can be used. After the project is actually launched, it must be This QR code needs to be generated through the backend code. Second. When configuring the jump page on the platform, I specified the ScanCode page, and then jumped from the ScanCode page to the FastOil page in the front-end code. Scan the page, as I said before, the small program I made can not only use WeChat to scan, but also use the internal scanning function of the small program, so first perform unified processing of QR codes on this ScanCode page, regardless of Whether to use WeChat scanning or the internal scanning function of the applet, it is processed on the ScanCode page, and then it is decided to jump to a specific page.