This article describes the function of long pressing and clicking to identify the QR code in WeChat mini program webview. Share it for your reference, as follows:
Scenario: WeChat applet, using webview control. Requirements: After clicking on the image, long pressing on the image will appear "Identify QR Code"
1. JS code:
<script src="/open/js/jweixin-1.2."></script> <script type="text/javascript"> $(function(){ var returnData = false; $.ajax({ type : "get", url : '/m/', data : [], async : false, success: function(data,textStatus,jqXHR){ returnData = data; //(returnData); } });//end ajax var returnData = eval('(' + returnData + ')'); (returnData); var appId = ; var timestamp = ; var nonceStr = ; var signature = ; ({ debug: true, //It is recommended to start the debugging phase appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ /* * All APIs to be called must be added to this list * Here we take the image interface as an example */ "chooseImage", "previewImage", "uploadImage", "downloadImage", "scanQRCode" ] }); (function() { //alert(3); ({ jsApiList : ['scanQRCode','previewImage'], success : function(res) { } }); $("img").click(function(){ var url = "/"+$(this).attr("src"); ({ current: url, // http link for the currently displayed image urls: [url] // List of pictures that need to be previewed }); }); }); (function(res){ // If the config information verification fails, an error function will be executed. If the signature expires, the verification will fail. For specific error messages, you can open the debug mode of config to view, or you can view it in the returned res parameter. For SPA, you can update the signature here. (res); }); }); </script>
2. Server code (get config configuration information):
<?php date_default_timezone_set("Asia/Shanghai"); $jssdk = new Jssdk(); $signPackage = $jssdk->getSignPackage(); echo json_encode($signPackage);exit; class Jssdk { private $_CI; private $appId; private $appSecret; public function __construct($appId='wx666666', $appSecret='ee32') { $this->appId = $appId; $this->appSecret = $appSecret; } public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket(); // Note that URLs must be obtained dynamically, and cannot be hardcoded. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $timestamp = time(); $nonceStr = $this->createNonceStr(); // The order of parameters here must be sorted in ascending order of key value ASCII code $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string, 'jsapiTicket' =>$jsapiTicket, ); return $signPackage; } private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } private function getJsApiTicket() { // jsapi_ticket should be stored and updated globally, the following code is written to the file for example $data = $this->get_php_file("jsapi_ticket"); //echo $data['expire_time'].'------'.time(); //print_r($data);exit; if (!isset($data['jsapi_ticket']) || (isset($data['expire_time']) && $data['expire_time'] < time())) { //echo 1111; $accessToken = $this->getAccessToken(); // If it is a corporate account, use the following URL to obtain the ticket // $url = "/cgi-bin/get_jsapi_ticket?access_token=$accessToken"; $url = "/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; //echo $url; $res = json_decode($this->httpGet($url), true); $ticket = isset($res['ticket']) ? $res['ticket'] : false; if ($ticket) { $data['expire_time'] = time() + 7160; $data['token_value'] = $ticket; $this->set_php_file("jsapi_ticket", $data); } } else { //echo 22222; $ticket = $data['jsapi_ticket']; } return $ticket; } public function getAccessToken() { // access_token should be stored and updated globally. The following code is written to the file for example $data = $this->get_php_file("access_token"); if (!isset($data['access_token']) || (isset($data['expire_time']) && $data['expire_time'] < time())) { // If it is an enterprise account, use the following URL to obtain access_token // $url = "/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret"; $url = "/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); //var_dump($res);exit; $access_token = $res->access_token; if ($access_token) { $data['expire_time'] = time() + 7160; $data['token_value'] = $access_token; $this->set_php_file("access_token", $data); } } else { $access_token = $data['access_token']; } return $access_token; } private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); // To ensure the security of data transmission between a third-party server and a WeChat server, all WeChat interfaces are called using https, and the following 2 lines of code must be used to open SSL security verification. // If the code fails to verify here during deployment, please go to /ca/ to download the new certificate discrimination file. curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; } private function get_php_file($token_name) { if(file_exists($token_name)) return false; return json_decode(file_get_contents($token_name), true); } private function set_php_file($token_name, $data) { $fp = fopen($token_name, "w"); fwrite($fp, "<?php exit();?>" . json_encode($data)); fclose($fp); } }
Here I recommend an online tool with similar functions for your reference:
Online QR code decoding recognition tool:
http://tools./transcoding/trans_qrcode
I hope this article will be helpful to everyone’s WeChat mini program development.