Alipay scan code to jump to applet and pass parameters

Alipay scan code to jump to applet and pass parameters

1. Open the Alipay open platform

Alipay Open Platform
Open the Alipay open platform and enter your own mini program details page. Click Mini Program Code "Associate Ordinary QR Code" Add button

2. Enter the business domain name

1. Here we choose fuzzy matching

2. The QR code address can be customized by filling in https://domain name/any suffix.
   Example: httss://test.com/mycode

3. Fill in the address of the page you want to jump to after scanning the code on the function page of the applet
   

3. Download the verification file

Click Download Verification File in the image above. Obtain a verification file of xxxxxxxxxxxxxxxxxxxx.html and upload it to the root directory of the domain name binding server. This file can be accessed through the domain name.

If you are not sure, you can refer to the previous WeChat scan code to jump to the mini program to pass parameters

4. Test Alipay scanning QR code to jump

Here, in order to check the receiving status of Alipay parameters, we use Alipay to scan the code to jump to the development version.

Alipay scan code to enter the development version of the applet for real machine debugging, enter the joint debugging setting page, and open the joint debugging scanning code version option

At this time, scanning the QR code through Alipay will automatically jump to the development version, so that you can see the QR code parameter reception.

5. Analysis of QR code parameters

Here we use uniapp to receive the parameters passed by Alipay through the QR code

Example: https://test.com?name=zhangsan&sex=1&age=18. At this point we want to get the name, sex, and age values ​​​​passed by the QR code

1. Add the onLaunch method to the App.vue file.

   Alipay’s QR code can only receive parameters through the onLaunch method, but cannot receive parameters through onLoad. This is the biggest difference from WeChat

    onLaunch: function (options) {
    
    
        console.log('App Launch')
        if(options.query && options.query.qrCode){
    
    
            this.globalData.qrCode =  options.query.qrCode
        }
    },

2. Read globalData.qrCode in the page to be redirected, and parse it into an object.

onLoad(option) {
    
    
        let qrCode = getApp().globalData.qrCode;
        if (qrCode){
    
    
            this.zfbObj = this.getUrlParam(qrCode)
        }
 }
 methods: {
    
    
 	 getUrlParam(url){
    
    
         let params = url.split("?")[1].split("&");
         let obj = {
    
    };
         params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
         return obj
     },
 }

At this time, the specific parameters can be obtained through this.zfbObj.name, this.zfbObj.sex, and this.zfbObj.age

6. Compatible with the general method of WeChat Alipay scan code jump to transfer parameters

1. Add the onLaunch method to the App.vue file.

 onLaunch: function (options) {
    
    
        console.log('App Launch')
        if(options.query && options.query.qrCode){
    
    
            this.globalData.qrCode =  options.query.qrCode
        }
    },

2. Parse parameters in the page to be redirected

   onLoad(option) {
         
         
           let qrCode = getApp().globalData.qrCode;
           if (qrCode){
         
         
            	//支付宝扫描二维码进来的
               this.zfbObj = this.getUrlParam(qrCode)
           }
           if(option.q){
         
         
               //微信扫描二维码进来的
               let url = decodeURIComponent(option.q)
               let obj = this.getUrlParam(url)
               this.wechartObj = obj
          }
    }
    methods: {
         
         
    	 getUrlParam(url){
         
         
            let params = url.split("?")[1].split("&");
            let obj = {
         
         };
            params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
            return obj
        },
    }