Detailed explanation of examples of developing QR codes with parameters on WeChat

Recently I have been developing WeChat-related functions for the WeChat PC web page. From a novice’s perspective, the documents of WeChat public accounts are still difficult to understand. Most of the posts found online are basically copies of WeChat public accounts. According to the documents provided on the platform, there are still many pitfalls in the process of developing WeChat QR codes with parameters. I will record my development process in more detail here, hoping it will be helpful to everyone.

I am using the authentication service account for this development.

##1 Access

First enter the WeChat official account-> Basic configuration

The following is the basic configuration page. Fill in the server address in the URL. This address is an interface for accepting WeChat push events. I developed the program using the thinkPHP framework. It is in the Action directory of one of the Modules (Decoration). Create a new class, for example: WechatAction.class.php , and create a new public method in the Action, for example: URLRedirect() , then fill in the URL http://[IP]:[port]/index.php/Decoration/Wechat/UrlRedirect , then fill in the Token, fill in the Token as you like, EncodingAESKey or not, then click Confirm, WeChat will go to this URL Send a get request, which contains many parameters, most of which allow us to check whether the access is requested by the WeChat server. I have not verified it myself. His requirement is that if we check successfully, it will be returned to the get request as it is. A parameter of echostr, the return here is not return, nor ajaxReturn, but use echo. If you develop with thinkPHP, just use echo I('echostr');. Then the interface verification is successful.

2 QR code with parameters Function

There are two types of WeChat QR codes with parameters, one is a temporary QR code and the other is a permanent QR code, but the permanent QR code There is a limit to the number of generated items. The function I want to implement this time is for users to use products on the website without logging in. For example, they can obtain a detailed quotation for a certain product but do not want to register, but they also want to save the quotation. This At that time, the webpage can generate a QR code. As long as the user scans the QR code with WeChat, the official public account will send a graphic message to the user for one day. When the graphic message is clicked, it will be the quotation the user has just obtained, and it can Click to view at any time and share with friends for price comparison. Therefore, the temporary QR code can be used normally.

The above is how I use it. Here is an introduction to the entire interaction process:

When the user scans this QR code, if the user After following the official account, the user will directly enter the conversation page with the official account. The WeChat server will push a message to the server URL we set in the previous step, which can carry a custom parameter. If the user does not follow the official account, the user will first jump to the official account follow page. After the user clicks to follow, he will directly enter the conversation page of the official account. At this time, the WeChat server will also push an event message to the URL we set, carrying We customize parameters, and we can control the next action based on this parameter and event type.

3 Specific development process

##3.1 Get access_token

This access_token is the certificate for our program to call the WeChat interface. The current validity period is 7200 seconds, so we need to update the access_token regularly.

Obtaining method:

方法 ： GET
url ：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

The parameters APPID and APPSECRET are the APPID and APPSECRET of our official account, which can be found in the WeChat official account-> Basic configuration , the following JSON data will be returned if the call is successful:

{"access_token":"ACCESS_TOKEN","expires_in":7200}

Where access_token is the calling interface credential, expire_in is the token validity time.

I personally store the access_token in the database, save the expiration time, and then encapsulate the public function getWechatAccessToken(). Each time, I first check whether the access_token has expired. If it has expired, Then obtain it again, otherwise you can just use the access_token saved in the database. I forgot where I saw it. The number of times this access_token can be obtained every day should be limited. The following is the specific implementation of getWechatAccessToken():

 1 //获取access_token
 2 function getWechatAccessToken(){ 3     $wechatInfo = M('wechat_info')->select(); 4     $wechatInfo = array_reduce($wechatInfo, create_function('$result, $v', '$result[$v["conf_name"]] = $v;return $result;')); 5     $expireTime = $wechatInfo['PUBLIC_WECHAT_ACCESSTOKEN_EXPIRES']['conf_value'];                             //前面不用管，是我数据库相应设置
 6 
 7     if (time() < $expireTime){              //access_token未过期
 8         return $wechatInfo[&#39;PUBLIC_WECHAT_ACCESSTOKEN&#39;][&#39;conf_value&#39;]; 9     }else{                                  //access_token过期，重新获取10         $baseUrl = C(&#39;WECHAT_PUBLIC_GET_ACCESS_TOKEN&#39;);11         $url = str_replace("##APPSECRET##", $wechatInfo[&#39;PUBLIC_WECHAT_APPSECRET&#39;][&#39;conf_value&#39;], str_replace("##APPID##", $wechatInfo[&#39;PUBLIC_WECHAT_APPID&#39;][&#39;conf_value&#39;], $baseUrl));12         $result = file_get_contents($url);13         $result = json_decode($result, true);14 
15         if (array_key_exists(&#39;errorcode&#39;, $result)){        //失败重试一次16             return false;17         }else{18             M(&#39;wechat_info&#39;)->where(array(&#39;conf_name&#39; => &#39;PUBLIC_WECHAT_ACCESSTOKEN&#39;))->save(array(&#39;conf_value&#39; => $result[&#39;access_token&#39;]));19             M(&#39;wechat_info&#39;)->where(array(&#39;conf_name&#39; => &#39;PUBLIC_WECHAT_ACCESSTOKEN_EXPIRES&#39;))->save(array(&#39;conf_value&#39; => time()+$result[&#39;expires_in&#39;]-200));20             return $result[&#39;access_token&#39;];21         }22     }23 }

C('WECHAT_PUBLIC_GET_ACCESS_TOKEN') = https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

After encapsulating this, we can use it with peace of mind every time.

3.2 Create a temporary QR code

3.2.1 Get a ticket

　　　　  请求方式： POST
　　     接口：https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
        POST数据： {"expire_seconds": 604800, "action_name": "QR_SCENE", "action_info": {"scene": {"scene_id": 123}}}

The TOKEN in the interface URL is the access_token we obtained in 3.1. expire_seconds in the post data is the validity time of the QR code, which is up to 30 days. If the action_name is a temporary QR code, it is fixed to QR_SCENE. , scene_id is our custom parameter, it is a 32-bit non-0 integer, I set it as the ID of the order in the application, when the WeChat server pushes the event, it will return this value to the interface we set, and then I will use this It’s worth getting the corresponding order data and displaying it on the web page. This is a later topic.

The following is an encapsulated method to generate a temporary QR code:

//创建临时二维码function getTemporaryQrcode($orderId){    $accessToken = getWechatAccessToken();    $url = str_replace("##TOKEN##", $accessToken, C('WECHAT_PUBLIC_GET_TEMPORARY_TICKET'));    $qrcode = '{"expire_seconds": 1800, "action_name": "QR_SCENE", "action_info": {"scene": {"scene_id": '.$orderId.'}}}';    $result = api_notice_increment($url, $qrcode);    $result = json_decode($result, true);    return urldecode($result['url']);
}

The method api_notice_increment() is I encapsulated a POST method function. I tried many POST methods. Maybe because the WeChat interface has strict restrictions on POST methods and parameters, this wasted a long time. Finally, I found an encapsulated POST method that can be used online. , it is recommended that you try it yourself first. If WeChat returns an error, use this. At least when I tested the WeChat interface, I used postman to test and returned all errors, and it must be a JSON string. It must be a very strict JSON. string. Here is this method:

function api_notice_increment($url, $data){    $ch = curl_init();    $header = "Accept-Charset: utf-8";
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);    $tmpInfo = curl_exec($ch);    if (curl_errno($ch)) {
        curl_close( $ch );        return $ch;
    }else{
        curl_close( $ch );        return $tmpInfo;
    }
}

getTemporaryQrcode() There is a parameter in the configuration file for everyone to see, which is actually the WeChat interface link:

C('WECHAT_PUBLIC_GET_TEMPORARY_TICKET') = https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=##TOKEN##

The return value of this interface is:

{"ticket":"gQH47joAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL2taZ2Z3TVRtNzJXV1Brb3ZhYmJJAAIEZ23sUwMEmm3sUw==","expire_seconds":60,"url":"http:\/\/weixin.qq.com\/q\/kZgfwMTm72WWPkovabbI"}

Where ticket is the voucher we use to make the next call, expire_seconds is the QR code Validity period, url is the link that will be opened after scanning the QR code we generated. So if we implement the method of generating QR code ourselves, we don’t need to make the next call. I stop at this step and directly return the value of the url, and then use the value of this url to generate the QR code and store it locally. Can. You can use phpqrcode to generate QR codes in PHP, which is very easy to use. The next step is also briefly mentioned:

3.2.2 Obtain the QR code address

　　 请求方式： GET
　　 接口：https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET

The return value of this interface is a picture, which can be displayed or downloaded directly. We have used it in detail, so we don’t know how to display it.

3.3 What happens after the user scans the QR code

3.3.1 What happens after the scan What

　　上面提到了，用户扫描我们生成的临时二维码，如果用户未关注公众号，则首先会跳转到公众号的关注页面，点击关注后，会进入公众号的会话页面，同时会给我们设置的接口推送一个事件。如果用户已经关注了，用户微信会直接跳转到公众号会话页面，然后微信服务器会给我们设置的接口推送一个事件。

　　用户关注与否微信服务器给我们推送的事件是差不多的，只是新关注用户推送的事件中scene_id前面会加一个前缀。下面是微信公众平台文档的说明：

　用户未关注时，进行关注后的事件推送

<xml><ToUserName><![CDATA[toUser]]></ToUserName>　　　　　　　　//开发者微信号<FromUserName><![CDATA[FromUser]]></FromUserName>　　　　　　　//发送者账号（openid）<CreateTime>123456789</CreateTime>　　　　　　　　　　　　　　　　//消息创建时间（整型）<MsgType><![CDATA[event]]></MsgType>　　　　　　　　　　　　　　//消息类型 event<Event><![CDATA[subscribe]]></Event>　　　　　　　　　　　　　　//事件类型（subscribe）<EventKey><![CDATA[qrscene_123123]]></EventKey>　　　　　　　　//事件KEY值，qrscene_为前缀，后面为二维码参数值<Ticket><![CDATA[TICKET]]></Ticket>　　　　　　　　　　　　　　　//二维码ticke值，可以用来换取二维码图片</xml>

 　　用户已关注时的事件推送

 <xml><ToUserName><![CDATA[toUser]]></ToUserName>　　　　　　　　//开发者微信号<FromUserName><![CDATA[FromUser]]></FromUserName>　　　　 //发送者账号（openid）<CreateTime>123456789</CreateTime>　　　　　　　　　　　　　//消息创建时间<MsgType><![CDATA[event]]></MsgType>                    //消息类型event<Event><![CDATA[SCAN]]></Event>　　　　　　　　　　　　　　 //事件类型 event<EventKey><![CDATA[SCENE_VALUE]]></EventKey>            //事件key值，是一个32位无符号整数，即创建二维码时的二维码scene_id<Ticket><![CDATA[TICKET]]></Ticket>                     //二维码的ticke，可以用来换取二维码图片</xml>

3.3.2 我们要做些什么

　　我们需要在自己填写的URL接口中接收这个事件，然后拿到我们需要的东西做我们想干的事儿。因为我要实现的功能比较简单，只需要拿到scene_id即可，因为这是我要展示给用户看的订单数据。下面是我写的接收和处理部分，比较简单，主要看一下应该怎么接收微信推送的事件：

public function urlRedirect(){        $postStr = $GLOBALS["HTTP_RAW_POST_DATA"];        $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);        $fromUsername = (string)$postObj->FromUserName;        $EventKey = trim((string)$postObj->EventKey);        $keyArray = explode("_", $EventKey);        if (count($keyArray) == 1){         //已关注者扫描
            $this->sendMessage($fromUsername, $EventKey);
        }else{　　　　　　　　　　　　　　　　　　　//未关注者关注后推送事件
            $this->sendMessage($fromUsername, $keyArray[1]);
        }
    }

　　我没有使用其他参数，只是根据不同的推送事件拿到我想要的订单ID，然后这时候其实相当于你在这里用公众号的客服在跟扫码的这个用户对话，上段代码中调用的sendMessage()是使用客户账号给扫码用户发送一个图文消息，因为我在拿scen_id的同时也拿到了用户的openid，可以利用这个给用户发送消息。

　　下面是 sendMessage() 方法：

//给用户发送图文消息，点击跳转到报价页面
    public function sendMessage($openid,$orderId){        $url = str_replace('##TOKEN##', getWechatAccessToken(), C('WECHAT_SEND_MESSAGE'));        $redirectUrl = str_replace("##ORDERID##", $orderId, str_replace("##OPENID##", $openid, C('WECHAT_REDIRECT_URL_PRE')));        $orderInfo = M('order')->where(array('orderid' => $orderId))->field(array('totalMoney', 'savedMoney', 'roomarea'))->find();        $description = str_replace("##ROOMAREA##", intval($orderInfo['roomarea'] * 1.25), C('WECHAT_MESSAGE_BRIEF'));        $description = str_replace("##TOTALBUDGET##", $orderInfo['totalMoney'], $description);        $description = str_replace("##MARKETBUDGET##", $orderInfo['totalMoney']+$orderInfo['savedMoney'], $description);        $description = str_replace("##SAVEMONEY##", $orderInfo['savedMoney'], $description);        $dataStr = '{"touser":"' . $openid . '","msgtype":"news","news":{"articles":[{"title":"' . C('WECHAT_MESSAGE_TITLE') .
            '","description":"' . $description . '","url":"' . $redirectUrl . '","picurl":"' . C('WECHAT_MESSAGE_PICURL') . '""}]}}';
        api_notice_increment($url, $dataStr);
    }

　　其中  C('WECHAT_SEND_MESSAGE') = 'https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=##TOKEN##'  至于下面的一大段str_replace，就是在组给用户发送的文字而已，需要注意$dataStr的格式，这里面要求JSON字符串比较严格，必须所有的字符串都用双引号括起来。微信接口对POST参数的限制真心严格。

　　下面是微信公众平台开发者文档中要求发送图文消息的POST data格式：

{
    "touser":"OPENID",
    "msgtype":"news",
    "news":{
        "articles": [
         {
             "title":"Happy Day",
             "description":"Is Really A Happy Day",
             "url":"URL",
             "picurl":"PIC_URL"
         },
         {
             "title":"Happy Day",
             "description":"Is Really A Happy Day",
             "url":"URL",
             "picurl":"PIC_URL"
         }
         ]
    }
}

　　其中url是用户点击这个消息之后打开的地址，这个时候我就组了一个自己网站的地址，是一个get请求地址，里面携带参数是用户的openid和订单id，这样用户点击开图文消息就可以看到自己刚才下单的内容了，因为需要在网页上展示用户的微信头像和昵称，所以我把openid也放到参数里，在页面加载前先拿到用户的个人信息和订单数据，再展示网页。这样流程：用户未登录下单 -> 生成微信二维码 -> 用户扫码关注公众号 -> 查看订单详细信息 就完成了。而且因为这个图文消息打开后的链接携带的参数是这个用户的额openid和其下单的订单ID，不管分享到哪儿，用什么浏览器打开都是可以访问的，且展示的也是这个用户的头像和昵称信息，这也是我要实现的一个效果。

The above is the detailed content of Detailed explanation of examples of developing QR codes with parameters on WeChat. For more information, please follow other related articles on the PHP Chinese website!