apicloud apicloud

注册
查看: 391|回复: 9

[模块教程] nfc模块demo示例

版主

UID:83211

主题:
151
帖子:
6842
云币:
43971

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[模块教程] nfc模块demo示例

391 9 | 发表于 2019-7-5 17:19:19 |阅读模式 | |
nfc模块仅封装在安卓下对NFC下的NDEF文本数据读写。



点击进入模块详情

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Module Develop</title>
  5.                 <meta charset="utf-8">
  6.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  7.                 <style type="text/css">
  8.                         html, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <a class="button" tapmode="active" onclick="readingAvailable()">判断设备是否支持NFC</a>
  61.                                 <a class="button" tapmode="active" onclick="_addEventListener()">设置监听</a>
  62.                                 <a class="button" tapmode="active" onclick="_removeEventListener()">移除监听</a>
  63.                                 <a class="button" tapmode="active" onclick="initPageConfig()">页面信息初始化</a>
  64.                                 <a class="button" tapmode="active" onclick="readText()">读NFC标签文本数据(Android)</a>
  65.                                 <a class="button" tapmode="active" onclick="writeText()">写NFC标签文本数据(Android)</a>
  66.                                 <a class="button" tapmode="active" onclick="startSession()">开始扫描(iOS)</a>
  67.                                 <a class="button" tapmode="active" onclick="endSession()">结束扫描(iOS)</a>
  68.                         </div>
  69.                 </div>
  70.         </body>
  71.         <script>
  72.                 var demo = null;
  73.                 apiready = function() {
  74.                         demo = api.require('nfc');
  75.                         console.log(demo);
  76.                 }
  77.                
  78.                 function readingAvailable(){
  79.                         demo.readingAvailable(function(ret, err){
  80.                         alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
  81.                 });
  82.                 }
  83.                
  84.                 function _addEventListener(){
  85.                         demo.addEventListener(function(ret, err){
  86.                         alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
  87.                 });
  88.                 }
  89.                
  90.                 function _removeEventListener(){
  91.                         demo.removeEventListener();
  92.                 }
  93.                
  94.                
  95.                 function initPageConfig(){
  96.                 demo.initPageConfig({
  97.                         isDebug : true,                                        //开启时,不支持nfc的手机可以打开界面看UI效果
  98.                         backgroundColor : '#FF4040',     //页面背景色
  99.                         title : {
  100.                                 text : '请读卡1',     //标题
  101.                                 color : '#000000',   //标题字体颜色
  102.                                 background : '#551A8B',      //标题栏背景色
  103.                                 layoutHeight : 45            //标题栏高度
  104.                         },
  105.                         center : {
  106.                                 logo : 'widget://image/timg-2.gif', //图片logo文件路径 支持fs:// widget://
  107.                                 text : '请将NFC标签或者贴纸靠近手机背面11', //文字说明
  108.                                 color : '#00EE00',   //文字说明字体颜色
  109.                         }
  110.                 },function(ret, err){
  111.                         alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
  112.                 });
  113.                 }
  114.                
  115.                 function readText(){
  116.                 demo.readText(function(ret, err){
  117.                         alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
  118.                 });
  119.                 }


  120.                 function writeText(){
  121.                 demo.writeText({
  122.                         data : '我是测试数据12345678fffgs'
  123.                 },function(ret, err){
  124.                         alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
  125.                 });
  126.                 }
  127.                
  128.                 function startSession(){
  129.                 demo.startSession({
  130.                                 alertMessage : '你为什么要nfc识别?',
  131.                                 isOnlyFirst : true,
  132.                                 isParseContent : true
  133.                         },function(ret, err){
  134.                                 alert(JSON.stringify(ret)+"   "+JSON.stringify(err));
  135.                         });
  136.                 }
  137.                
  138.                 function endSession(){
  139.                 demo.endSession(function(ret, err){
  140.                                 alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
  141.                         });
  142.                 }
  143.         </script>
  144. </html>
复制代码



主题:
4
帖子:
27
云币:
38
发表于 2019-7-17 17:32:08 |
请问现在没有iOS端功能是因为苹果官方还没开放NFC权限吗

版主

UID:83211

主题:
151
帖子:
6842
云币:
43971

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-7-17 17:34:23 |
APICloud_LA 发表于 2019-7-17 17:32
请问现在没有iOS端功能是因为苹果官方还没开放NFC权限吗

需要设备支持,,同时在苹果开发者账号申请证书时,需要设置nfc权限。

主题:
4
帖子:
27
云币:
38
发表于 2019-7-18 09:27:11 |
52yaoer 发表于 2019-7-17 17:34
需要设备支持,,同时在苹果开发者账号申请证书时,需要设置nfc权限。

现在试用了你们的这个模块,iOS初始化成功,但是无法读取卡片信息,安卓是可以的。这是什么原因呢

版主

UID:83211

主题:
151
帖子:
6842
云币:
43971

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-7-18 11:45:56 来自手机 |
苹果读取的nfc卡要经过mfi认证吧好像。

主题:
4
帖子:
27
云币:
38
发表于 2019-7-18 13:44:43 |
52yaoer 发表于 2019-7-18 11:45
苹果读取的nfc卡要经过mfi认证吧好像。

好的 明白了 谢谢

主题:
4
帖子:
27
云币:
38
发表于 前天 10:50 |
最近NFC模块出现了不进方法也不报错的问题,使用之前打的包是可以正常使用的。现在连给的demo也没发正常使用了,麻烦帮忙看下问题

版主

UID:83211

主题:
151
帖子:
6842
云币:
43971

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 前天 11:48 |
APICloud_LA 发表于 2019-11-16 10:50
最近NFC模块出现了不进方法也不报错的问题,使用之前打的包是可以正常使用的。现在连给的demo也没发正常使 ...

ios?安卓?

主题:
0
帖子:
2
云币:
2
发表于 昨天 23:33 |
这个模块确定没有问题吗?现在都已经无法响应了,我这里安卓测试

主题:
0
帖子:
2
云币:
2
发表于 昨天 23:57 |
亲,别晚上憋着放大招,你应该是更新了模块把,我换了一个模版滴卡就没事了!!
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表