APICloud教程

原創

xxxpjgl2019-06-09 18:45:15?著作權

?著作權歸作者所有：來自51CTO博客作者xxxpjgl的原創作品，如需轉載，請注明出處，否則將追究法律責任

https://blog.51cto.com/u_9161018/2406538

一、通過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，進行安裝、推送更新等測試

二、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://協議對應的真實目錄，字符串類型

}

三、跳轉頁面的兩種方式

```

1、

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

}

});

2、

api.openWin({

name: type,

url: 'header/'+type+'.html',

bounces: false,

pageParam: {

"id":id //id

}

});

說明：pageParam是用來在頁面間傳值的，獲取上一頁面傳來的值的方式是api.pageParam.id(其中id是在傳值時的變量名,若變量名為name,這里就寫api.pageParam.name).

3、關閉頁面

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

```

四、沉浸式效果實現

在config.xml文件配置是否開啟:

沉浸式效果配置說明

在Window或Frame的apiready事件后，調用$api.fixStatusBar()方法;

五、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)

打電話

短信

相機

錄音

位置

開機啟動

控制振動/閃光燈/屏幕休眠

聯系人

六、選擇器

var main = $api.byId('main');

var headerPos = $api.offset(header);

七、pageParam

頁面參數，JSON 對象類型

用于獲取頁面間傳遞的參數值，為 openWin()、openFrame() 等方法中的 pageParam 參數對應值

八、打開一個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'

});

```

九、apicloud使用ajax，傳遞參數，data的使用方法和qjuery的不一樣

```

data : {

values: {

deviceName:"",

}

}

```

外面套上values

十、tapmode和parseTapmode屬性詳解

一、在開發的過程中，直接給元素綁定事件屬性onclick，會點擊沒反應，這時，給標簽加上tapmode，就解決了問題，查了一下，原來，tapmode具有速點擊事件功能，在觸發事件中加入tapmode可以消除JS中標準click事件的300毫秒延遲；同時，它具有觸發可顯示樣式的效果，tapmode='css樣式類' 屬性，當該元素touchstart touchmove的時候就會展現css樣式。

實例

零食

function setAlert(){

alert('你好');

}

1.tapmode具有速點擊事件功能，在觸發事件中加入tapmode可以消除JS中標準click事件的300毫秒延遲；

2.tapmode具有觸發可顯示樣式的效果，tapmode='xxx'屬性，’xxx‘為css樣式類，當該元素touchstart touchmove的時候就會展現xxx樣式。

二、parseTapmode屬性

解析元素 tapmode 屬性，優化點擊事件處理

默認頁面加載完成后，引擎會對 dom 里面的元素進行 tapmode 屬性解析，若是之后用代碼創建的 dom 元素，則需要調用該方法后 tapmode 屬性才會生效

api.parseTapmode()

贊

收藏

評論

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的apicloud模块和html,APICloud教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。