- 引擎或模塊問題:遇到應(yīng)用層無法解決的問題,如果能確定需要引擎和模塊支持的,不要自己想辦法繞過去,要第一時間在開發(fā)者社區(qū)提交問題,或找APICloud項目經(jīng)理提出。
!!!注意!!!: 在開發(fā)者社區(qū)中,會有版主和APICloud技術(shù)支持對您的問題進(jìn)行驗證和解答。
!!!注意!!!: 定制平臺項目問題提出后2天之內(nèi)沒有解決的,可以直接找APICloud項目總監(jiān)投訴。
- 開發(fā)工具:推薦使用Sublime Text+APICloud插件,調(diào)試工具使用自定義Loader,真機(jī)同步使用WiFi真機(jī)同步,日志輸出使用WiFi日志輸出。
推薦視頻:Sublime使用教程Window&Mac
推薦文檔:Sublime插件使用說明
- 前端框架:盡量不要使用jQuery、AngularJS、BootStrap等重型的框架,擺脫對$的依賴,培養(yǎng)自己動手的習(xí)慣,但是可以根據(jù)功能需求在特定頁面中使用功能獨(dú)立的Mobile First框架
默認(rèn)樣式設(shè)置、DOM操作和字符串處理推薦使用APICloud前端框架(api.js和api.css)
移動端UI框架推薦使用AUI
- 屏幕適配:要正確設(shè)置viewport,建議使用720*1280尺寸的UI圖,優(yōu)先考慮絕對計量類的單位 px,應(yīng)先在UI效果圖中(如720x1280尺寸圖)量出元素的寬或高對應(yīng)的 px 值,再除以屏幕倍率(如分辨率為720x1280設(shè)備的屏幕倍率通常為 2) 來得到書寫樣式時的確切數(shù)值。
!!!注意!!!: APICloud項目驗收時會根據(jù)設(shè)計提供的UI圖尺寸(如720x1280),在對應(yīng)屏幕分辨率的手機(jī)設(shè)備(如720x1280)中安裝運(yùn)行,將運(yùn)行后的頁面與UI效果圖一一進(jìn)行對比。
!!!注意!!!: H5界面的實現(xiàn)要與UI設(shè)計完全一致,精細(xì)到0.5px。
!!!注意!!!: openFrame/FrameGroup等時,應(yīng)使用auto結(jié)合margin布局,以動態(tài)適應(yīng)變化無常的android設(shè)備屏幕。
推薦文檔:屏幕適配原理及實現(xiàn)
- UI布局:要求使用APICloud五大組件(Widget、Layout、Window、Frame、UIModules)進(jìn)行APP的UI架構(gòu)設(shè)計。
!!!注意!!!: SPA的模式不適合APP開發(fā),DIV+JS的窗口切換影響用戶體驗。APICloud的UI結(jié)構(gòu)設(shè)計可以從整體上解決H5在Interaction、Animation和Render方面的性能問題。
推薦文檔:培訓(xùn)講義:APICloud界面布局和APP架構(gòu)設(shè)計
- 窗口切換:避免出現(xiàn)任何卡頓、閃屏、白屏等情況;動畫效果流暢,不能出現(xiàn)丟幀的情況。
!!!注意!!!: 要理解并控制窗口好切與界面渲染之間的關(guān)系,要適時更新UI,如果Window或Frame中所加載的靜態(tài)頁面內(nèi)容過多,建議等動畫執(zhí)行完畢再進(jìn)行頁面的加載和渲染。無論是Android還是iOS系統(tǒng),在進(jìn)行窗口切換的時候,如果窗體本身正在進(jìn)行渲染(Window或Frame所加載的網(wǎng)頁沒有渲染完畢),則會影響切換動畫運(yùn)行的流暢性,出現(xiàn)卡頓或丟幀的情況。
!!!注意!!!: 建議在打開Window或Frame的時候,如果所加載的靜態(tài)網(wǎng)頁不能過大,內(nèi)容不要太多,不能快速的渲染完畢。為了不影響窗體切換動畫的執(zhí)行,可以在切換動畫執(zhí)行完畢后再進(jìn)行動態(tài)數(shù)據(jù)的加載和界面的刷新。
- 窗口切換動畫:如果沒有特別要求盡量使用平臺默認(rèn)的動畫效果,即api.openWin時不指定動畫類型,使用默認(rèn)值。
!!!注意!!!: 無論是在Android還是iOS上,APICloud引擎會從整體上保證默認(rèn)的窗口動畫類型是性能最好的。
!!!注意!!!: 三星、小米等大屏Android6.0及以上手機(jī),可以嘗試在云編譯的時候選擇使用Android引擎渲染優(yōu)化版本
!!!注意!!!: 如果窗體所加載的靜態(tài)網(wǎng)頁內(nèi)容比較多(如:初始的Dom樹很大或圖片很多),在Android平臺上openWindow的時候可以嘗試使用movein或fade的動畫類型
- 窗口關(guān)閉處理:開發(fā)過程中根據(jù)需要處理Android的keyback事件和iOS的回滑手勢。
!!!注意!!!:Android上要在Window中才能監(jiān)聽到keyback事件,F(xiàn)rame中無法監(jiān)聽到keyback事件;在iOS7以上的系統(tǒng)上可以在openWin的時候通過設(shè)置slidBackEnabled參數(shù)來實現(xiàn)是否支持回滑手勢關(guān)閉窗口的功能。
!!!注意!!!:在后臺關(guān)閉頁面時,應(yīng)注意在關(guān)閉方法中添加animation:{type:"none"},來防止切換動畫的出現(xiàn)影響用戶體驗;
窗體背景圖片:避免使用H5來實現(xiàn)body級別的背景圖片,可以使用Window或Frame的bgColor參數(shù)以原生的方式來高效實現(xiàn)
!!!注意!!!: 不建議通過給body元素指定background的方式來實現(xiàn)body級別的背景圖片,特別是高清的大背景圖片用H5方式實現(xiàn)會嚴(yán)重影響渲染性能。導(dǎo)航切換:切換底部導(dǎo)航或頂部分類菜單的時候,要求切換體驗平滑,切換過程不能出現(xiàn)白屏、閃屏等現(xiàn)象
!!!注意!!!:建議使用FrameGroup來實現(xiàn)Frame的切換,要按需合理配置預(yù)加載的Frame數(shù)量,每個Frame要有明顯的刷新機(jī)制,不能每次切換都進(jìn)行刷新和重繪。
!!!注意!!!:如果使用模塊來實現(xiàn)底部導(dǎo)航欄推薦使用NVTabBar模塊。
- 列表滾動:滾動效果要平滑流暢,不能使用iscroll等JS的方式來實現(xiàn)滾動
!!!注意!!!:建議使用Window+Frame的UI結(jié)構(gòu),以Native的方式來實現(xiàn)列表頁面的滾動。
!!!注意!!!:在iOS上要支持點擊狀態(tài)欄能自動回到頂部的效果,可以通過在openWin或openFrame的時候配置scrollToTop參數(shù)來實現(xiàn);此效果在FrameGroup中使用的時候要注意確保只有當(dāng)前顯示的Frame的scrollToTop屬性為true,其它Frame的scrollToTop屬性為false。
- 界面之間參數(shù)傳遞:可以使用pageParam來實現(xiàn),但要避免使用過大的pageParam
!!!注意!!!: 界面切換的時候如果pageParam過大,則JSON解析就會比較耗時,影響界面切換的執(zhí)行和動畫運(yùn)行體驗。
!!!注意!!!: 不要使用使用URL+?的形式進(jìn)行參數(shù)的傳遞,此方式在Android上存在兼容問題。
- 交互響應(yīng):點擊事件必須處理click事件的300ms延遲問題,優(yōu)化點擊響應(yīng)速度,建議通過為可點擊的元素增加tapmode屬性來優(yōu)化點擊速度。
!!!注意!!!:引擎對具有tapmode屬性的元素點擊事件的優(yōu)化處理會在apiready事件觸發(fā)之前,根據(jù)當(dāng)前的dom樹自動進(jìn)行優(yōu)化。在apiready之后加載的數(shù)據(jù)使用要顯式的調(diào)用api.parseTapmode方法來進(jìn)行主動的tapmode處理,例如在上拉加載更多數(shù)據(jù)后,要調(diào)用一下api.parseTapmode方法.
!!!注意!!!:要按UE設(shè)計確定可點擊區(qū)域的大小,可以適當(dāng)擴(kuò)大點擊區(qū)域來保障點擊反應(yīng)的靈敏。
!!!注意!!!:api.parseTapmode調(diào)用會有性能成本,不需要的情況下不要隨便調(diào)用。
!!!注意!!!:要按照需求明確所有按鈕點擊時的交互效果,為tapmode屬性設(shè)置正確的樣式值,對于沒有交互效果的點擊實現(xiàn),可以不為tapmode屬性指定任何樣式,但是為了優(yōu)化點擊速度,必須要給元素增加tapmode屬性。
下拉刷新效果:建議不要使用APICloud默認(rèn)的下拉刷新效果(灰色箭頭),要使用模塊來實現(xiàn)UE/UI所設(shè)計的下拉刷新效果。
!!!注意!!!:如果UE/UI所設(shè)計的下拉刷新效果,使用目前APICloud平臺模塊無法實現(xiàn),要第一時間跟項目經(jīng)理提出,由APICloud進(jìn)行模塊封裝來實現(xiàn)。網(wǎng)絡(luò)通信方式:必須使用api.ajax,并且設(shè)置合適的超時時間,并進(jìn)行超時和請求失敗的異常情況。
!!!注意!!!:JQuery的ajax在開啟全包加密的時候會有問題,不建議使用。網(wǎng)絡(luò)請求狀態(tài)處理:APP要判斷當(dāng)前的網(wǎng)絡(luò)狀態(tài),請求過程要按UI設(shè)計有明顯的狀態(tài)提示;網(wǎng)絡(luò)超時或網(wǎng)絡(luò)請求失敗的時候要進(jìn)行相關(guān)處理并有錯誤提示。
api對象和dialogBox模塊下面封裝了常用的提示對話框方法。數(shù)據(jù)緩存:要對GET請求進(jìn)行數(shù)據(jù)的緩存處理,在用戶沒用網(wǎng)絡(luò)的情況下,仍然能夠看到APP的靜態(tài)界面布局以及上次已經(jīng)緩存的服務(wù)器端數(shù)據(jù)。
!!!注意!!!:可以在api.ajax方法中設(shè)置cache參數(shù)為true來開啟緩存;也可以使用api.writeFile和api.readFile方法,在獲取數(shù)據(jù)后自己實現(xiàn)簡單的數(shù)據(jù)緩存,或使用fs和db模塊來緩存數(shù)據(jù)。圖片緩存:必須手動進(jìn)行圖片的緩存處理,需要調(diào)用api.imageCache方法實現(xiàn)。
!!!注意!!!:Webview默認(rèn)的緩存機(jī)制存在缺陷,在跨窗口時表現(xiàn)不好,并且存在對所緩存圖片的尺寸限制等問題,所有APICloud應(yīng)用的圖片緩存不能依賴Webview默認(rèn)的緩存機(jī)制,必須手動實現(xiàn)。圖片處理:要減少由圖片造成的內(nèi)存占用,減少圖片縮放等耗性能的操作,服務(wù)器端要根據(jù)產(chǎn)品設(shè)計提供合適尺寸的大圖、小圖、縮略圖等
!!!注意!!!:APICloud應(yīng)用所占用的內(nèi)存大小由所加載的網(wǎng)頁大小決定,通常圖片過多過大會造成整個應(yīng)用的內(nèi)存占用過大,另外在瀏覽器中進(jìn)行圖片的縮放處理成本也很高。
!!!注意!!!:列表中的頭像等縮略圖,寬高應(yīng)控制在250-300px之間,小于這個范圍大屏手機(jī)容易失真,大于這個范圍消耗更多內(nèi)存和性能。
- 狀態(tài)欄效果:Android和iOS上都要求實現(xiàn)沉浸式狀態(tài)欄效果的適配
!!!注意!!!:可以通過在config.xml中開啟沉浸式效果]配置項,然后在Window或Frame的apiready事件后,調(diào)用$api.fixStatusBar()方法來實現(xiàn)。如果由于各種原因造成apiready執(zhí)行太晚,當(dāng)Header高度變化時會產(chǎn)生頁面跳動的現(xiàn)象,也可以根據(jù)需求自己來實現(xiàn),在合適的時機(jī)(如onload事件中)判斷平臺類型后,手動調(diào)整Header的高度,Android的狀態(tài)欄高度是25px,iOS是20px。
!!!注意!!!:要根據(jù)當(dāng)前界面的背景顏色,通過調(diào)用api.setStatusBarStyle方法來設(shè)置當(dāng)前狀態(tài)欄的風(fēng)格或背景色。
- 鍵盤處理:在打開帶有輸入框的Window或Frame的是,默認(rèn)要自動讓輸入框自動獲得焦點。
!!!注意!!!:在config.xml中有關(guān)于鍵盤顯示方式,彈出方式和第三方鍵盤使用的各種配置,要根據(jù)需要正確配置。
!!!注意!!!:由于在Android上input元素的focus事件存在兼容性問題,要完成輸入框自動獲取焦點的功能,建議使用擴(kuò)展模塊UIInput模塊。
!!!注意!!!:在打開Window的時候,如果自動彈出鍵盤,彈出鍵盤的行為影響切換動畫執(zhí)行的流暢性,出現(xiàn)卡頓或丟幀的情況。建議可以對鍵盤彈出的行為設(shè)置適當(dāng)?shù)难舆t,例如在apiready中設(shè)置延遲200ms后再讓UIInut元素獲得焦點。
!!!注意!!!:可以在同一個界面中(如登陸界面)創(chuàng)建多個UIInput模塊的實例,來實現(xiàn)多個輸入框。
!!!注意!!!:輸入框位于設(shè)備屏幕下半部份的應(yīng)用場景,config.xml中的的鍵盤彈出模式參數(shù)softInputMode務(wù)必設(shè)置為resize模式,或者使用UIInput相關(guān)模塊。
!!!注意!!!:為了讓應(yīng)用看起來更接近原生,盡量配置config.xml中的softInputBarEnabled參數(shù)來隱藏iOS鍵盤上面的工具條。也可以在openWin或openFrame的時候通過softInputBarEnabled參數(shù)來單獨(dú)指定。
- 配置外部字體:可以根據(jù)項目的需要引入外部字體,但是要控制外部字體文件的大小,字體文件不宜過大。
!!!注意!!!:Android上默認(rèn)有3種字體:sans, serif, monospace,在開發(fā)人員不指定的情況下,默認(rèn)為sans,這3種字體在開發(fā)過程中都是通過字體名進(jìn)行引用,系統(tǒng)會自動對應(yīng)到內(nèi)置字體文件。但是,對于外部的字體文件,Android上無法實現(xiàn)通過引擎配置后成為內(nèi)置的字體文件,只能通過@font-face的方式在每個頁面中重復(fù)加載,每一個要使用外部字體的Window或Frame都要引入一遍,如果字體體積過大會占用大量內(nèi)存,并且影響頁面的加載速度。
!!!注意!!!:iOS可以在config.xml文件中進(jìn)行外部字體文件的配置,配置完成后就可以像系統(tǒng)內(nèi)置字體一樣在頁面中指定了,無需在每個Window或Frame中通過@font-face的方式引入。
- JavaScript模版:建議使用doT模版等輕量級的模版。
!!!注意!!!:要優(yōu)先選擇使用Mobile First的模版,體量小,生成的文本效率高。
- 支付業(yè)務(wù):支付寶,微信等密鑰必須存放在服務(wù)器端,不應(yīng)暴露在APP代碼中。
!!!注意!!!:支付訂單金額應(yīng)由服務(wù)器產(chǎn)生,服務(wù)器一定要對支付寶、微信服務(wù)器回調(diào)的支付結(jié)果做最終校驗。
!!!注意!!!:alipay模塊要調(diào)用payOrder方法來進(jìn)行支付,自己處理訂單信息以及簽名過程;不要使用config接口和pay接口把訂單信息以及簽名過程交予模塊內(nèi)部處理(官方提供此種支付方式只是為了方便開發(fā)者調(diào)試)。
- 對于文件、數(shù)據(jù)庫、偏好設(shè)置等操作推薦使用同步接口(方法名增加Sync后綴)來簡化代碼的實現(xiàn),解決異步callback層次過深的問題。
fs對象的同步方法
對于異步callback嵌套的問題,也可以通過調(diào)用api.sendEvent方法來解耦,通過事件機(jī)制來實現(xiàn)。
網(wǎng)頁代碼組織:盡量將同一個界面的HTML、CSS和JS代碼寫在一個html文件中,提高頁面加載速度;公用的CSS、JS盡量少和小,不要在html頁面中隨意加載無用的CSS或JS文件;盡量減少頁面中的link或script標(biāo)簽的使用
!!!注意!!!: 在瀏覽器中,外部文件的引入和加載過程是同步操作,影響整個頁面的執(zhí)行效率。應(yīng)用代碼組成:要遵循APICloud Widget包結(jié)構(gòu),結(jié)構(gòu)清晰規(guī)范。
推薦文檔:APICloud Widget包結(jié)構(gòu)
28.文件命名規(guī)范:要有統(tǒng)一規(guī)范,如首頁Windowhome文件命名為home.html,首頁Frame文件命名為home_frame.html,所有文件名(網(wǎng)頁和資源文件)避免使用中文命名、也不要包含大寫字母。
!!!注意!!!:原生系統(tǒng)內(nèi)部資源文件管理不支持中文名和大寫字母,使用中文或大寫的資源文件在真實設(shè)備運(yùn)行中會出現(xiàn)各種問題。
!!!注意!!!:例如在自定義Loader中運(yùn)行沒有問題,但云編譯的包就有問題,出現(xiàn)頁面無法加載或資源找不到等問題,通常就是使用了中文或大寫的文件命名。因為官方Loader或自定義Loader的Widget是存放在SDCard中,而云編譯后的安裝包Widget是存在應(yīng)用的沙箱中,沙箱中是要采用的原生系統(tǒng)的內(nèi)部資源文件管理機(jī)制。
- 安全機(jī)制:要從代碼、數(shù)據(jù)存儲、網(wǎng)絡(luò)通信等方面保證APP的內(nèi)容和數(shù)據(jù)的安全。
!!!注意!!!:開發(fā)過程中每次云編譯的無論測試包還是正式包都建議選擇全包加密,因為在APICloud定制平臺上,客戶可以全程監(jiān)控項目的實施過程,可以查看代碼提交紀(jì)錄,但是沒有獲取代碼的權(quán)限;客戶可以查看云編譯紀(jì)錄,如果編譯的安裝包沒有使用全包加密則客戶可能通過解壓安裝包輕松獲取APP的H5源碼,從而影響后續(xù)項目款的按時支付。
!!!注意!!!: config.xml中的access配置項可以配置在哪些類型的頁面里面可以訪問APICloud的擴(kuò)展API方法,可訪問域的設(shè)置以及越獄限制等。
!!!注意!!!: config.xml中的checkSslTrusted配置項配置是否檢查https證書是受信任的。
!!!注意!!!: config.xml中的appCertificateVerify配置項配置是否校驗應(yīng)用證書。若配置為true,應(yīng)用被重簽名后將無法再使用。
!!!注意!!!: 對重要參數(shù)變量進(jìn)行必要的加密處理,對重要的常量數(shù)據(jù)應(yīng)放入key.xml中,使用api.loadSecureValue方法進(jìn)行數(shù)據(jù)讀取;
- 安裝包大小:云編譯生成的安裝包的大小由4部分內(nèi)容組成:引擎、模塊、網(wǎng)頁文件和資源文件。引擎的大小是固定的(Android約為400K,iOS約為1.2M),應(yīng)該控制減少模塊、網(wǎng)頁文件和資源文件的大小,刪除無用的模塊和文件。
!!!注意!!!:編譯正式版本的時候,要檢查一下控制臺選定的模塊是否都在實際代碼中使用到了。一些開發(fā)者在開發(fā)過程中會不斷引入一些“預(yù)計使用”或"測試使用"的模塊,但是在最終的代碼中沒有使用,這部分模塊要云編譯的時候去掉,無用的模塊不僅僅會增大安裝包的體積,還有可能引起于其它模塊的沖突或編譯選項,造成編譯失敗。
!!!注意!!!:在config.xml文件中配置的模塊,在控制臺無法刪除,因為config中feature配置項的forceBind屬性默認(rèn)true,是強(qiáng)制綁定的,可以通過在配置forceBind屬性來修過。
!!!注意!!!:在編譯正式版本的時候,要刪除Widget包中的icon和launch目錄下的圖片以減小安裝包體積。