1 首页 index.html

  1. <li id="html/barcode.html" onclick="clicked(this.id)">
  2.         <span class="item">Barcode
  3.           <div class="chs">二维码扫描</div>
  4.         </span>
     </li>

2 二维码页面：html/barcode.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6.     <meta name="HandheldFriendly" content="true"/>
  7.     <meta name="MobileOptimized" content="320"/>
  8.     <title>Hello H5+</title>
  9.     <script type="text/javascript" src="../js/common.js"></script>
  10.     <script type="text/javascript">
  11.     var ws=null,wo=null;
  12.     var scan=null,domready=false;
  13.     // H5 plus事件处理
  14.     function plusReady(){
  15.         if(ws||!window.plus||!domready){
  16.             return;
  17.         }
  18.         // 获取窗口对象
  19.         ws=plus.webview.currentWebview();
  20.         wo=ws.opener();
  21.         // 开始扫描
  22.         ws.addEventListener('show', function(){
  23.             scan=new plus.barcode.Barcode('bcid');
  24.             scan.onmarked=onmarked;
  25.             scan.start({conserve:true,filename:'_doc/barcode/'});
  26.         }, false);
  27.         // 显示页面并关闭等待框
  28.         ws.show('pop-in');
  29.  
  30.     }
  31.     if(window.plus){
  32.         plusReady();
  33.     }else{
  34.         document.addEventListener('plusready', plusReady, false);
  35.     }
  36.     // 监听DOMContentLoaded事件
  37.     document.addEventListener('DOMContentLoaded', function(){
  38.         domready=true;
  39.         plusReady();
  40.     }, false);
  41.     // 二维码扫描成功
  42.     function onmarked(type, result, file){
  43.         switch(type){
  44.             case plus.barcode.QR:
  45.             type = 'QR';
  46.             break;
  47.             case plus.barcode.EAN13:
  48.             type = 'EAN13';
  49.             break;
  50.             case plus.barcode.EAN8:
  51.             type = 'EAN8';
  52.             break;
  53.             default:
  54.             type = '其它'+type;
  55.             break;
  56.         }
  57.         result = result.replace(/\n/g, '');
  58.  
  59.         //分析扫描结果：是URL就跳转 ，不是就提示
  60.         if(result.indexOf('http://')==0  || result.indexOf('https://')==0){
  61.             plus.nativeUI.confirm(result, function(i){
  62.                 if(i.index == 0){
  63.  
  64.                     back();//返回上一页
  65.                     plus.runtime.openURL(result);
  66.                 }else{
  67.                     back();//返回上一页
  68.                 }
  69.             }, '', ['打开', '取消']);
  70.         } else{
  71.             back();//返回上一页
  72.             plus.nativeUI.alert(result);
  73.         }
  74.     }
  75.     // 从相册中选择二维码图片
  76.     function scanPicture(){
  77.         plus.gallery.pick(function(path){
  78.             plus.barcode.scan(path,onmarked,function(error){
  79.                 plus.nativeUI.alert('无法识别此图片');
  80.             });
  81.         }, function(err){
  82.             plus.nativeUI.alert('Failed: '+err.message);
  83.         });
  84.     }
  85.  
  86.     </script>
  87.         <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  88.         <style type="text/css">
  89.             #bcid {
  90.                 width: 100%;
  91.                 position: absolute;
  92.                 top: 0px;
  93.                 bottom: 44px;
  94.                 text-align: center;
  95.             }
  96.             .tip {
  97.                 color: #FFFFFF;
  98.                 font-weight: bold;
  99.                 text-shadow: 0px -1px #103E5C;
  100.             }
  101.             footer {
  102.                 width: 100%;
  103.                 height: 44px;
  104.                 position: absolute;
  105.                 bottom: 0px;
  106.                 line-height: 44px;
  107.                 text-align: center;
  108.                 color: #FFF;
  109.             }
  110.             .fbt {
  111.                 width: 50%;
  112.                 height: 100%;
  113.                 background-color: #007500;
  114.                 float: left;
  115.             }
  116.             .fbt:active {
  117.                   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  118.                 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  119.             }
  120.         </style>
  121.     </head>
  122.     <body style="background-color: #000000;">
  123.         <div id="bcid">
  124.             <div style="height:40%"></div>
  125.             <p class="tip">...载入中...</p>
  126.         </div>
  127.         <footer>
  128.             <div class="fbt" onclick="back()">取　 消</div>
  129.             <div class="fbt" onclick="scanPicture()">从相册选择二维码</div>
  130.         </footer>
  131.  
  132.     </body>
  133. </html>

MUI 二维码扫描并跳转的更多相关文章

  1. mui 二维码扫描功能

    mui 扫一扫识别二维码 以及多次扫码后从结果页返回时黑屏问题解决  扫一扫页面全部代码 <!doctype html><html>     <head>      ...

  2. iOS - 二维码扫描和应用跳转

    序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦, ...

  3. iOS开发-二维码扫描和应用跳转

    iOS开发-二维码扫描和应用跳转   序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...

  4. 微信小程序 空白页重定向---二维码扫描第二次进入 不经过onLoad过程解析scene参数，跳转问题

    在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触 ...

  5. [Unity3D]自制UnityForAndroid二维码扫描插件

    一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...

  6. Android仿微信二维码扫描

    转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...

  7. iOS二维码扫描IOS7系统实现

    扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...

  8. Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明出处:http://blog.csdn.net/xiaanming/article/detail ...

  9. android 二维码扫描

    了解二维码这个东西还是从微信 中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候, 老板说要加上二维码扫描功 ...

随机推荐

  1. C语言 · 回形取数

    基础练习 回形取数   时间限制:1.0s   内存限制:512.0MB        问题描述 回形取数就是沿矩阵的边取数,若当前方向上无数可取或已经取过,则左转90度.一开始位于矩阵左上角,方向向 ...

  2. [状态机]嵌入式设计模式：有限状态自动机的C语言实现

    转自:http://www.cnblogs.com/autosar/archive/2012/06/22/2558604.html 状态机模式是一种行为模式,在<设计模式>这本书中对其有详 ...

  3. java执行jar包

    一般运行包含manifest的jar包,可以使用 java -jar <jar-file-name>.jar 如果jar里没有 manifest,则可以使用 java -cp foo.ja ...

  4. FTP原理

    1.1.1 ftp的主动模式和被动模式 扩展重要. FTP是仅基于TCP的服务,不支持UDP. 与众不同的是FTP使用2个端口,一个数据端口和一个命令端口(也可叫做控制端口).通常来说这两个端口是21 ...

  5. MongoDB Shell 了解使用

    配置环境变量 WIN10系统:右键单击"此电脑"--属性--高级系统设置--高级--环境变量,添加C:\Program Files\MongoDB\Server\3.0\bin 如 ...

  6. js学习系列之-----apply和call

    apply call 从字面意思就看出来,申请请,呼叫. 打个比方就是别人有什么功能,你向别人,申请 呼叫 一下,哥们拿你的功能用一下,而apply 和call就是实现这样的功能 apply 和cal ...

  7. AWS SDK for C++调用第三方S3 API

    这里介绍AWS SDK for C++ 1.0.x版本,比如下载: https://github.com/aws/aws-sdk-cpp/archive/1.0.164.tar.gz 环境:RHEL/ ...

  8. Java JNI初探

    ---说明,之前直接百度出来的例子,照猫画虎.没想到的是这例子居然直接来自百度百科,写着写着就囧了.. ---anyway,写完了就当是给自己看吧. 同事求助,就看了一下,照猫画虎一番,略有所得. J ...

  9. e578. Setting the Clipping Area with a Shape

    This example demonstrates how to set a clipping area using a shape. The example sets an oval for the ...

  10. ffmpeg h264+ts +udp传输

    http://bbs.csdn.net/topics/370246456 http://1229363.blog.163.com/blog/static/19743427201001244711137 ...