如何開(kāi)發(fā)出優(yōu)秀的APICloud應(yīng)用

2022-06-06 16:31 更新
  • APICloud定制平臺(tái)項(xiàng)目實(shí)施規(guī)范
  • APICloud應(yīng)用優(yōu)化策略Top30
  • 如何開(kāi)發(fā)出運(yùn)行體驗(yàn)良好、高性能的App
  • 如何開(kāi)發(fā)出客戶(hù)滿(mǎn)意、能夠順利交付的App

1. 引擎或模塊問(wèn)題：

遇到應(yīng)用層無(wú)法解決的問(wèn)題，如果能確定需要引擎和模塊支持的，不要自己想辦法繞過(guò)去，要第一時(shí)間在開(kāi)發(fā)者社區(qū)提交問(wèn)題，或找APICloud項(xiàng)目經(jīng)理提出。

  • 在開(kāi)發(fā)者社區(qū)中，會(huì)有版主和APICloud技術(shù)支持對(duì)您的問(wèn)題進(jìn)行驗(yàn)證和解答。
  • 定制平臺(tái)項(xiàng)目問(wèn)題提出后2天之內(nèi)沒(méi)有解決的，可以直接找APICloud項(xiàng)目總監(jiān)投訴。

2. 開(kāi)發(fā)工具：

推薦使用APICloud Studio3，調(diào)試工具使用自定義Loader，真機(jī)同步使用WiFi真機(jī)同步，日志輸出使用WiFi日志輸出。

3. 前端框架：

盡量不要使用jQuery、AngularJS、BootStrap等重型的框架，擺脫對(duì)$的依賴(lài)，培養(yǎng)自己動(dòng)手的習(xí)慣，但是可以根據(jù)功能需求在特定頁(yè)面中使用功能獨(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ì)量類(lèi)的單位 px，應(yīng)先在UI效果圖中（如720x1280尺寸圖）量出元素的寬或高對(duì)應(yīng)的 px 值，再除以屏幕倍率（如分辨率為720x1280設(shè)備的屏幕倍率通常為 2) 來(lái)得到書(shū)寫(xiě)樣式時(shí)的確切數(shù)值。

  • APICloud項(xiàng)目驗(yàn)收時(shí)會(huì)根據(jù)設(shè)計(jì)提供的UI圖尺寸（如720x1280），在對(duì)應(yīng)屏幕分辨率的手機(jī)設(shè)備(如720x1280）中安裝運(yùn)行，將運(yùn)行后的頁(yè)面與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)變化無(wú)常的android設(shè)備屏幕。
  • 推薦文檔：屏幕適配原理及實(shí)現(xiàn)（未處理

5. UI布局：

  • 要求使用APICloud五大組件（Widget、Layout、Window、Frame、UIModules）進(jìn)行APP的UI架構(gòu)設(shè)計(jì)。
  • SPA的模式不適合APP開(kāi)發(fā)，DIV＋JS的窗口切換影響用戶(hù)體驗(yàn)。APICloud的UI結(jié)構(gòu)設(shè)計(jì)可以從整體上解決H5在Interaction、Animation和Render方面的性能問(wèn)題。
  • 推薦文檔：培訓(xùn)講義：APICloud界面布局和APP架構(gòu)設(shè)計(jì)（未處理）

6. 窗口切換：

避免出現(xiàn)任何卡頓、閃屏、白屏等情況；動(dòng)畫(huà)效果流暢，不能出現(xiàn)丟幀的情況。

要理解并控制窗口好切與界面渲染之間的關(guān)系，要適時(shí)更新UI，如果Window或Frame中所加載的靜態(tài)頁(yè)面內(nèi)容過(guò)多，建議等動(dòng)畫(huà)執(zhí)行完畢再進(jìn)行頁(yè)面的加載和渲染。無(wú)論是Android還是iOS系統(tǒng)，在進(jìn)行窗口切換的時(shí)候，如果窗體本身正在進(jìn)行渲染（Window或Frame所加載的網(wǎng)頁(yè)沒(méi)有渲染完畢），則會(huì)影響切換動(dòng)畫(huà)運(yùn)行的流暢性，出現(xiàn)卡頓或丟幀的情況。

建議在打開(kāi)Window或Frame的時(shí)候，如果所加載的靜態(tài)網(wǎng)頁(yè)不能過(guò)大，內(nèi)容不要太多，不能快速的渲染完畢。為了不影響窗體切換動(dòng)畫(huà)的執(zhí)行，可以在切換動(dòng)畫(huà)執(zhí)行完畢后再進(jìn)行動(dòng)態(tài)數(shù)據(jù)的加載和界面的刷新。

7. 窗口切換動(dòng)畫(huà)：

  • 如果沒(méi)有特別要求盡量使用平臺(tái)默認(rèn)的動(dòng)畫(huà)效果，即api.openWin時(shí)不指定動(dòng)畫(huà)類(lèi)型，使用默認(rèn)值。
  • 無(wú)論是在Android還是iOS上，APICloud引擎會(huì)從整體上保證默認(rèn)的窗口動(dòng)畫(huà)類(lèi)型是性能最好的。
  • 三星、小米等大屏Android6.0及以上手機(jī)，可以嘗試在云編譯的時(shí)候選擇使用Android引擎渲染優(yōu)化版本
  • 如果窗體所加載的靜態(tài)網(wǎng)頁(yè)內(nèi)容比較多(如：初始的Dom樹(shù)很大或圖片很多)，在Android平臺(tái)上openWindow的時(shí)候可以嘗試使用movein或fade的動(dòng)畫(huà)類(lèi)型（未處理）

8. 窗口關(guān)閉處理：

開(kāi)發(fā)過(guò)程中根據(jù)需要處理Android的keyback事件和iOS的回滑手勢(shì)。

Android上要在Window中才能監(jiān)聽(tīng)到keyback事件，F(xiàn)rame中無(wú)法監(jiān)聽(tīng)到keyback事件；在iOS7以上的系統(tǒng)上可以在openWin的時(shí)候通過(guò)設(shè)置slidBackEnabled參數(shù)（未處理）來(lái)實(shí)現(xiàn)是否支持回滑手勢(shì)關(guān)閉窗口的功能。

在后臺(tái)關(guān)閉頁(yè)面時(shí)，應(yīng)注意在關(guān)閉方法中添加animation:{type:"none"}，來(lái)防止切換動(dòng)畫(huà)的出現(xiàn)影響用戶(hù)體驗(yàn)；

9. 窗體背景圖片：

  • 避免使用H5來(lái)實(shí)現(xiàn)body級(jí)別的背景圖片，可以使用Window或Frame的bgColor參數(shù)以原生的方式來(lái)高效實(shí)現(xiàn)
  • 不建議通過(guò)給body元素指定background的方式來(lái)實(shí)現(xiàn)body級(jí)別的背景圖片，特別是高清的大背景圖片用H5方式實(shí)現(xiàn)會(huì)嚴(yán)重影響渲染性能。

10. 導(dǎo)航切換：

切換底部導(dǎo)航或頂部分類(lèi)菜單的時(shí)候，要求切換體驗(yàn)平滑，切換過(guò)程不能出現(xiàn)白屏、閃屏等現(xiàn)象

建議使用FrameGroup來(lái)實(shí)現(xiàn)Frame的切換，要按需合理配置預(yù)加載的Frame數(shù)量，每個(gè)Frame要有明顯的刷新機(jī)制，不能每次切換都進(jìn)行刷新和重繪。

如果使用模塊來(lái)實(shí)現(xiàn)底部導(dǎo)航欄推薦使用NVTabBar模塊。

11. 列表滾動(dòng)：

滾動(dòng)效果要平滑流暢，不能使用iscroll等JS的方式來(lái)實(shí)現(xiàn)滾動(dòng)

建議使用Window+Frame的UI結(jié)構(gòu)，以Native的方式來(lái)實(shí)現(xiàn)列表頁(yè)面的滾動(dòng)。

在iOS上要支持點(diǎn)擊狀態(tài)欄能自動(dòng)回到頂部的效果，可以通過(guò)在openWin或openFrame的時(shí)候配置scrollToTop參數(shù)（未處理）來(lái)實(shí)現(xiàn)；此效果在FrameGroup中使用的時(shí)候要注意確保只有當(dāng)前顯示的Frame的scrollToTop屬性為true，其它Frame的scrollToTop屬性為false。

12. 界面之間參數(shù)傳遞：

可以使用pageParam來(lái)實(shí)現(xiàn)，但要避免使用過(guò)大的pageParam。界面切換的時(shí)候如果pageParam過(guò)大，則JSON解析就會(huì)比較耗時(shí)，影響界面切換的執(zhí)行和動(dòng)畫(huà)運(yùn)行體驗(yàn)。

不要使用使用URL+?的形式進(jìn)行參數(shù)的傳遞，此方式在Android上存在兼容問(wèn)題。

13. 交互響應(yīng)：

點(diǎn)擊事件必須處理click事件的300ms延遲問(wèn)題，優(yōu)化點(diǎn)擊響應(yīng)速度，建議通過(guò)為可點(diǎn)擊的元素增加tapmode屬性來(lái)優(yōu)化點(diǎn)擊速度。

引擎對(duì)具有tapmode屬性的元素點(diǎn)擊事件的優(yōu)化處理會(huì)在apiready事件觸發(fā)之前，根據(jù)當(dāng)前的dom樹(shù)自動(dòng)進(jìn)行優(yōu)化。在apiready之后加載的數(shù)據(jù)使用要顯式的調(diào)用api.parseTapmode方法來(lái)進(jìn)行主動(dòng)的tapmode處理，例如在上拉加載更多數(shù)據(jù)后，要調(diào)用一下api.parseTapmode方法.

要按UE設(shè)計(jì)確定可點(diǎn)擊區(qū)域的大小，可以適當(dāng)擴(kuò)大點(diǎn)擊區(qū)域來(lái)保障點(diǎn)擊反應(yīng)的靈敏。

api.parseTapmode調(diào)用會(huì)有性能成本，不需要的情況下不要隨便調(diào)用。

要按照需求明確所有按鈕點(diǎn)擊時(shí)的交互效果，為tapmode屬性設(shè)置正確的樣式值，對(duì)于沒(méi)有交互效果的點(diǎn)擊實(shí)現(xiàn)，可以不為tapmode屬性指定任何樣式，但是為了優(yōu)化點(diǎn)擊速度，必須要給元素增加tapmode屬性。

14. 下拉刷新效果：

建議不要使用APICloud默認(rèn)的下拉刷新效果（灰色箭頭），要使用模塊來(lái)實(shí)現(xiàn)UE/UI所設(shè)計(jì)的下拉刷新效果。

如果UE/UI所設(shè)計(jì)的下拉刷新效果，使用目前APICloud平臺(tái)模塊無(wú)法實(shí)現(xiàn)，要第一時(shí)間跟項(xiàng)目經(jīng)理提出，由APICloud進(jìn)行模塊封裝來(lái)實(shí)現(xiàn)。

15. 網(wǎng)絡(luò)通信方式：

必須使用api.ajax，并且設(shè)置合適的超時(shí)時(shí)間，并進(jìn)行超時(shí)和請(qǐng)求失敗的異常情況。

JQuery的ajax在開(kāi)啟全包加密的時(shí)候會(huì)有問(wèn)題，不建議使用。

16. 網(wǎng)絡(luò)請(qǐng)求狀態(tài)處理：

APP要判斷當(dāng)前的網(wǎng)絡(luò)狀態(tài)，請(qǐng)求過(guò)程要按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ù)的緩存處理，在用戶(hù)沒(méi)用網(wǎng)絡(luò)的情況下，仍然能夠看到APP的靜態(tài)界面布局以及上次已經(jīng)緩存的服務(wù)器端數(shù)據(jù)。

可以在api.ajax方法中設(shè)置cache參數(shù)（未處理）為true來(lái)開(kāi)啟緩存；也可以使用api.writeFile和api.readFile方法，在獲取數(shù)據(jù)后自己實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)緩存，或使用fs和db模塊來(lái)緩存數(shù)據(jù)。

18. 圖片緩存：

必須手動(dòng)進(jìn)行圖片的緩存處理，需要調(diào)用api.imageCache（未處理）方法實(shí)現(xiàn)。

Webview默認(rèn)的緩存機(jī)制存在缺陷，在跨窗口時(shí)表現(xiàn)不好，并且存在對(duì)所緩存圖片的尺寸限制等問(wèn)題，所有APICloud應(yīng)用的圖片緩存不能依賴(lài)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)頁(yè)大小決定，通常圖片過(guò)多過(guò)大會(huì)造成整個(gè)應(yīng)用的內(nèi)存占用過(guò)大，另外在瀏覽器中進(jìn)行圖片的縮放處理成本也很高。

列表中的頭像等縮略圖，寬高應(yīng)控制在250-300px之間，小于這個(gè)范圍大屏手機(jī)容易失真，大于這個(gè)范圍消耗更多內(nèi)存和性能。

20. 狀態(tài)欄效果：

Android和iOS上都要求實(shí)現(xiàn)沉浸式狀態(tài)欄效果的適配

可以通過(guò)在config.xml中開(kāi)啟沉浸式效果（未處理）]配置項(xiàng)，然后在Window或Frame的apiready事件后，調(diào)用$api.fixStatusBar()（未處理）方法來(lái)實(shí)現(xiàn)。如果由于各種原因造成apiready執(zhí)行太晚，當(dāng)Header高度變化時(shí)會(huì)產(chǎn)生頁(yè)面跳動(dòng)的現(xiàn)象，也可以根據(jù)需求自己來(lái)實(shí)現(xiàn)，在合適的時(shí)機(jī)（如onload事件中）判斷平臺(tái)類(lèi)型后，手動(dòng)調(diào)整Header的高度，Android的狀態(tài)欄高度是25px，iOS是20px。

要根據(jù)當(dāng)前界面的背景顏色，通過(guò)調(diào)用api.setStatusBarStyle方法（未處理）來(lái)設(shè)置當(dāng)前狀態(tài)欄的風(fēng)格或背景色。

21. 鍵盤(pán)處理：

在打開(kāi)帶有輸入框的Window或Frame的是，默認(rèn)要自動(dòng)讓輸入框自動(dòng)獲得焦點(diǎn)。

在config.xml中有關(guān)于鍵盤(pán)顯示方式，彈出方式和第三方鍵盤(pán)使用的各種配置，要根據(jù)需要正確配置。

由于在Android上input元素的focus事件存在兼容性問(wèn)題，要完成輸入框自動(dòng)獲取焦點(diǎn)的功能，建議使用擴(kuò)展模塊UIInput模塊（未處理）。

在打開(kāi)Window的時(shí)候，如果自動(dòng)彈出鍵盤(pán)，彈出鍵盤(pán)的行為影響切換動(dòng)畫(huà)執(zhí)行的流暢性，出現(xiàn)卡頓或丟幀的情況。建議可以對(duì)鍵盤(pán)彈出的行為設(shè)置適當(dāng)?shù)难舆t，例如在apiready中設(shè)置延遲200ms后再讓UIInut元素獲得焦點(diǎn)。

可以在同一個(gè)界面中（如登陸界面）創(chuàng)建多個(gè)UIInput模塊的實(shí)例，來(lái)實(shí)現(xiàn)多個(gè)輸入框。

輸入框位于設(shè)備屏幕下半部份的應(yīng)用場(chǎng)景，config.xml中的的鍵盤(pán)彈出模式參數(shù)softInputMode（未處理）務(wù)必設(shè)置為resize模式，或者使用UIInput（未處理）相關(guān)模塊。

為了讓?xiě)?yīng)用看起來(lái)更接近原生，盡量配置config.xml中的softInputBarEnabled（未處理）參數(shù)來(lái)隱藏iOS鍵盤(pán)上面的工具條。也可以在openWin或openFrame的時(shí)候通過(guò)softInputBarEnabled參數(shù)（未處理）來(lái)單獨(dú)指定。

22. 配置外部字體：

可以根據(jù)項(xiàng)目的需要引入外部字體，但是要控制外部字體文件的大小，字體文件不宜過(guò)大。

Android上默認(rèn)有3種字體：sans, serif, monospace，在開(kāi)發(fā)人員不指定的情況下，默認(rèn)為sans，這3種字體在開(kāi)發(fā)過(guò)程中都是通過(guò)字體名進(jìn)行引用，系統(tǒng)會(huì)自動(dòng)對(duì)應(yīng)到內(nèi)置字體文件。但是，對(duì)于外部的字體文件，Android上無(wú)法實(shí)現(xiàn)通過(guò)引擎配置后成為內(nèi)置的字體文件，只能通過(guò)@font-face的方式在每個(gè)頁(yè)面中重復(fù)加載，每一個(gè)要使用外部字體的Window或Frame都要引入一遍，如果字體體積過(guò)大會(huì)占用大量?jī)?nèi)存，并且影響頁(yè)面的加載速度。

iOS可以在config.xml文件中進(jìn)行外部字體文件的配置（未處理），配置完成后就可以像系統(tǒng)內(nèi)置字體一樣在頁(yè)面中指定了，無(wú)需在每個(gè)Window或Frame中通過(guò)@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方法來(lái)進(jìn)行支付，自己處理訂單信息以及簽名過(guò)程；不要使用config接口和pay接口把訂單信息以及簽名過(guò)程交予模塊內(nèi)部處理（官方提供此種支付方式只是為了方便開(kāi)發(fā)者調(diào)試）。

25. 使用同步接口：

對(duì)于文件、數(shù)據(jù)庫(kù)、偏好設(shè)置等操作推薦使用同步接口(方法名增加Sync后綴)來(lái)簡(jiǎn)化代碼的實(shí)現(xiàn)，解決異步callback層次過(guò)深的問(wèn)題。

對(duì)于異步callback嵌套的問(wèn)題，也可以通過(guò)調(diào)用api.sendEvent方法來(lái)解耦，通過(guò)事件機(jī)制來(lái)實(shí)現(xiàn)。

26. 網(wǎng)頁(yè)代碼組織：

盡量將同一個(gè)界面的HTML、CSS和JS代碼寫(xiě)在一個(gè)html文件中，提高頁(yè)面加載速度；公用的CSS、JS盡量少和小，不要在html頁(yè)面中隨意加載無(wú)用的CSS或JS文件；盡量減少頁(yè)面中的link或script標(biāo)簽的使用。在瀏覽器中，外部文件的引入和加載過(guò)程是同步操作，影響整個(gè)頁(yè)面的執(zhí)行效率。

27. 應(yīng)用代碼組成：

28.文件命名規(guī)范：

要有統(tǒng)一規(guī)范，如首頁(yè)Windowhome文件命名為home.html，首頁(yè)Frame文件命名為home_frame.html，所有文件名(網(wǎng)頁(yè)和資源文件)避免使用中文命名、也不要包含大寫(xiě)字母。原生系統(tǒng)內(nèi)部資源文件管理不支持中文名和大寫(xiě)字母，使用中文或大寫(xiě)的資源文件在真實(shí)設(shè)備運(yùn)行中會(huì)出現(xiàn)各種問(wèn)題。

例如在自定義Loader中運(yùn)行沒(méi)有問(wèn)題，但云編譯的包就有問(wèn)題，出現(xiàn)頁(yè)面無(wú)法加載或資源找不到等問(wèn)題，通常就是使用了中文或大寫(xiě)的文件命名。因?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ù)的安全。

開(kāi)發(fā)過(guò)程中每次云編譯的無(wú)論測(cè)試包還是正式包都建議選擇全包加密，因?yàn)樵贏PICloud定制平臺(tái)上，客戶(hù)可以全程監(jiān)控項(xiàng)目的實(shí)施過(guò)程，可以查看代碼提交紀(jì)錄，但是沒(méi)有獲取代碼的權(quán)限；客戶(hù)可以查看云編譯紀(jì)錄，如果編譯的安裝包沒(méi)有使用全包加密則客戶(hù)可能通過(guò)解壓安裝包輕松獲取APP的H5源碼，從而影響后續(xù)項(xiàng)目款的按時(shí)支付。

30. 安裝包大?。?/h4>

云編譯生成的安裝包的大小由4部分內(nèi)容組成：引擎、模塊、網(wǎng)頁(yè)文件和資源文件。引擎的大小是固定的（Android約為400K，iOS約為1.2M），應(yīng)該控制減少模塊、網(wǎng)頁(yè)文件和資源文件的大小，刪除無(wú)用的模塊和文件。

編譯正式版本的時(shí)候，要檢查一下控制臺(tái)選定的模塊是否都在實(shí)際代碼中使用到了。一些開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中會(huì)不斷引入一些“預(yù)計(jì)使用”或"測(cè)試使用"的模塊，但是在最終的代碼中沒(méi)有使用，這部分模塊要云編譯的時(shí)候去掉，無(wú)用的模塊不僅僅會(huì)增大安裝包的體積，還有可能引起于其它模塊的沖突或編譯選項(xiàng)，造成編譯失敗。

在config.xml文件中配置的模塊，在控制臺(tái)無(wú)法刪除，因?yàn)閏onfig中feature配置項(xiàng)的forceBind屬性默認(rèn)true，是強(qiáng)制綁定的，可以通過(guò)在配置forceBind屬性（未處理）來(lái)修過(guò)。

在編譯正式版本的時(shí)候，要?jiǎng)h除Widget包中的icon和launch目錄下的圖片以減小安裝包體積。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)