APICloud教程

一、通過APICloud進行App前端布局和數(shù)據(jù)交互
App前端布局：
Window ：窗口
Frame：子窗口
FrameGroup：一組子窗口的集合

目前成都創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、成都網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

window+frame+html代碼的布局方式
整個頁面最外面是一個window，頭部和導航固定不變，為一個frame，下方內(nèi)容區(qū)域又是一個frame，整個frame里面就是具體的頁面內(nèi)容了，里面嵌套了html\css代碼

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

頁面內(nèi)容簡單的情況下，可以直接在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...
        //查詢數(shù)據(jù)庫
        //判斷是否有新數(shù)據(jù)
        //更新新數(shù)據(jù)
        api.refreshHeaderLoadDone();
    })
}

定義的方法統(tǒng)一放在：

apiready = function(){
    openFrame();
}

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

與自建服務器的網(wǎng)絡(luò)通信
api.ajax

WiFi真機同步配置
在APP Loader里面，點擊小圓圈，進入配置頁
在APICloud Studio 2 項目，右鍵查看wifi真機同步ip和端口
如果顯示連接失敗，則：打開電腦防火墻，允許APICloud Studio 2 使用專用和共用網(wǎng)絡(luò)
APICloud教程

這樣：在代碼中可以console.log()內(nèi)容，在APICloud Studio 2控制臺可以即時顯示出來

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

在做云端同步前,開發(fā)者需要將變更的文件,做一次本地提交: 右鍵文件或目錄或項目根目錄 -> Git -> Git add + commit
云端同步,指的是將已提交到本地 GIT 倉庫的變更,同步到云端SVN/GIT服務器;未做本地提交的文件變更,不會提交到云端 SVN/GIT 服務器

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

輸入的說明文字,請不要以 # 開頭.
輸入完成后,請 ctrl/cmd + S 保存,以完成本地提交.
只有進行了本地提交的文件變更,才能使用云端同步功能,將變更同步到云端.
云端同步支持批量提交,即本地提交多次,只需要一次云端同步即可全部同步到服務器.
沒有網(wǎng)絡(luò)也可以進行本地提交
暫時不想進行本地提交的文件,請使用本地代碼時光機手動備份代碼: 右鍵項目根目錄->代碼管理->本地代碼時光機->手動備份
如果提示 "Nothing to commit",可安全忽略此提示.

通過使用AppLoader，在AppLoader里面安裝正在開發(fā)的app，用數(shù)據(jù)線連接電腦，配置好ip和端口，點擊wifi增量同步，可以編輯代碼，在app里面實現(xiàn)同步更新

在手機上也可以額外安裝該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，因此前端需根據(jù) winWidth 和 winHeight 來進行布局
var winHeight = api.winHeight; // 比如： 568
var frameName = api.frameName; //比如： trans-con
var frameWidth = api.frameWidth; // 比如： 320,若當前環(huán)境為 window 中，則值和 winWidth 相同
var frameHeight = api.frameHeight; // 比如： 504,若當前環(huán)境為 window 中，則值和 winHeight 相同
var pageParam = api.pageParam; //比如： {"name" : "tans-con"} JSON用于獲取頁面間傳遞的參數(shù)值，為 openWin()、openFrame() 等方法中的 pageParam 參數(shù)對應值
var wgtParam = api.wgtParam; //比如： {"name": "API Demo"},用于獲取 widget 間傳遞的參數(shù)值，為 openWidget() 方法中的 wgtParam 參數(shù)對應值
var appParam = api.appParam; // 比如： appLoader,當應用被第三方應用打開時，傳遞過來的參數(shù)，字符串類型
var statusBarAppearance = api.statusBarAppearance; // 比如： true,當前應用狀態(tài)欄是否支持沉浸式效果，布爾類型
var wgtRootDir = api.wgtRootDir; //widget: //協(xié)議對應的真實目錄，即 widget 網(wǎng)頁包的根目錄，字符串類型
var fsDir = api.fsDir; //fs: //協(xié)議對應地真實目錄，字符串類型
var cacheDir = api.cacheDir; //cache://協(xié)議對應的真實目錄，字符串類型

}

三、跳轉(zhuǎn)頁面的兩種方式

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是用來在頁面間傳值的，獲取上一頁面?zhèn)鱽淼闹档姆绞绞莂pi.pageParam.id(其中id是在傳值時的變量名,若變量名為name,這里就寫api.pageParam.name).

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

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

五、CSS Framework
清除瀏覽器默認樣式（借鑒CSS Reset，Normalize.css）
禁用系統(tǒng)長按菜單（-webkit-touch-callout:none）
禁用字體大小自動調(diào)整（-webkit-text-size-adjust:none）
去掉點擊高亮（-webkit-tap-highlight-color:rgba(0, 0, 0, 0)）
禁止選擇內(nèi)容（-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"/>聯(lián)系人

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

七、pageParam
頁面參數(shù)，JSON 對象類型
用于獲取頁面間傳遞的參數(shù)值，為 openWin()、openFrame() 等方法中的 pageParam 參數(shù)對應值

八、打開一個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;
});

關(guān)閉一個frame組

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

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

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

外面套上values

十、tapmode和parseTapmode屬性詳解

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

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

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

二、parseTapmode屬性
解析元素 tapmode 屬性，優(yōu)化點擊事件處理
默認頁面加載完成后，引擎會對 dom 里面的元素進行 tapmode 屬性解析，若是之后用代碼創(chuàng)建的 dom 元素，則需要調(diào)用該方法后 tapmode 屬性才會生效
api.parseTapmode()

網(wǎng)站題目：APICloud教程
網(wǎng)站鏈接：http://muchs.cn/article18/ihjjgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、電子商務、Google、企業(yè)建站、品牌網(wǎng)站制作、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容