ibeacon.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. // 页面初始化操作
  12. document.addEventListener('plusready', function(e){
  13. // 监听iBeacon服务状态变化
  14. plus.ibeacon.onBeaconServiceChange(function(e){
  15. outLine('onBeaconServiceChange: available='+e.available+', discovering='+e.discovering);
  16. });
  17. // 监听iBeacon设备更新
  18. plus.ibeacon.onBeaconUpdate(function(e){
  19. var beacons = e.beacons;
  20. for(var i in beacons){
  21. outLine('onBeaconUpdate: '+beacons[i].uuid);
  22. }
  23. });
  24. }, false);
  25. // 开始搜索iBeacon
  26. function startDiscovery(){
  27. outSet('开始搜索附近的iBeacon设备:');
  28. plus.ibeacon.startBeaconDiscovery({
  29. success: function(e){
  30. outLine('开始搜索成功!');
  31. },
  32. fail: function(e){
  33. outLine('开始搜索失败! '+JSON.stringify(e));
  34. }
  35. });
  36. }
  37. // 获取iBeacon设备
  38. function getBeacons(){
  39. outSet('获取已搜索到的iBeacon设备:');
  40. plus.ibeacon.getBeacons({
  41. success: function(e){
  42. var beacons = e.beacons;
  43. outLine('获取iBeacon设备成功! '+beacons.length);
  44. for(var i in beacons){
  45. outLine(JSON.stringify(beacons[i]));
  46. }
  47. },
  48. failed: function(e){
  49. outLine('获取iBeacon设备失败! '+JSON.stringify(e));
  50. }
  51. });
  52. }
  53. // 停止搜索iBeacon
  54. function stopDiscovery(){
  55. outSet('停止搜索附近的iBeacon设备:');
  56. plus.ibeacon.stopBeaconDiscovery({
  57. success: function(e){
  58. outLine('停止搜索成功!');
  59. },
  60. fail: function(e){
  61. outLine('停止搜索失败! '+JSON.stringify(e));
  62. }
  63. });
  64. }
  65. </script>
  66. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  67. </head>
  68. <body>
  69. <br/>
  70. <div class="button" onclick="startDiscovery()">开始搜索iBeacon</div>
  71. <div class="button" onclick="getBeacons()">获取iBeacon设备</div>
  72. <div class="button" onclick="stopDiscovery()">停止搜索iBeacon</div>
  73. <p class="des">
  74. 请到存在iBeacon设备环境中测试,或者使用iBeacon设备模拟工具(如<a href="#" onclick="plus.runtime.openWeb('https://app.brtbeacon.com/brightbeacon')">BrightBeacon</a>)。
  75. </p>
  76. <div id="outpos"/>
  77. <div id="output">
  78. iBeacon可使用低功耗蓝牙搜索附件的iBeacon设备进行微定位等。
  79. </div>
  80. </body>
  81. </html>