微信小程序webview实现长按点击识别二维码功能示例

2023-08-30 11:05:05 161

本文实例讲述了微信小程序webview实现长按点击识别二维码功能。分享给大家供大家参考，具体如下：

场景：微信小程序，使用webview控件。需求：点击图片后长按图片出现“识别二维码”

1、JS代码：



$(function(){
varreturnData=false;
$.ajax({
type:"get",
url:'http://app.ka.com/m/config.php',
data:[],
async:false,
success:function(data,textStatus,jqXHR){
returnData=data;
//console.log(returnData);
}
});//endajax
varreturnData=eval('('+returnData+')');
console.log(returnData);
varappId=returnData.appId;
vartimestamp=returnData.timestamp;
varnonceStr=returnData.nonceStr;
varsignature=returnData.signature;
wx.config({
debug:true,//调试阶段建议开启
appId:appId,
timestamp:timestamp,
nonceStr:nonceStr,
signature:signature,
jsApiList:[
/*
*所有要调用的API都要加到这个列表中
*这里以图像接口为例
*/
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage",
"scanQRCode"
]
});
wx.ready(function(){
//alert(3);
wx.checkJsApi({
jsApiList:['scanQRCode','previewImage'],
success:function(res){
}
});
$("img").click(function(){
varurl="http://app.ka.com/"+$(this).attr("src");
wx.previewImage({
current:url,//当前显示图片的http链接
urls:[url]//需要预览的图片http链接列表
});
});
});
wx.error(function(res){
//config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log(res);
});
});

2、服务端代码（获取config配置信息）：

getSignPackage();
echojson_encode($signPackage);exit;
classJssdk
{
private$_CI;
private$appId;
private$appSecret;
publicfunction__construct($appId='wx666666',$appSecret='ee32'){
$this->appId=$appId;
$this->appSecret=$appSecret;
}
publicfunctiongetSignPackage(){
$jsapiTicket=$this->getJsApiTicket();
//注意URL一定要动态获取，不能hardcode.
$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();
//这里参数的顺序要按照key值ASCII码升序排序
$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;
}
privatefunctioncreateNonceStr($length=16){
$chars="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str="";
for($i=0;$i<$length;$i++){
$str.=substr($chars,mt_rand(0,strlen($chars)-1),1);
}
return$str;
}
privatefunctiongetJsApiTicket(){
//jsapi_ticket应该全局存储与更新，以下代码以写入到文件中做示例
$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']getAccessToken();
//如果是企业号用以下URL获取ticket
//$url="https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
$url="https://api.weixin.qq.com/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{
//echo22222;
$ticket=$data['jsapi_ticket'];
}
return$ticket;
}
publicfunctiongetAccessToken(){
//access_token应该全局存储与更新，以下代码以写入到文件中做示例
$data=$this->get_php_file("access_token");
if(!isset($data['access_token'])||(isset($data['expire_time'])&&$data['expire_time']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;
}
privatefunctionhttpGet($url){
$curl=curl_init();
curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);
curl_setopt($curl,CURLOPT_TIMEOUT,500);
//为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
//如果在部署过程中代码在此处验证失败，请到http://curl.haxx.se/ca/cacert.pem下载新的证书判别文件。
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;
}
privatefunctionget_php_file($token_name){
if(file_exists($token_name))returnfalse;
returnjson_decode(file_get_contents($token_name),true);
}
privatefunctionset_php_file($token_name,$data){
$fp=fopen($token_name,"w");
fwrite($fp,"".json_encode($data));
fclose($fp);
}
}

这里再为大家推荐一款功能相似的在线工具供大家参考：

在线二维码解码识别工具：
http://tools.jb51.net/transcoding/trans_qrcode

希望本文所述对大家微信小程序开发有所帮助。

微信小程序webview实现长按点击识别二维码功能示例

热门推荐

随机推荐