微信小程序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 相关文章推荐
ajax中get和post的说明及使用与区别
Dec 23 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
angular2使用简单介绍
Mar 01 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
JS实现标签页切换效果
May 04 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
php中上传文件的的解决方案
2018/09/25 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python逆序打印各位数字的方法
2018/06/25 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
Unix如何添加新的用户
2014/08/20 面试题
后勤人员自我鉴定
2013/10/20 职场文书
化学实验员岗位职责
2013/12/28 职场文书
信息技术课后反思
2014/04/27 职场文书
公司委托书格式范文
2014/10/09 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python