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