5分鐘帶你入門apicloud，開發app

劍未佩妥發表於2018-08-28
APICloudAPP

眾所周知，現在apicloud開發app也是非常火爆的。

apicloud的優勢：

1. 官方簽約  

  APICloud作為知名的移動APP開發平臺與您直接簽單，以專業的APP開發技術基礎作為專案如期上線的可靠保障。 

 2. 保上線

  APICloud CTO親自為每個專案進行評估並指派資深專案監理，保質保量準時交付。APICloud承諾最終提交至蘋果及各大安卓市場稽核通過，讓客戶無後顧之憂。

 3. 便宜

  基於APICloud跨平臺開發技術，一套前端程式碼直接生成蘋果和安卓兩個平臺應用，降低70%傳統開發成本。 APICloud聚合各種常用功能模組和幾乎所有國內第三方雲服務，一鍵接入，免去重複開發成本。 APICloud的引擎技術允許一套程式碼完美適配百餘種螢幕尺寸，幾十個主流手機品牌和各版本Android、iOS系統。 

 4. 快 

  APICloud為開發團隊提供海量原生應用功能模組、雲資料庫等功能，實現高效開發，顯著縮短開發週期。 App開發、釋出、運營一站搞定，Android、iOS系統升級一鍵完成。 基於APICloud平臺所編寫的程式碼標準、易讀，交付後便於快速上手運營維護。

這麼多優勢的apicloud現在不學等待何時，學了就能漲工資！！！

開發準備階段

開發app之前，肯定是有設計稿的，建議設計稿為750*1080

這樣的好處顯而易見，前端開發人員只需要量出設計搞得實際尺寸然後/2便可以得到實際px值，可以說非常方便。

用appcloud開發app不同於H5開發，其實不用考慮過多適配問題，可以不用rem，百分比之類的，你所需要的就是api自帶的框架，這裡不詳細介紹，可以自己看文件

給你頁面加上：<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

就可以了。

建議頁面佈局，能用寬度儘量用100%，不能用的可以用到彈性佈局，display:flex;非常方便，然後實在不行就再寫實際的尺寸，高度的話一般按照設計稿來。

下面介紹一下apicloud一些基礎的知識點，我自己開發app用到一些非常常用的方法。

（1）首先每個頁面都需要用到

此事件是在api物件準備完畢後產生，在每個Window或Frame的HTML程式碼中都需要監聽此事件，以確定APICloud擴充套件物件已經準備完畢，可以呼叫了。

apiready = function() {
    bMap = api.require("bMap");        
}複製程式碼

openWin()

這個方法主要是載入api提供的框架

你要在預設的index裡面配置一下預設的首頁地址

頁面的跳轉頁

api.openWin({
    name: 'page1',
    url: './page1.html',
    pageParam: {
        name: 'test'
    }
});複製程式碼

closeWin：

關閉 window

若當前正在進行 openWin、closeWin 等帶動畫過渡的 window 操作，呼叫此方法會失效

closeWin({params})複製程式碼

closeToWin：

關閉到指定 window，最上面顯示的 window 到指定 name 的 window 間的所有 window 都會被關閉

若當前正在進行 openWin、closeWin 等帶動畫過渡的 window 操作，呼叫此方法會失效

closeToWin({params})複製程式碼

（2）openFrame這方法相當於開啟頁面的子視窗，子視窗是鑲嵌在父視窗裡面的。

api.openFrame({
      name: 'cityselect_frame',
      url: 'cityselect_frame.html', 
      rect: {//位置及大小引數
            x:0,
            y:50, 
            w:'auto',
            h:'auto' 
           }, 
      pageParam:{ 
            name:'test'
 } 
 }); 
複製程式碼

（3）openFrameGroup

開啟frame組

若frame組已存在，則會把該frame組顯示到最前面。frame組開啟後，當前頁面載入完成後，頁面會預載入後面指定個數頁面

openFrameGroup({params}, callback(ret, err))

api.openFrameGroup({ 
 name: 'group1',
 rect: {
        x: 0,
        y: 0,
        w: 'auto',
        h: 'auto'
    }, 
 frames: [{
        name: 'frame1',
 url: 'frame1.html',
        bgColor: '#fff'
    },
 { 
 name: 'frame2',
 url: 'frame2.html', 
 bgColor: '#fff'
    }] 
}, function(ret, err) 
{ 
 var index = ret.index; 
});
複製程式碼

這個方法相當於頁面呢選單欄，點選選單欄切換中中間內容。

（4）儲存方法

 // apicloud儲存全域性資訊
api.setPrefs({
    key: 'user_id',
    value: ret.id //賦值給user_id
});
// apicloud獲取儲存在全域性裡的值
user_id = api.getPrefs({
    sync: true,
    key: 'user_id'
});
// apicloud清除儲存資訊
api.removePrefs({
    key: 'user_id'
});
// apicloud向下一頁傳參
api.openWin({
    name: 'qgxq_head',
    url: '../list/qgxq_head.html',
    pageParam: {
        goods_id: id,
        region_id: region_id,
        area_id: area_id
    }
});
// apicloud獲取上頁引數
var ret = api.pageParam.data;
// jq獲取自定義data值
// <div id="text" value="123"  data-name="黑噠噠的盟友"><div>
// JQUERY取值：$("#text").data("name");
api.showProgress({
    style: 'default',
    animationType: 'fade',
    title: '努力載入中...',
    text: '先喝杯茶...',
    modal: false
});
api.hideProgress();複製程式碼

（5）監聽

/////////////傳送監聽///////////////////////////////////
api.sendEvent({
    name: 'login',
    extra: {
        key1: 1,
    }
});
////////////////接受監聽///////////////////////////////
api.addEventListener({
    name: 'login'
}, function(ret, err) {
    //coding...
    //                  alert(JSON.stringify(ret))
    if (ret.value.key1 == 1) {
        getData()
    }
});
///////////////獲取app快取/////////////////////////
api.getCacheSize(function(ret) {
    var size = ret.size;
    cache = (size / 1024 / 1024).toFixed(2) + "M";
    $("#cache").text(cache);
});
//////////////清除app快取/////////////////////////
function clearhuancun() {
    api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: '努力提交中...',
        text: '先喝杯茶...',
        modal: false
    });
    api.clearCache(function() {
        api.hideProgress();
        api.toast({
            msg: '清除完成'
        });
        cache = "0M";
        $("#cache").text(cache);
    })
} 複製程式碼

（6）下拉重新整理和下拉載入

/////////下拉重新整理//////////
api.setRefreshHeaderInfo({ //呼叫UI元件 顯示頂部下拉重新整理元件，頁面必須設定為彈動。setRefreshHeaderInfo({params}, callback(ret, err))
    visible: true, //可選 是否可見
    loadingImg: 'widget://image/refesh.png', //上拉下拉的圖片
    bgColor: '#fff', //載入資訊的背景顏色
    textColor: '#ccc', //載入文字的顏色
    textDown: '下拉重新整理...', //下拉時提醒文字
    textUp: '鬆開重新整理...', //鬆開時提醒文字
    showTime: true //是否顯示更新時間
}, function(ret, err) {
    user_id = api.getPrefs({
        sync: true,
        key: 'user_id'
    });
    user_rank = api.getPrefs({
        sync: true,
        key: 'user_rank'
    });
    api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: '努力載入中...',
        text: '先喝杯茶...',
        modal: false
    });
    duqu(user_id, user_rank);
})
//停止重新整理
api.refreshHeaderLoadDone();
 
 
////////////上拉載入start/////////
var page = 1;
api.addEventListener({ //上拉載入只能採用繫結自定義事件的辦法來實現，沒有UI元件
    name: 'scrolltobottom', //繫結事件Window或者Frame頁面滑動到底部事件，字串型別
    extra: {
        threshold: 0 //設定距離底部多少距離時觸發，預設值為0，數字型別
    }
}, function(ret, err) {
 
    getDataPage();
});
var page = 1; //page在AJAX請求前要遞增page++
api.addEventListener({ //上拉載入只能採用繫結自定義事件的辦法來實現，沒有UI元件
    name: 'scrolltobottom', //繫結事件Window或者Frame頁面滑動到底部事件，字串型別
    extra: {
        threshold: 0 //設定距離底部多少距離時觸發，預設值為0，數字型別
    }
}, function(ret, err) {
 
    getDataPage();
});
 
function getDataPage() {
    page++;
    api.ajax({
        url: url,
        method: 'get',
        timeout: 30,
        dataType: 'json',
        returnAll: false,
        data: {
            values: { //you引數
                page: page
            },
        }
    }, function(ret, err) {
        if (ret) {
            //  alert(JSON.stringify(ret))
 
        }
    })
}
/////////////上拉載入end////////// 複製程式碼

（7）apicloud提供的ajax請求

url：

  • 型別：字串
  • 預設值：無
  • 描述：請求地址

encode：

  • 型別：布林
  • 預設值：true
  • 描述：（可選項）是否對url進行編碼。預設或傳true時，Android將始終對url編碼，而iOS只有在url不合法（如存在中文字元）的時候才進行編碼。如果url中有特殊字元需要編碼的，建議先在js層進行編碼，然後此引數傳false。

tag：

  • 型別：字串
  • 預設值：無
  • 描述：（可選項）該欄位用於傳給cancelAjax方法來取消請求，如果傳入該欄位，請保證各個ajax的tag欄位唯一

method：

  • 型別：字串
  • 預設值：get
  • 描述：（可選項）非同步請求方法型別
  • 取值範圍：
    get
post
put
delete
head
options
trace
patch
複製程式碼

cache：

  • 型別：布林
  • 預設值：true
  • 描述：（可選項）是否快取，若快取，下次沒網路時請求則會使用快取，僅在get請求有效

timeout：

  • 型別：數字
  • 預設值：30
  • 描述：（可選項）超時時間，單位秒

dataType：

  • 型別：字串
  • 預設值：json
  • 描述：（可選項）返回資料型別。若該欄位傳json，接收到伺服器返回的資料後會嘗試將其轉換成JSON物件，如果無法轉成JSON物件，將返回資料型別錯誤
  • 取值範圍：
json        //返回資料為 JSON 物件
text        //返回資料為字串型別
複製程式碼

charset：

  • 型別：字串
  • 預設值：utf-8
  • 描述：（可選項）當響應頭裡面沒有返回字符集編碼時，使用此編碼來解析資料

headers：

  • 型別：JSON 物件
  • 預設值：無
  • 描述：（可選項）設定請求頭資料。建議裡面的key使用首字母大寫的形式，如 User-Agent

report：

  • 型別：布林
  • 預設值：false
  • 描述：（可選項）是否實時返回上傳檔案進度

returnAll：

  • 型別：布林
  • 預設值：false
  • 描述：（可選項）是否需要返回所有 response 資訊（包括響應頭、訊息體、狀態碼），為 true 時，返回的頭資訊獲取方法(ret.headers)，訊息體資訊獲取方法(ret.body)，狀態碼獲取方法(ret.statusCode)

data：

  • 型別：JSON 物件
  • 預設值：無
  • 描述：（可選項）POST 資料，method 為 get 時不傳。以下欄位除了 values 和 files 可以同時使用，其它引數都不能同時使用。
  • 內部欄位：
{
    stream："",  //以二進位制流的方式提交檔案。stream為檔案路徑（字串型別），支援絕對路徑，以及fs://、cache://、box://等檔案路徑協議。可直接使用其他端API返回的結果，如api.getPicture回撥的ret.data等
    body："",    //以純文字的方式提交資料，body支援字串及JSON物件。提交JSON物件時，需設定application/json型別的Content-Type頭
    values：{},  //以表單方式提交引數（JSON物件）, 如 {"field1": "value1", "field1": "value2"} (直接傳JSON對像.)
    files：{}    //以表單方式提交檔案，支援多檔案上傳（JSON物件）,如 {"file": "path"}，也支援同一欄位對應多檔案：{"file":["path1","path2"]}。檔案路徑，支援絕對路徑，以及fs://、cache://、box://等檔案路徑協議。可直接使用其他端API返回的結果，如api.getPicture回撥的ret.data等.
}
複製程式碼

certificate：

  • 型別：JSON 物件
  • 預設值：無
  • 描述：（可選項）用於https請求開啟雙向認證的情況下，客戶端配置p12安全證書設定。
  • 內部欄位：
{
    path:'',            //p12證書路徑，支援fs://、widget://、cache://等檔案路徑協議，字串型別
    password:''            //證書密碼，字串型別
}複製程式碼

callback(ret, err)

ret：

  • 型別：JSON物件或字串
  • 描述：通常情況下直接為伺服器返回的資料，在一些情況下則會有所不同，依賴於傳入的dataType、returnAll引數，以及上傳檔案時是否返回上傳進度。
// returnAll引數傳true時，內部欄位為：
{
    statusCode:                 //狀態碼，數字型別
    headers: {},            //響應頭，JSON物件
    body: ''                //訊息體，即伺服器返回的資料。若dataType為json，那麼body為JSON物件，否則為字串
}
複製程式碼
// 上傳檔案時，若report欄位傳true返回上傳進度時，原伺服器返回資料會被放在body欄位裡面，內部欄位為：
{
    progress: 100,          //上傳進度，0.00-100.00
    status: '',             //上傳狀態，數字型別。（0：上傳中、1：上傳完成、2：上傳失敗）
    body: ''                //上傳完成時，伺服器返回的資料。若dataType為json，那麼body為JSON物件，否則為字串
}
複製程式碼

err：

  • 型別：JSON 物件
  • 內部欄位：
{
    statusCode: 400,        //網路請求狀態碼，數字型別
    code:0,                    //錯誤碼，數字型別。（0：連線錯誤、1：超時、2：授權錯誤、3：資料型別錯誤）
    msg:''                    //錯誤描述，字串型別
    body:                    //伺服器返回的原始資料
}複製程式碼

// 表單方式提交資料或檔案
api.ajax({
    url: 'http://192.168.1.101:3101/upLoad',
    method: 'post',
    data: {
        values: {
            name: 'haha'
        },
        files: {
            file: 'fs://a.gif'
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else {
        api.alert({ msg: JSON.stringify(err) });
    }
});

// 提交JSON資料
api.ajax({
    url: 'http://192.168.1.101:3101/upLoad',
    method: 'post',
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    },
    data: {
        body: {
            name: 'haha'
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else {
        api.alert({ msg: JSON.stringify(err) });
    }
});複製程式碼

（8）對了，還有一個比較實用的方法

getCacheSize

獲取快取佔用空間大小，快取包括下載的快取檔案、拍照臨時檔案以及網頁快取檔案等，計算可能需要花費一些時間

getCacheSize({params}, callback(ret, err))複製程式碼

sync：

  • 型別：布林
  • 預設值：false
  • 描述：執行結果的返回方式。為false時通過callback返回，為true時直接返回。

callback(ret, err)

ret：

  • 型別：JSON 物件
  • 內部欄位：
{
    size:        //快取大小，單位為Byte，數字型別。（-1：無儲存裝置、-2：正在準備USB儲存裝置、-3：無法訪問儲存裝置）
}複製程式碼
//非同步返回結果：
api.getCacheSize(function(ret) {
    var size = ret.size;
});

//同步返回結果：
var size = api.getCacheSize({
    sync: true
});複製程式碼

clearCache

清除快取，包括下載的檔案、拍照臨時檔案、網頁快取檔案等，清除時可能需要消耗一定時間。

clearCache({params}, callback(ret, err))複製程式碼

api.clearCache(function() {
    api.toast({
        msg: '清除完成'
    });
});複製程式碼


相關文章