建站
咨詢
售后
建站咨詢
新聞中心
一、通過APICloud進(jìn)行App前端布局和數(shù)據(jù)交互
App前端布局：
Window ：窗口
Frame：子窗口
FrameGroup：一組子窗口的集合
目前成都創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、成都網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
window+frame+html代碼的布局方式
整個(gè)頁面最外面是一個(gè)window，頭部和導(dǎo)航固定不變，為一個(gè)frame，下方內(nèi)容區(qū)域又是一個(gè)frame，整個(gè)frame里面就是具體的頁面內(nèi)容了，里面嵌套了html\css代碼
打開新窗口的過程，就是在一組window+frame+html這種組合下，打開另一組window+frame+html組合的過程
頁面內(nèi)容簡(jiǎn)單的情況下，可以直接在window當(dāng)中加載htmlcss代碼
打開子窗口：api.openFrame
function openFrame(){
api.openFrame({
name:"", //子窗口的名稱
url:"", //子窗口的地址
rect:{ //x和y是坐標(biāo)位置，子窗口顯示的起始坐標(biāo)，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ù)存儲(chǔ)：
file模塊：目錄操作，文件操作
文件存儲(chǔ)方式，用于圖片、文檔的上傳下載刪除管理
db：本地sqlite數(shù)據(jù)庫
用于離線數(shù)據(jù)的存儲(chǔ)
localstorage：html5，localstorage
用于一些變量的存儲(chǔ)傳遞，比如用戶的登錄狀態(tài)、多個(gè)頁面之間的變量傳遞
注意：cookie、session無法使用
preterence：setPrefs、getPrefs、removePrefs
apicloud封裝好的偏好數(shù)據(jù)存儲(chǔ)模塊，如應(yīng)用皮膚、字體大小等個(gè)性化的設(shè)置
與自建服務(wù)器的網(wǎng)絡(luò)通信
api.ajax
WiFi真機(jī)同步配置
在APP Loader里面，點(diǎn)擊小圓圈，進(jìn)入配置頁
在APICloud Studio 2 項(xiàng)目，右鍵 查看wifi真機(jī)同步ip和端口
如果顯示連接失敗，則：打開電腦防火墻，允許APICloud Studio 2 使用專用和共用網(wǎng)絡(luò)
這樣：在代碼中可以console.log()內(nèi)容，在APICloud Studio 2控制臺(tái)可以即時(shí)顯示出來
本地修改了代碼，同步到云端：
- 在做云端同步前,開發(fā)者需要將變更的文件,做一次本地提交: 右鍵文件或目錄或項(xiàng)目根目錄 -> Git -> Git add + commit
- 云端同步,指的是將已提交到本地 GIT 倉庫的變更,同步到云端SVN/GIT服務(wù)器;未做本地提交的文件變更,不會(huì)提交到云端 SVN/GIT 服務(wù)器
請(qǐng)?jiān)诘撞枯斎肟蜉斎胍欢胃恼f明,以完成本地提交
輸入的說明文字,請(qǐng)不要以 # 開頭.
- 輸入完成后,請(qǐng) ctrl/cmd + S 保存,以完成本地提交.
- 只有進(jìn)行了本地提交的文件變更,才能使用云端同步功能,將變更同步到云端.
- 云端同步支持批量提交,即本地提交多次,只需要一次云端同步即可全部同步到服務(wù)器.
- 沒有網(wǎng)絡(luò)也可以進(jìn)行本地提交
- 暫時(shí)不想進(jìn)行本地提交的文件,請(qǐng)使用本地代碼時(shí)光機(jī)手動(dòng)備份代碼: 右鍵項(xiàng)目根目錄->代碼管理->本地代碼時(shí)光機(jī)->手動(dòng)備份
- 如果提示 "Nothing to commit",可安全忽略此提示.
通過使用AppLoader，在AppLoader里面安裝正在開發(fā)的app，用數(shù)據(jù)線連接電腦，配置好ip和端口，點(diǎn)擊wifi增量同步，可以編輯代碼，在app里面實(shí)現(xiàn)同步更新
在手機(jī)上也可以額外安裝該app，那么可以使用該app，進(jìn)行安裝、推送更新等測(cè)試
二、API對(duì)象
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; // 比如：中國移動(dòng)
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 來進(jìn)行布局
var winHeight = api.winHeight; // 比如： 568
var frameName = api.frameName; //比如： trans-con
var frameWidth = api.frameWidth; // 比如： 320,若當(dāng)前環(huán)境為 window 中，則值和 winWidth 相同
var frameHeight = api.frameHeight; // 比如： 504,若當(dāng)前環(huán)境為 window 中，則值和 winHeight 相同
var pageParam = api.pageParam; //比如： {"name" : "tans-con"} JSON用于獲取頁面間傳遞的參數(shù)值，為 openWin()、openFrame() 等方法中的 pageParam 參數(shù)對(duì)應(yīng)值
var wgtParam = api.wgtParam; //比如： {"name": "API Demo"},用于獲取 widget 間傳遞的參數(shù)值，為 openWidget() 方法中的 wgtParam 參數(shù)對(duì)應(yīng)值
var appParam = api.appParam; // 比如： appLoader,當(dāng)應(yīng)用被第三方應(yīng)用打開時(shí)，傳遞過來的參數(shù)，字符串類型
var statusBarAppearance = api.statusBarAppearance; // 比如： true,當(dāng)前應(yīng)用狀態(tài)欄是否支持沉浸式效果，布爾類型
var wgtRootDir = api.wgtRootDir; //widget: //協(xié)議對(duì)應(yīng)的真實(shí)目錄，即 widget 網(wǎng)頁包的根目錄，字符串類型
var fsDir = api.fsDir; //fs: //協(xié)議對(duì)應(yīng)地真實(shí)目錄，字符串類型
var cacheDir = api.cacheDir; //cache://協(xié)議對(duì)應(yīng)的真實(shí)目錄，字符串類型
}
三、跳轉(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是在傳值時(shí)的變量名,若變量名為name,這里就寫api.pageParam.name).
3、關(guān)閉頁面
api.closeWin({name:pagename});pagename是所要關(guān)閉頁面的全名稱四、沉浸式效果實(shí)現(xiàn)
在config.xml文件配置是否開啟:
沉浸式效果配置說明
在Window或Frame的apiready事件后，調(diào)用$api.fixStatusBar()方法;
五、CSS Framework
清除瀏覽器默認(rèn)樣式（借鑒CSS Reset，Normalize.css）
禁用系統(tǒng)長按菜單（-webkit-touch-callout:none）
禁用字體大小自動(dòng)調(diào)整（-webkit-text-size-adjust:none）
去掉點(diǎn)擊高亮（-webkit-tap-highlight-color:rgba(0, 0, 0, 0)）
禁止選擇內(nèi)容（-webkit-user-select:none）
清除浮動(dòng)（.clearfix）
加載更多默認(rèn)樣式（.loading_more）
六、選擇器
var main = $api.byId('main');
var headerPos = $api.offset(header);
七、pageParam
頁面參數(shù)，JSON 對(duì)象類型
用于獲取頁面間傳遞的參數(shù)值，為 openWin()、openFrame() 等方法中的 pageParam 參數(shù)對(duì)應(yīng)值
八、打開一個(gè)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)閉一個(gè)frame組
api.closeFrameGroup({
name: 'group1'
});九、apicloud使用ajax，傳遞參數(shù)，data的使用方法和qjuery的不一樣
data : {
values: {
deviceName:"",
}
}外面套上values
十、tapmode和parseTapmode屬性詳解
一、在開發(fā)的過程中，直接給元素綁定事件屬性onclick，會(huì)點(diǎn)擊沒反應(yīng)，這時(shí)，給標(biāo)簽加上tapmode，就解決了問題，查了一下，原來，tapmode具有速點(diǎn)擊事件功能，在觸發(fā)事件中加入tapmode可以消除JS中標(biāo)準(zhǔn)click事件的300毫秒延遲；同時(shí)，它具有觸發(fā)可顯示樣式的效果，tapmode='css樣式類' 屬性，當(dāng)該元素touchstart touchmove的時(shí)候就會(huì)展現(xiàn)css樣式。
實(shí)例
function setAlert(){
alert('你好');
}
1.tapmode具有速點(diǎn)擊事件功能，在觸發(fā)事件中加入tapmode可以消除JS中標(biāo)準(zhǔn)click事件的300毫秒延遲；
2.tapmode具有觸發(fā)可顯示樣式的效果，tapmode='xxx'屬性，’xxx‘為css樣式類，當(dāng)該元素touchstart touchmove的時(shí)候就會(huì)展現(xiàn)xxx樣式。
二、parseTapmode屬性
解析元素 tapmode 屬性，優(yōu)化點(diǎn)擊事件處理
默認(rèn)頁面加載完成后，引擎會(huì)對(duì) dom 里面的元素進(jìn)行 tapmode 屬性解析，若是之后用代碼創(chuàng)建的 dom 元素，則需要調(diào)用該方法后 tapmode 屬性才會(huì)生效
api.parseTapmode()
本文名稱：APICloud教程
網(wǎng)頁鏈接：http://www.dlmjj.cn/article/ihjjgp.html
