APICloud入坑手册（超详细）

APICloud的入坑手册（超详细版）

 

1、设置沉浸式效果

需要再config.xml 中去配置，但是一般项目创建时自动开启，无需改动。

CSS代码

 header {
            height: 34px;
            width: 100%;
            text-align: center;
            background-color: #81a9c3;
            color: #fff;
            line-height: 34px;
            font-size: 20px;
        }

        .flex-1 {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
        }

        footer {
            height: 30px;
            width: 100%;
            background-color: #81a9c3;
            color: white;
            line-height: 30px;
            text-align: center;
        }

HTML代码

 <header>通讯录</header>

 <section class="flex-1">
    <div class="info-area">
         <h2>page2<h2>
      </div>
  </section>

 <footer>Copyright &copy;<span id="year"></span></footer>

 

 

JS代码（写在apiready方法中）

 var header = $api.dom('header'); // 获取 header 标签元素
 var footer = $api.dom('footer'); // 获取 footer 标签元素
        // 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
        // 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
        // 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
 var headerH = $api.fixStatusBar(header);
        // 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
 var footerH = $api.fixTabBar(footer);

效果展示：

 

2、顶部手机状态栏的颜色设置

注意：（只要一次设置了，以后每个页面都是那样，所以需要每个页面都设置）

放置在 api-apiready 方法中
    //设置状态栏颜色（只要一次设置了，以后每个页面都是那样，所以需要每个页面都设置，有点麻烦）
     //dark        //状态栏字体为黑色，适用于浅色背景
     // light       //状态栏字体为白色，适用于深色背景
     api.setStatusBarStyle({
          style: 'light',
          color:'#000'
     });

 

效果展示：

 

添加后效果

官方文档地址：https://docs.apicloud.com/Client-API/api#47     Method----设备访问----setStatusBarStyle 

 

3、删除api.openTabLayout 标题的白线

问题状态：

在 navigationBar 中添加 shadow:’#5DAEF8’, //导航栏底部白线去除，设置颜色 （注意背景样式与标线颜色一致）

官方文档地址：https://docs.apicloud.com/Client-API/api#openTabLayout   Method----高级窗口----openTabLayout

4、关闭页面

  //关闭页面
  api.closeWin();

5、页面跳转

//页面跳转
 api.openTabLayout({
     name: 'registered',
     url: 'widget://html/login-page/registered.html',
     //标题名称
     title: '注册',
     //是否隐藏顶部导航栏--false为不隐藏
     hideNavigationBar: false,
     //顶部导航栏配置信息
     navigationBar: {
         background: '#fff',
         color: '#333',
         leftButtons:true,
         rightButtons:[{
            text: '更多',
            fontSize: 14,
            color:'#000'
        }]
        }
  });

效果展示：

 

6、apicloud 下拉刷新功能

在APICloud最底部添加
//下拉刷新
    api.setRefreshHeaderInfo({
        loadingImg: 'widget://image/refresh.png',
        bgColor: '#F7F7F7',
        textColor: '#21B2FF',
        textDown:'下拉刷新...',
        textUp: '释放立即刷新...',
        showTime:false,
    }, function(ret, err) {
          //下拉刷新时，刷新的数据　
          app.getData(app);
      　//刷新完数据后,将下拉刷新的事件关闭
          api.refreshHeaderLoadDone();
});

官方文档地址：https://docs.apicloud.com/Client-API/api#46    Method----UI组件----setRefreshHeaderInfo

 

7、apicloud 上拉加载 功能

在APICloud最底部添加
//下拉加载
 api.addEventListener({
    name:'scrolltobottom',
    extra:{
        threshold:0     //设置距离底部多少距离时触发，默认值为0，数字类型
      }
    }, function(ret, err){

 });

官方文档地址：https://docs.apicloud.com/Client-API/api#46    Method----消息事件----addEventListener

 

8、APIcloud app url应用跳转到浏览器上—-唤醒默认的系统浏览器

//获取用户的设备类型api.systemType为apiCloud自带方法
var systype= api.systemType;
     // 代表设备为安卓
     if(systype=='android'){
           api.openApp({
           androidPkg: 'android.intent.action.VIEW',
           mimeType: 'text/html',
           uri: 'https://ethplorer.io/',
      },function(ret,err){
              //弹窗内容（可不写）
           var msg = JSON.stringify(ret);
           api.alert({
               title: 'openApp',
               msg: 'android',
               buttons: ['确定']
             });
          });
        return;
      } 
      // 代表IOS
      if(systype=='ios'){
          api.openApp({
          iosUrl: 'https://ethplorer.io/'  
       },function(ret,err){
               //弹窗内容（可不写）
          var msg = JSON.stringify(ret);
          api.alert({
          title: 'openApp-IOS',
          msg: 'IOS',
          buttons: ['确定']
         });
       });
       return;
      }

官方文档地址 ： https://docs.apicloud.com/Client-API/api#25    Method----应用管理----openAPP

Android跳转到浏览器效果