ic卡读卡器web开发静态调用ocx和动态调用ocx的区别

Posted 2023-04-09

WebApp是一种新出现的基于WEB形式的类应用程序，运行在高端的移动终端设备上，其应用范围会越来越广。

开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。

WebApp与Native App有何区别呢？

Native App：

1、开发成本非常大。
一般使用的开发语言为JAVA、C++、Objective-C。

2、更新体验较差、同时也比较麻烦
每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。

3、非常酷
因为native app可以调用ios中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果

4、Native app是被Apple认可的
Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。

Web App：
1、开发成本较低
使用html5 + CSS3 + js 等web开发技术就可以轻松的完成web app的开发。效果上面能够完全模拟传统应用程序效果。

2、升级较简单
由于不需要通过苹果商店发布，所以升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉

3、维护比较轻松
和一般的web一样，维护比较简单，它其实就是一个站点

Webapp说白了就是一个针对Iphone、android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、javascript，服务端技术JAVA、php、ASP。

当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用 HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–webapp的布局方式和技术。

在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发 Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有 所了解，那现在就开始往下阅读吧……

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
2 <meta content=”yes” name=”apple-mobile-web-app-capable” />
3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
4 <meta content=”telephone=no,email=no” name=”format-detection” />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
user-scalable定义是否可缩放（0为不缩放），使页面固定设备上面的大小。
（注意：据说HTC G7自身系统浏览器不支持这一条规则，能对页面进行放大，一旦放大导致页面布局错乱，解决方法：定义页面的最小宽度 min-width，bodymin-width: 300px;）
iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏。<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

第二个meta标签是ios设备(不只iphone)中的safari私有meta标签，它表示：允许全屏模式浏览，开启对Web Aapp程序的支持。；

第三个meta标签也是ios系统的私有标签，它指定在web app状态下，ios设备中顶端的状态条的颜色； 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

第四个meta标签表示：使设备浏览网页时对数字不启用电话功能（不同设备解释不同，itouch点击数字为存入联系人，iphone为拨打电话），忽略将页面中的数字识别为电话号码。
若需要启用电话功能将telephone=yes即可，具体调用格式可以这样书写代码<a href=”13800138000″>Call Me</a>，若在页面上面有google maps, iTunes和youtube的链接会在ios设备上打开相应的程序组件。

2、HTML5标签的使用
在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

3、放弃CSS float属性
在项目开发过程中可以会遇到内容排列排列显示的布局(见下图)，假如你遇见这样的视觉稿，哥建议你放弃float，可以直接使用display:block;

4、利用CSS3边框背景属性
这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用 CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂 的样式属性。

5、块级化a标签
请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

6、自适应布局模式
在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、 chrome都能够正常的显示，你无需再次考虑设备的分辨率。 参考技术A IC卡读卡器WEB开发提供的SDK中包含了yw60x.ocx这个控件，这个空间在IE浏览器下可以采用动态调用和静态调用两种方式，但是不管何种调用方式，前提是必须安装并注册YW60x.ocx文件。
静态调用方式：
采用yw60x.ocx的classid在htm调用
<object id="YOWORFIDReader"
classid="clsid:167E1838-7388-4A24-86DE-985B91F0FFBF">
</object>
然后再javascript或者vbscript中通过id="YOWORFIDReader"索引来找到控件，并且调用该控件的属性和方法。

动态调用方式：
采用yw60x.ocx的类名在脚本中调用
obj = new ActiveXObject("YW60X.yw60xCtrl.1");

yw60x.ocx控件的类名为：YW60X.yw60xCtrl.1，通过以上语句可以创建这个控件，并且在以后的校本中可以通过obj来调用该控件的属性和方法。

BS结构下如何开发跨web浏览器的IC卡读卡器程序

在BS结构的程序中，如何开发出跨web浏览器的IC卡读卡器程序呢？

一般来说在BS结构的程序中使用物理硬件会有很多的限制，通过activex技术解决的ocx控件只能在IE上使用，不能在chrome和firefox中使用。友我科技提供的RFID读写器云服务彻底解决了这个问题，他不仅可以在IE使用，也可以在chrome，firefox等浏览器上使用。

友我科技rfid读写器云服务的优势：
1、该系统在单机，局域网，互联网都可以使用，只要客户端安装云服务程序就行。
2、客户端同时支持net frame3.5和net frame4.0及以上。
3、客户端兼容IE，Chrome，Firefox，Safari，Opeara及其相关内核的浏览器。
4、与网页编程语言无关，不管是asp,php,jsp,aspx,html,都支持。
5、客户端采用事件驱动（回调函数），无需占用界面线程的时间。
6、客户端支持多种IC卡读卡器，可以根需求据功能自由选择。
7、单独支持64位和128位的DES加解密服务。
8、支持64位或者128位的DES加解密读写数据块，流程更少，效率更高，数据更安全。

对IC卡操作只需要简单得一句话就可以了。例如写卡：

function WriteBlock()
	{
	var BlockID;
	var Key;
	var Data;
	var desKey;
	BlockID = document.getElementById("BlockIDWrite").value;
	Key =document.getElementById("KeyWrite").value;
	Data =document.getElementById("DataWrite").value;
	desKey =document.getElementById("Deskey").value;
	rfidreader.KeyMode=0;
	rfidreader.KeyStringMode=0;
	rfidreader.KeyString=Key;
	rfidreader.Repeat=0;
	rfidreader.DesDir=GetValueFromName("DesDir");
	rfidreader.DesMode = GetValueFromName("DesMode");
	rfidreader.DesKeyMode=0;
	rfidreader.DesKey=desKey;
	rfidreader.M1WriteBlock(BlockID, Data,0);
	}

配置相关的加解密属性，即可对卡片进行读写。