My small program journey 11: ordinary QR code supports wechat, nailing and Alipay code scanning to open small programs at the same time

Have you ever wondered how the applet is opened when a restaurant scans the code to order? How does the merchant confirm the table number? Why can some wechat codes and Alipay codes be scanned?

This article will introduce you how to use QR code to realize multi scan of one code

1, Rule setting of wechat, nailing and Alipay code scanning and opening applet

1. Wechat

Official document address: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

See how to configure the wechat code scanning and opening applet: https://ata.alibaba-inc.com/articles/226107

(1) Opening mode

  • Official documents are as follows:
    • Since may2017, wechat client supports QR code matching according to "sub path" rules. If the original QR code is linked as http://www.qq.com/a/123456 Where 12345 is a business parameter, rules can be configured http://www.qq.com/a/ Scan code to open the applet.
  • Explain and add:
    • The wechat applet needs a domain name and supports http/https to scan the code. You can't enter it randomly, that is, it's impossible to configure the IP address;
    • The link must be configured according to its rules, otherwise it cannot be opened. There is a hidden problem here. A rule can only open one page. Rules and pages are one-to-one corresponding, and the maximum number of rules is 100;
    • When scanning the code, wechat will not call your server interface, but will directly open the applet. However, when configuring rules, you need to add a verification file. My approach is to write an interface consistent with the rules to directly return the contents of the verification file. This interface function is not only that, but will be summarized in detail later;

(2) Complete configuration interface

2. Nail nail

Official document address: https://open.dingtalk.com/document/orgapp-client/scheme-of-mini-programs

(1) Opening mode

The nailing applet can be opened simply through the applet schema. The configuration is as follows:

dingtalk://dingtalkclient/action/open_micro_app?corpId=%s&appId=%s&page=%s

(2) Precautions

  • This link is a general link. To open the specified applet, you need to configure the appid parameter;
  • Nailing applets are differentiated by enterprises, that is, applets under enterprise A. if users are not in enterprise a, they cannot be opened. I will introduce this problem separately below;
  • Because the "/" symbol exists in the page path, the parameters in the schema need to be escaped, otherwise an error will be reported;

3. Alipay

Official document address: https://opendocs.alipay.com/mini/03cj40

(1) Opening mode

Alipay applet is also opened through schema configuration. The configuration is as follows:

alipays://platformapi/startapp?appId=%s&page=%s

2, How to carry parameters when scanning wechat, dingpin and Alipay codes

1. Wechat

(1) Parameter carrying

First, carry parameters through the path, for example http://www.qq.com/123456 Of which 123456 can be used as a parameter

Second, through "?" Carry parameters, such as http://www.qq.com/aa?param1=111 The

(2) Page acquisition parameters

Page({
  onLoad(query) {
    const q = decodeURIComponent(query.q) // Get the original link content of the QR code
    const scancode_time = parseInt(query.scancode_time) // Obtain the scanning time of the user UNIX time stamp
  }
})

2. Nail nail

Directly on the page, for example: /Index/index?id=2

3. Alipay

Same nail

3, Features of wechat, dingpin and Alipay scanning code

1. Nailing and Alipay applets scan codes in the same way. You can open applets using schema, while wechat applets use rule matching;

2. The nailing applet has the problem of enterprise isolation. If the user is not in the current enterprise, the applet cannot be opened;

3. The schema of nailing and Alipay applets is long, so it is not recommended to use the schema to generate a two-dimensional code, otherwise the code will be very dense and difficult to scan;

4. The wechat applet has determined which applet it is when configuring the code scanning rules, while nailing and Alipay are determined through AppID parameters;

5. The wechat applet needs to verify the file when configuring the code scanning rules, while the nailing and Alipay applets do not;

6. On the whole, the implementation of nailing and Alipay applet is relatively simple, and the implementation of wechat applet scanning code is relatively complex;

4, Realize multi code integration

1. Principle of code scanning

Before realizing the code scanning function, we need to know the principle of code scanning. In wechat, Alipay and nailpin, there is a built-in exclusive browser. The essence of QR code is a link. The action of scanning the code is to enter the link in the browser and click search.

According to this principle, we can draw a conclusion that the code scanning action can directly call the background interface. Therefore, we only need to unify the code scanning interfaces of these terminals, so we can realize multiple scanning for one code.

2. Function realization

(1) Implementation ideas

We know from the first chapter that the opening logic of nailing and Alipay is simple. Just configure the schema; Wechat calls the interface only once during configuration, so the content of the verification file is returned. The realization idea is:

(2) Background code

/**
     * Scan code to open various small programs
     *
     * @param bizType Business type
     * @param param1  Parameter 1
     * @param param2  Parameter 2
     *                ...
     * @return
     */
    @GetMapping("/scan/{bizType}")
    public Object scan(
            @PathVariable(name = "bizType") String bizType,
            @RequestParam(required = false) String param1,
            @RequestParam(required = false) String param2) {
        //If it is a wechat verification file request, it is generally http://www.test.com/scan/xxx.txt format
        //This parameter will occupy bizType parameter
        if (bizType.contains(".txt")) {
            //Directly return the content of the corresponding verification file
            return "xxx";
        }
        //Generated if it is a request from nailing or Alipay schema
        ModelAndView modelAndView = new ModelAndView("scan");
        //Get the AppId,Can be written in the configuration file
        String dingAppId = "xxx";
          //Get nail tissue corpId,Can be written in the configuration file
          String corpId = "xxx";
        //Generate pinned schema
        String dingTalkSchema = "dingtalk://dingtalkclient/action/open_micro_app?corpId="+corpId+"&appId=" + dingAppId + "&page=pages/Index/index?param1=" + param1 + "&param2=" + param2;
        modelAndView.addObject("dingTalkSchema", dingTalkSchema);
      
        //Get the information of Alipay applet AppId,Can be written in the configuration file
        String alipayAppId = "xxx";
        //Generate Alipay's schema
        String alipaySchema = "alipays://platformapi/startapp?appId=" + alipayAppId + "&page=pages/Index/index?param1=" + param1 + "&param2=" + param2;
        modelAndView.addObject("dingTalkSchema", alipaySchema);

        return modelAndView;
    }

(3) Scan VM template

<script>
    window.dingTalkSchema = '${dingTalkSchema}'
    window.alipaySchema = '${alipaySchema}'
    //Determine the current browser kernel
    var userAgentStr = window.navigator.userAgent;
    if (/AlipayClient/.test(userAgentStr)) {
        console.log('Alipay(Alipay)');
        window.location.href = window.alipayPage
    } else if (/DingTalk/.test(userAgentStr)) {
        console.log('DingTalk(Nail nail)');
        window.location.href = window.dingTalkPage
    }
</script>

(4) Solve the problem of enterprise isolation of nailing applet

It is said that if the user is not in the target enterprise, the applet cannot be opened. So in order to optimize the user experience, we can modify the following process:

 

This process can be implemented through js code. The logic is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Scheme 2: the method relies on jquery library-->
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
    <script>

    </script>
</head>
<style>
</style>
<body>
</body>
<script>
    window.corpId = '${corpId}'
    window.appId = '${appId}'
    window.page = '${page}'
    dd.ready(function () {
        dd.runtime.permission.requestAuthCode({
            corpId: window.corpId,
            onSuccess: function (result) {
                dd.biz.navigation.replace({
                    url: "dingtalk://dingtalkclient/action/open_micro_app?corpId=" + window.corpId + "&appId=" + window.appId + "&page=" + window.page,
                    onSuccess: function (res) {
                        // Callback on successful call
                        console.log(res)
                    },
                    onFail: function (err) {
                        // Callback on call failure
                        console.log(err)
                    }
                });
            },
            onFail: function (err) {
                //At present, only words can be used for judgment
                if (err.errorMessage.indexOf('The user is not in the current enterprise') != -1) {
                    dd.biz.navigation.replace({
                        url: "https://wx-in-i.dingtalk.com/invite-page/weixin.html?bizSource=____source____&corpId=" + window.corpId,
                        onSuccess: function (res) {
                            // Callback on successful call
                            console.log(res)
                        },
                        onFail: function (err) {
                            // Callback on call failure
                            console.log(err)
                        }
                    });
                } else {
                    dd.biz.navigation.replace({
                        url: "dingtalk://dingtalkclient/action/open_micro_app?corpId=" + window.corpId + "&appId=" + window.appId + "&page=" + window.page,
                        onSuccess: function (res) {
                            // Callback on successful call
                            console.log(res)
                        },
                        onFail: function (err) {
                            // Callback on call failure
                            console.log(err)
                        }
                    });
                }
            }
        })
    });
</script>
</html>

 

Tags: Mini Program

Posted by xkaix on Tue, 31 May 2022 11:58:59 +0530