analyticCode

功能描述

  1. 利用qrcode.js制作的二维码解析器，可以用该插件制作长按识别二维码功能

依赖的模块

  1. 无依赖模块

安装

  1. 无需安装

快速使用

  1. 1，扩展了移动端‘长按触发事件’
  2. //扩展移动端长按事件
  3. $.fn.longPress = function (fn) {
  4. 　　let timer = null;
  5. 　　let $this = this;
  6. 　　for (let i = 0; i < $this.length; i++) {
  7. 　　$this[i].addEventListener('touchstart', function (event) {
  8. 　　timer = setTimeout(fn, 600);
  9. 　　}, false);
  10. 　　$this[i].addEventListener('touchend', function (event) {
  11. 　　clearTimeout(timer);
  12. 　　}, false);
  13. 　　}
  14. }
  15. 2，添加了触发事件的动作‘弹出框’
  16. $('#showImg').longPress(function(){
  17.     let str = '
  18.     '+
  19.     '识别二维码'+
  20.     '
  21.     弹出地址
  22.     '+
  23.     '当前窗口打开地址
  24.     '+
  25.     '
  26.     新窗口打开地址
  27.     '+
  28.     '';
  29.     $('#analytic').append(str);
  30. });
  31. 3，添加了弹出框不同参数的点击事件
  32. function alertChange(param) {
  33.     if (param === 1) {
  34.         getUrl(document.getElementById('showImg'), 'img-url');
  35.     } else if (param === 2) {
  36.         analyticCode.getUrl('img-url', document.getElementById('showImg'), function(url) {
  37.             alert(url);
  38.         });
  39.     } else if (param === 3) {
  40.         analyticCode.getUrl('img-url', document.getElementById('showImg'), function(url) {
  41.             window.location.href = url;
  42.         });
  43.     } else if (param === 4) {
  44.         analyticCode.getUrl('img-url', document.getElementById('showImg'), function(url) {
  45.             window.open(url);
  46.         });
  47.     } else {
  48.         return;
  49.     }
  50.     $('#addDiv').remove();
  51. }
  52. analyticCode.getUrl(param,e,function(url1,url2){
  53.     e.nextElementSibling.innerHTML = url1;
  54.     e.previousElementSibling.src = url2;
  55. });

特别说明

  1. param:是解析形式，分别有‘img-url’（长按解析二维码），‘file-url’（上传图片解析二维码）
  3. e:是当前元素，长按时为当前图片，上传时为input
  5. callback:是解析后将解析的内容在函数中返回，如果是上传解析，同时会返回上传图片的地址，在callback中操作当前页面