微信小程序webview识别二维码长按点击识别二维码

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

1、JS代码：


<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
$(function(){var returnData = 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);}});//end ajaxvar returnData = eval('(' + returnData + ')');console.log(returnData);var appId      = returnData.appId;var timestamp   = returnData.timestamp;var nonceStr    = returnData.nonceStr;var signature    = 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(){var url = "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);});});
</script>

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

<?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();// 注意 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&timestamp=$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 应该全局存储与更新，以下代码以写入到文件中做示例$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();// 如果是企业号用以下 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 {//echo 22222;$ticket = $data['jsapi_ticket'];}return $ticket;}public function getAccessToken() {// access_token 应该全局存储与更新，以下代码以写入到文件中做示例$data = $this->get_php_file("access_token");if (!isset($data['access_token']) ||  (isset($data['expire_time']) && $data['expire_time'] < time())) {// 如果是企业号用以下URL获取access_token// $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";$url = "https://api.weixin.qq.com/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);// 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用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;}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);}}
/* End of file Jssdk.php */

微信小程序webview识别二维码长按点击识别二维码相关推荐

微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
关于微信小程序webview的使用
小程序微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.同时提供一系列工具帮助开发者快速接入并完成小程序开发.关于如何注册配置就不多言了,本文主要 ...
开发那点事（十五）微信小程序webView首次进入白屏优化方案
写在前面的话公司最近项目已经进入使用阶段,从用户那边反应过来的问题,说小程序打开太慢,中间白屏几秒,于是想办法来做一个等待效果. 优化后效果具体实现(已vue为例) 按照正常的思路,路由按需加载. ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
微信小程序web-view公众号与小程序支付的切换使用
微信小程序web-view公众号与小程序支付间的切换使用最近小程序开放了新功能,支持内嵌网页.html写的网页,官网,网站,运行在浏览器上的,有域名的那种,可以内嵌到小程序里了! 那么这意味着什么呢 ...
微信小程序 - webview 的使用
为什么80%的码农都做不了架构师?>>> 使用 webview 可以让小程序内嵌网页,利用这个功能可以实现些在微信小程序环境中受到局限的功能,当然也有一些坑,在此分享下. 介绍 ...

微信小程序webview识别二维码长按点击识别二维码

微信小程序webview识别二维码长按点击识别二维码相关推荐

最新文章

热门文章