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跳轉到浏覽器效果