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


Posted in Javascript onJanuary 24, 2019

本文实例讲述了微信小程序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 ajax
  var 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×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 应该全局存储与更新,以下代码以写入到文件中做示例
    $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);
  }
}

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

在线二维码解码识别工具:
http://tools.3water.com/transcoding/trans_qrcode

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

Javascript 相关文章推荐
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
javascript元素动态创建实现方法
May 13 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
a标签调用js的方法总结
Sep 05 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 #Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 #Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 #Javascript
记一次vue去除#问题处理经过小结
Jan 24 #Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 #Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 #Javascript
You might like
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
Python中的各种装饰器详解
2015/04/11 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Python实现12306火车票抢票系统
2019/07/04 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python获取引用对象的个数方式
2019/12/20 Python
汽车销售求职自荐信
2013/10/01 职场文书
工程测量与监理专业应届生求职信
2013/11/27 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
小学教师教育随笔
2015/08/14 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL