微信小程序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 相关文章推荐
Javascript排序算法之计数排序的实例
Apr 05 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
微信小程序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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
简单解析Django框架中的表单验证
2015/07/17 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
学python需要去培训机构吗
2020/07/01 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
通俗讲解python 装饰器
2020/09/07 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
优秀毕业生事迹材料
2014/02/12 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
初中英语演讲稿
2014/04/29 职场文书
幼儿园运动会口号
2014/06/07 职场文书
体育运动会广播稿
2014/10/05 职场文书
孔繁森观后感
2015/06/10 职场文书