APICloud教程

1、經過APICloud進行App前端佈局和數據交互
App前端佈局：
Window ：窗口
Frame：子窗口
FrameGroup：一組子窗口的集合

window+frame+html代碼的佈局方式
整個頁面最外面是一個window，頭部和導航固定不變，爲一個frame，下方內容區域又是一個frame，整個frame裏面就是具體的頁面內容了，裏面嵌套了html\css代碼

打開新窗口的過程，就是在一組window+frame+html這種組合下，打開另外一組window+frame+html組合的過程

頁面內容簡單的狀況下，能夠直接在window當中加載htmlcss代碼

打開子窗口：api.openFrame

function openFrame(){
    api.openFrame({
        name:"",  //子窗口的名稱
        url:"",  //子窗口的地址
        rect:{ //x和y是座標位置，子窗口顯示的起始座標，w和h是，寬度和高度
            x:0,
            y:0,
            w:"auto",
            h:"auto"
        }
    })
}

打開子窗口組：api.openFrameGroup
打開新窗口：api.openWin

下拉刷新：api.setRefreshHeaderInfo

apiready = function(){
    api.setRefreshHeaderInfo({
        visible:true,
        bgColor:"#ccc",
        textColor:"#fff",
        textDown:"拉一下試試",
        textUp:"試試就試試",
        showTime:true
    },function(){
        //coding...
        //查詢數據庫
        //判斷是否有新數據
        //更新新數據
        api.refreshHeaderLoadDone();
    })
}

定義的方法統一放在：

apiready = function(){
    openFrame();
}

數據交互：
數據存儲：
file模塊：目錄操做，文件操做
文件存儲方式，用於圖片、文檔的上傳下載刪除管理
db：本地sqlite數據庫
用於離線數據的存儲
localstorage：html5，localstorage
用於一些變量的存儲傳遞，好比用戶的登陸狀態、多個頁面之間的變量傳遞
注意：cookie、session沒法使用
preterence：setPrefs、getPrefs、removePrefs
apicloud封裝好的偏好數據存儲模塊，如應用皮膚、字體大小等個性化的設置

與自建服務器的網絡通訊
api.ajax

WiFi真機同步配置
在APP Loader裏面，點擊小圓圈，進入配置頁
在APICloud Studio 2 項目，右鍵 查看wifi真機同步ip和端口
若是顯示鏈接失敗，則：打開電腦防火牆，容許APICloud Studio 2 使用專用和共用網絡

這樣：在代碼中能夠console.log()內容，在APICloud Studio 2控制檯能夠即時顯示出來

本地修改了代碼，同步到雲端：

• 在作雲端同步前,開發者須要將變動的文件,作一次本地提交: 右鍵文件或目錄或項目根目錄 -> Git -> Git add + commit
• 雲端同步,指的是將已提交到本地 GIT 倉庫的變動,同步到雲端SVN/GIT服務器;未作本地提交的文件變動,不會提交到雲端 SVN/GIT 服務器

請在底部輸入框輸入一段更改說明,以完成本地提交

• 輸入的說明文字,請不要以 # 開頭.

• 輸入完成後,請 ctrl/cmd + S 保存,以完成本地提交.
• 只有進行了本地提交的文件變動,才能使用雲端同步功能,將變動同步到雲端.
• 雲端同步支持批量提交,即本地提交屢次,只須要一次雲端同步便可所有同步到服務器.
• 沒有網絡也能夠進行本地提交
• 暫時不想進行本地提交的文件,請使用本地代碼時光機手動備份代碼: 右鍵項目根目錄->代碼管理->本地代碼時光機->手動備份
• 若是提示 "Nothing to commit",可安全忽略此提示.

經過使用AppLoader，在AppLoader裏面安裝正在開發的app，用數據線鏈接電腦，配置好ip和端口，點擊wifi增量同步，能夠編輯代碼，在app裏面實現同步更新

在手機上也能夠額外安裝該app，那麼可使用該app，進行安裝、推送更新等測試

2、API對象
apiready = function () {
var appId = api.appId; //好比： A6980386445546
var appName = api.appName; //好比： AppLoader
var appVersion = api.appVersion; // 好比： 1.0.0
var systemType = api.systemType; // 好比： ios
var systemVersion = api.systemVersion; // 好比： 8.0
var deviceModel = api.deviceModel; // 好比： iPhone 5
var operator = api.operator; // 好比：中國移動
var connectionType = api.connectionType; //好比： wifi
var fullScreen = api.fullScreen; // 好比： true
var screenWidth = api.screenWidth; // 好比： 640
var screenHeight = api.screenHeight; // 好比： 960
var winName = api.winName; //好比： root
var winWidth = api.winWidth; azs // 好比： 320 此屬性值不一樣於屏幕的分辨率，好比 iPhone 5 的分辨率爲 640x1136，可是其 winWidth 爲 320，所以前端需根據 winWidth 和 winHeight 來進行佈局
var winHeight = api.winHeight; // 好比： 568
var frameName = api.frameName; //好比： trans-con
var frameWidth = api.frameWidth; // 好比： 320,若當前環境爲 window 中，則值和 winWidth 相同
var frameHeight = api.frameHeight; // 好比： 504,若當前環境爲 window 中，則值和 winHeight 相同
var pageParam = api.pageParam; //好比： {"name" : "tans-con"} JSON用於獲取頁面間傳遞的參數值，爲 openWin()、openFrame() 等方法中的 pageParam 參數對應值
var wgtParam = api.wgtParam; //好比： {"name": "API Demo"},用於獲取 widget 間傳遞的參數值，爲 openWidget() 方法中的 wgtParam 參數對應值
var appParam = api.appParam; // 好比： appLoader,當應用被第三方應用打開時，傳遞過來的參數，字符串類型
var statusBarAppearance = api.statusBarAppearance; // 好比： true,當前應用狀態欄是否支持沉浸式效果，布爾類型
var wgtRootDir = api.wgtRootDir; //widget: //協議對應的真實目錄，即 widget 網頁包的根目錄，字符串類型
var fsDir = api.fsDir; //fs: //協議對應地真實目錄，字符串類型
var cacheDir = api.cacheDir; //cache://協議對應的真實目錄，字符串類型

}

3、跳轉頁面的兩種方式

一、
api.openFrame ({
    name: 'AllGroup',
    url: '../AllGroup.html',
    reload:'true',
    rect:{
        x:0,
        y:41,
        w:'auto',
        h:'auto'
    },
    bounces: false,
    pageParam: {
        "id":api.pageParam.id 
    }
});

二、
api.openWin({
    name: type,
    url: 'header/'+type+'.html',
    bounces: false,
    pageParam: {
    "id":id //id
    }
});
說明：pageParam是用來在頁面間傳值的，獲取上一頁面傳來的值的方式是api.pageParam.id(其中id是在傳值時的變量名,若變量名爲name,這裏就寫api.pageParam.name).

三、關閉頁面
api.closeWin({name:pagename});pagename是所要關閉頁面的全名稱

4、沉浸式效果實現
在config.xml文件配置是否開啓:
<preference name="statusBarAppearance" value="true" />
沉浸式效果配置說明
在Window或Frame的apiready事件後，調用$api.fixStatusBar()方法;

5、CSS Framework
清除瀏覽器默認樣式（借鑑CSS Reset，Normalize.css）
禁用系統長按菜單（-webkit-touch-callout:none）
禁用字體大小自動調整（-webkit-text-size-adjust:none）
去掉點擊高亮（-webkit-tap-highlight-color:rgba(0, 0, 0, 0)）
禁止選擇內容（-webkit-user-select:none）
清除浮動（.clearfix）
加載更多默認樣式（.loading_more）
<permission name="call"/>打電話
<permission name="sms"/>短信
<permission name="camera"/>相機
<permission name="record"/>錄音
<permission name="location"/>位置
<permission name="fileSystem"/>
<permission name="internet"/>
<permission name="bootCompleted"/>開機啓動
<permission name="hardware"/>控制振動/閃光燈/屏幕休眠
<permission name="contact"/>聯繫人

6、選擇器
var main = $api.byId('main');
var headerPos = $api.offset(header);

7、pageParam
頁面參數，JSON 對象類型
用於獲取頁面間傳遞的參數值，爲 openWin()、openFrame() 等方法中的 pageParam 參數對應值

8、打開一個frame組

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

關閉一個frame組

api.closeFrameGroup({
    name: 'group1'
});

9、apicloud使用ajax，傳遞參數，data的使用方法和qjuery的不同

data : {
        values: {
            deviceName:"",
        }
}

外面套上values

10、tapmode和parseTapmode屬性詳解

1、在開發的過程當中，直接給元素綁定事件屬性onclick，會點擊沒反應，這時，給標籤加上tapmode，就解決了問題，查了一下，原來，tapmode具備速點擊事件功能，在觸發事件中加入tapmode能夠消除JS中標準click事件的300毫秒延遲；同時，它具備觸發可顯示樣式的效果，tapmode='css樣式類' 屬性，當該元素touchstart touchmove的時候就會展示css樣式。
實例<div class="menu" tapmode onclick="setAlert()">零食</div>

function setAlert(){
　　alert('你好');
}

1.tapmode具備速點擊事件功能，在觸發事件中加入tapmode能夠消除JS中標準click事件的300毫秒延遲；
2.tapmode具備觸發可顯示樣式的效果，tapmode='xxx'屬性，’xxx‘爲css樣式類，當該元素touchstart touchmove的時候就會展示xxx樣式。

2、parseTapmode屬性解析元素 tapmode 屬性，優化點擊事件處理默認頁面加載完成後，引擎會對 dom 裏面的元素進行 tapmode 屬性解析，如果以後用代碼建立的 dom 元素，則須要調用該方法後 tapmode 屬性纔會生效api.parseTapmode()