zoukankan      html  css  js  c++  java
  • WiFi模块Demo(新手教程)图文详解模块使用教程

    本文出自APICloud官方论坛,感谢论坛版主 Mr.ZhouHeng 的分享。

    第一步我们需要在开发控制台创建一个Native App应用以及添模块的准备工作:

     

    按照下图步骤

     

    输入完点创建完成之后

     

    最好点击添加按钮之后返回看看你是否添加了需要的模块,添加完模块之后在点击自定义的

     

    然后云端操作就完成 接下来我们把云端代码拉取到本地

     

     

     

    通过svn拉取本地 使用开发工具直接打开拉取到本地的代码进行开发;

    如果你们使用的是官网工具apicloud-studio-2.exe

    那么请看下面的链接教程把代码拉取到本地:

    https://docs.apicloud.com/Dev-Tools/studio-dev-guide

    拉取代码成功之后在工具的结构:

     

    然后我们再打开Wi-Fi文档

    https://docs.apicloud.com/Client-API/Device-Access/wifi

    这个路径其实直接在模块对应点击模块名字就能进入到模块文档的 ,每个模块都有这个;

    ios需要特别注意文档里面提示需要添加的文件:

     

     

     

     

     

    <!DOCTYPE HTML>
    <html>
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
     <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
     <title>wifi_frm</title>
     <link rel="stylesheet" type="text/css" href="../css/api.css" />
     <link rel="stylesheet" type="text/css" href="../css/box.css" />
     <style media="screen">
     <style>html,
     body {
     background-color: #ededed;
     }
     .list-item {
     margin-top: 1px;
     padding: 15px 10px;
     font-size: 14px;
     line-height: 180%;
     position: relative;
     background-color: #fff;
     }
     .list-item:after {
     content: " ";
     position: absolute;
     z-index: 77;
     left: 0;
     top: 0;
      200%;
     height: 200%;
     border-bottom: 1px solid #d4d4d4;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: scale(.5, .5);
     transform: scale(.5, .5);
     }
     .left {
     padding: 0px 10px;
     line-height: 220%;
     color: #333;
     }
     .list-item .title {
     padding: 0px 10px;
     line-height: 220%;
     color: #333;
     position: relative;
     z-index: 88;
     }
     .list-item .right {
     position: relative;
     z-index: 99;
     }
     .list-item .right .state {
     display: inline-block;
     vertical-align: middle;
     border-radius: 20px;
      38px;
     height: 21px;
     text-align: center;
     line-height: 20px;
     font-size: 12px;
     color: #fff;
     }
     .list-item .right .open {
     background-color: #00acff;
     }
     .list-item .right .open::after {
     content: " ";
     float: right;
     margin-top: 1px;
     margin-right: 1px;
      19px;
     height: 19px;
     border-radius: 50%;
     background-color: #fff;
     box-shadow: 0px 0px 1px 1px #d4d4d4;
     -webkit-transition: all 0.2s linear;
     transition: all 0.2s linear;
     }
     .list-item .right .close {
     background-color: #ededed;
     }
     .list-item .right .close::after {
     content: " ";
     float: left;
     margin-top: 1px;
     margin-left: 1px;
      19px;
     height: 19px;
     border-radius: 50%;
     background-color: #fff;
     box-shadow: 0px 0px 1px 1px #d4d4d4;
     -webkit-transition: all 0.2s linear;
     transition: all 0.2s linear;
     }
     .center {
     text-align: center;
     }
     .list-item .active {
     color: #00acff
     }
    </style>
    </head>
    <body>
     <!-- v-cloak -->
     <div class="list" v-cloak>
     <div class="list-item flex-wrap">
     <div class="title flex-con ellipsis-1">{{state == true ? '已经开启WLAN' : '已经关闭WLAN'}}</div>
     <div class="right" v-if="show===true" @click="fnSwitch(state)">
     <div class="state" :class="state == true ? 'open' : 'close'"></div>
     </div>
     </div>
     <div class="list-item flex-wrap">
     <div class="left">设备当前连接的wifi:</div>
     <div class="title flex-con ellipsis-1">{{current}}</div>
     </div>
     <div class="list-item flex-wrap center" v-if="show===true">
     <div class="title flex-con " :class="tab == false ? 'active' : ''" @click="fnScanWifi()">获取附近的wifi</div>
     <div class="title flex-con" :class="tab == true ? 'active' : ''" @click="fnGetWifi()">获取已经配置过的wifi</div>
     </div>
     <div class="list-item flex-wrap" v-if="show===true&&state===true" v-for="(list,index) in items">
     <div class="left">{{tab == false ? '附近' : '已经配置'}}wifi:</div>
     <div class="title flex-con ellipsis-1">{{list.ssid}}</div>
     </div>
     </div>
    </body>
    <script src="../script/api.js"></script>
    <script src="../script/fastclick.js"></script>
    <script src="../script/vue.min.js"></script>
    <script>
     var eWifi;
     apiready = function() {
     fnInVue();
     }
     function fnInVue() {
     window.ListVue = new Vue({
     el: ".list",
     data: {
     current: '',
     items: [],
     show: false,
     state: false,
     tab: false
     },
     mounted: function() {
     this.$nextTick(function() {
     fnInit();
     });
     },
     methods: {
     fnSwitch: function(states) {
     console.warn(states);
     if (states) {
     fnCloseWifi();
     } else {
     fnOpenWifi();
     }
     },
     fnScanWifi: function() {
     if (this.tab === false) {
     return;
     }
     this.tab = false;
     fnScanWifiList();
     },
     fnGetWifi: function() {
     if (this.tab === true) {
     return;
     }
     this.tab = true;
     fnGetConfiguredNetworks();
     },
     }
     });
     }
     function fnInit() {
     eWifi = api.require('wifi');
     // 判断是ios还是安卓 从而是否显示对应权限
     window.ListVue.show = api.systemType == 'ios' ? false : true;
     // 获取当前wifi
     fnObtainCurrent();
     // 获取附近链接的wifi
     fnScanWifiList();
     };
     // 获取当前wifi
     function fnObtainCurrent() {
     后面代码请下载源码自行研究
    </script>
    </html>
    复制代码
  • 相关阅读:
    Dropplets – 极简的 Markdown 博客平台
    T3
    Awesomplete
    SVG Drawing Animation
    Dom Animator – 提供 Dom 注释动画的 JS 库
    Electron
    很赞的效果!互动的页面元素拖放着色实验
    BookBlock
    雷军投资的理财网站,年化收益13%!
    Rainyday.js – 使用 JavaScript 实现雨滴效果
  • 原文地址:https://www.cnblogs.com/APICloud/p/10855768.html
Copyright © 2011-2022 走看看