|
首先歡迎加入APIcloud，很多朋友進來后一頭霧水,，不知道從哪下手,，今天就做個詳細的流程出來。 要想用APIcloud開發(fā)一套APP,，前提得熟悉HTML ,、JS 、CSS,。如果再熟悉點PHP ,JSP就更好了,，可以實現(xiàn)與自己的服務器對接,。 第一步：注冊賬號，下載Studio開發(fā)工具,。 打開IDE后依次---文件---新建---創(chuàng)建APIcloud項目,。創(chuàng)建完成后在左側(cè)【我的APP項目】里面會顯示新建的項目，同時登錄到網(wǎng)站控制臺里面也會看到剛創(chuàng)建的項目,。如下圖： 
左側(cè)我的APP項目里面會顯示剛創(chuàng)建的項目及文件,，如下圖 
這些文件就是APP的所有東西了，也就是widget包,，可以參考http://docs./APIClou ... ge-structure-manual,，看一下包文件的結(jié)構(gòu)說明 到此一個項目創(chuàng)建完成，修改下index.html（入口文件）,，連上手機,，CTRL+R進行真機調(diào)試，會發(fā)現(xiàn)手機上出現(xiàn)個APPLoader,，這里面包含了你調(diào)試的所有項目,。再開發(fā)過程中可以通過這個來真機調(diào)試。 第二步,，開發(fā)你的第一個APP 項目創(chuàng)建完成,，調(diào)試也做好了，下面就開始開發(fā)你的APP吧 如同開發(fā)web頁面一樣,，一個HTML文件然后加上CSS和JS,，來實現(xiàn)布局和效果。CSS文件夾存放你的樣式,，script來存放你的JS文件,，html文件夾存放你的模板文件，index.html為APP的入口文件,，就是好比個首頁了,。 我們來了解一下一個APP的結(jié)構(gòu)，常用的APP布局有頂部導航,，中間內(nèi)容區(qū)域和底部導航,。如下圖： 
在用APICLOUD的APP的開發(fā)過程中，一個頁面的布局方式最好是通過窗口的套用來完成,即win+frame,，舉個例子來說明,，我們在做網(wǎng)站后臺的時候為了防止點擊菜單頁面刷新，我們有時會采用的布局是先做一個大框架,，然后通過iframe來嵌套其他頁面,，然后我們開發(fā)的APP就好比是一個瀏覽器，我們可以通過iframe來顯示一個頁面，也可以在瀏覽器新窗口打開一個頁面,。那么回到我們的APP里面,，index.html為入口框架，通過openFrame或openFrameGroup來加載其他頁面（好比那個iframe了）,，如果想在新窗口中打開就使用openWin,。 為了APP更流暢點，我們有時會一個頁面嵌套多個frame來實現(xiàn)效果,。 再回到上面的APP布局圖里面分析一下,，在index.html我們就只可以布局 上下導航，中間內(nèi)容區(qū)域通過openFrame或者openFrameGroup來加載其他頁面的方式來實現(xiàn),。如果是打開一個窗口,，通過openWin來打開一個頁面，同理,，然后打開的這個窗口里面再通過openFrame或或openFrameGroup來嵌套其他頁面,。 openWin openFrame為apicloud的api對象方法，可以參考文檔來看下使用說明,。http://docs./%E7%AB%AFAPI/api 下面通過簡單的實例說明一下 index.html---入口 html/frm_list.html html/win_show.html html/frm_list.html index.html <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no"/> <title>demo</title> </head> <body> <header>頂部導航</header> <footer>底部菜單</footer> </body> </html> CSS樣式就不多說了,，跟web是一樣的用法，上下導航布局完成后通過js來加載frm_list.html頁面,openFrame的其他參數(shù)請參考文檔 <script> apiready = function () { api.openFrame({ name: 'frm_list', url: 'html/frm_list.html' }) } </script> 這樣打開APP后等于我們看到的就是list這個頁面了 frm_list.html中打開新窗口 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no"/> <title>demo</title> </head> <body> <ul> <li>列表一</li> </ul> </body> <script type="text/javascript"> apiready=function (argument) { } function openShow(){ api.openWin({ name: 'win_show', url: 'win_show.html' }) } </script> </html> 加個ONCLICK事件,，跟web是一樣滴 win_show.html的寫法,，這個頁面我們就當個窗口來用，通過frame來加載詳細內(nèi)容頁面： <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no"/> <title>demo</title> </head> <body> <header>內(nèi)容</header> </body> <script type="text/javascript"> apiready=function (argument) { api.openFrame({ name: 'frm_show', url: 'frm_show.html' }) } </script> </html> 那么frm_show.html怎樣來寫就自己動手寫一個了,， 通過更多的JS和css3動畫效果，我們可以讓APP更豐富些,。流程都熟悉了大家可以上手做個簡單的來試一下,。 第三：APP開發(fā)注意幾點事項 html5：在創(chuàng)建html時為了防止頁面縮放等不兼容效果，要創(chuàng)建個viewport <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 在IOS設備上,，有時會將數(shù)字轉(zhuǎn)為手機號,，這里也要禁止下 <meta name="format-detection" content="telephone=no"/> CSS：在定義CSS時記得要定義下默認樣式 api.js： 為apicloud封裝的js方法，如果使用記得先要引入,，在script文件夾內(nèi) config.xml的配置請參考官方文檔 http://docs./APICloud/%E6%8A%80%E6%9C%AF%E4%B8%93%E9%A2%98/app-config-manual ----------------------------------------------------------------------------------------------------------------------------------------------- 希望該教程能對apicloud的新會員有所幫助,，歡迎提問，下一篇會講解一下自己的服務器對接這塊 新手入門教程,，從0開始入手APIcloud（一） 新手入門教程,，從0開始入手APIcloud（二） 新手進階教程，從0入手APICloud（三）-- 緩存方案 |
|
|
來自： shopnc > 《apicloud》
