ApiCloud開發經驗總結

一、前端框架：

儘可能不要使用jQuery、AngularJS、BootStrap等重型的框架，擺脫對$的依賴，培養本身動手的習慣，可是能夠根據功能需求在特定頁面中使用功能獨立的Mobile First框架

默認樣式設置、DOM操做和字符串處理推薦使用APICloud前端框架(api.js和api.css)
移動端UI框架推薦使用AUI

二、前端框架：

儘可能不要使用jQuery、AngularJS、BootStrap等重型的框架，擺脫對$的依賴，培養本身動手的習慣，可是能夠根據功能需求在特定頁面中使用功能獨立的Mobile First框架

默認樣式設置、DOM操做和字符串處理推薦使用APICloud前端框架(api.js和api.css)
移動端UI框架推薦使用AUI

三、 屏幕適配：要正確設置viewport，建議使用720*1280尺寸的UI圖，

優先考慮絕對計量類的單位 px，應先在UI效果圖中（如720x1280尺寸圖）量出元素的寬或高對應的 px 值，再除以屏幕倍率（如分辨率爲720x1280設備的屏幕倍率一般爲 2) 來獲得書寫樣式時的確切數值。

!!!注意!!!： APICloud項目驗收時會根據設計提供的UI圖尺寸（如720x1280），在對應屏幕分辨率的手機設備(如720x1280）中安裝運行，
將運行後的頁面與UI效果圖一一進行對比。
!!!注意!!!： H5界面的實現要與UI設計徹底一致，精細到0.5px。
!!!注意!!!： openFrame/FrameGroup等時，應使用auto結合margin佈局，以動態適應變化無常的android設備屏幕。
推薦文檔：屏幕適配原理及實現
https://docs.apicloud.com/Dev-Guide/screen-adapt-guide

四、窗口關閉處理：開發過程當中根據須要處理Android的keyback事件和iOS的回滑手勢。

!!!注意!!!：Android上要在Window中才能監聽到keyback事件，Frame中沒法監聽到keyback事件；
在iOS7以上的系統上能夠在openWin的時候經過設置slidBackEnabled參數來實現是否支持回滑手勢關閉窗口的功能。
!!!注意!!!：在後臺關閉頁面時，應注意在關閉方法中添加animation:{type:"none"}，來防止切換動畫的出現影響用戶體驗；

五、窗體背景圖片：避免使用H5來實現body級別的背景圖片，可使用Window或Frame的bgColor參數以原生的方式來高效實現

!!!注意!!!： 不建議經過給body元素指定background的方式來實現body級別的背景圖片，特別是高清的大背景圖片用H5方式實現會嚴重影響渲染性能。

六、導航切換：切換底部導航或頂部分類菜單的時候，要求切換體驗平滑，切換過程不能出現白屏、閃屏等現象

!!!注意!!!：建議使用FrameGroup來實現Frame的切換，要按需合理配置預加載的Frame數量，每一個Frame要有明顯的刷新機制，不能每次切換都進行刷新和重繪。
!!!注意!!!：若是使用模塊來實現底部導航欄推薦使用NVTabBar模塊。

七、列表滾動：滾動效果要平滑流暢，不能使用iscroll等JS的方式來實現滾動

!!!注意!!!：建議使用Window+Frame的UI結構，以Native的方式來實現列表頁面的滾動。
!!!注意!!!：在iOS上要支持點擊狀態欄能自動回到頂部的效果，能夠經過在openWin或openFrame的時候配置scrollToTop參數來實現；
此效果在FrameGroup中使用的時候要注意確保只有當前顯示的Frame的scrollToTop屬性爲true，其它Frame的scrollToTop屬性爲false。

八、交互響應：點擊事件必須處理click事件的300ms延遲問題，優化點擊響應速度，建議經過爲可點擊的元素增長tapmode屬性來優化點擊速度。

!!!注意!!!：引擎對具備tapmode屬性的元素點擊事件的優化處理會在apiready事件觸發以前，根據當前的dom樹自動進行優化。
在apiready以後加載的數據使用要顯式的調用api.parseTapmode方法來進行主動的tapmode處理，例如在上拉加載更多數據後，要調用一下api.parseTapmode方法. !!!注意!!!：要按UE設計肯定可點擊區域的大小，能夠適當擴大點擊區域來保障點擊反應的靈敏。
!!!注意!!!：api.parseTapmode調用會有性能成本，不須要的狀況下不要隨便調用。
!!!注意!!!：要按照需求明確全部按鈕點擊時的交互效果，爲tapmode屬性設置正確的樣式值，對於沒有交互效果的點擊實現，能夠不爲tapmode屬性指定任何樣式，
可是爲了優化點擊速度，必需要給元素增長tapmode屬性。

九、網絡請求狀態處理：APP要判斷當前的網絡狀態，請求過程要按UI設計有明顯的狀態提示；網絡超時或網絡請求失敗的時候要進行相關處理並有錯誤提示。

api對象和dialogBox模塊下面封裝了經常使用的提示對話框方法。
https://docs.apicloud.com/Client-API/UI-Layout/dialogBox

十、數據緩存：要對GET請求進行數據的緩存處理，在用戶沒用網絡的狀況下，仍然可以看到APP的靜態界面佈局以及上次已經緩存的服務器端數據。

!!!注意!!!：能夠在api.ajax方法中設置cache參數爲true來開啓緩存；也可使用api.writeFile和api.readFile方法，在獲取數據後本身實現簡單的數據緩存，
或使用fs和db模塊來緩存數據。
https://docs.apicloud.com/Client-API/api#3

十一、 圖片緩存：必須手動進行圖片的緩存處理，須要調用api.imageCache方法實現。

!!注意!!!：Webview默認的緩存機制存在缺陷，在跨窗口時表現很差，而且存在對所緩存圖片的尺寸限制等問題，
全部APICloud應用的圖片緩存不能依賴Webview默認的緩存機制，必須手動實現。

十二、圖片處理：要減小由圖片形成的內存佔用，減小圖片縮放等耗性能的操做，服務器端要根據產品設計提供合適尺寸的大圖、小圖、縮略圖等

!!!注意!!!：APICloud應用所佔用的內存大小由所加載的網頁大小決定，一般圖片過多過大會形成整個應用的內存佔用過大，另外在瀏覽器中進行圖片的縮放處理成本也很高。
!!!注意!!!：列表中的頭像等縮略圖，寬高應控制在250-300px之間，小於這個範圍大屏手機容易失真，大於這個範圍消耗更多內存和性能。

1三、配置外部字體：能夠根據項目的須要引入外部字體，可是要控制外部字體文件的大小，字體文件不宜過大。

!!!注意!!!：Android上默認有3種字體：sans, serif, monospace，在開發人員不指定的狀況下，默認爲sans，這3種字體在開發過程當中都是經過字體名進行引用，
系統會自動對應到內置字體文件。可是，對於外部的字體文件，Android上沒法實現經過引擎配置後成爲內置的字體文件，只能經過@font-face的方式在每一個頁面中重複加載，
每個要使用外部字體的Window或Frame都要引入一遍，若是字體體積過大會佔用大量內存，而且影響頁面的加載速度。
!!!注意!!!：iOS能夠在config.xml文件中進行外部字體文件的配置，配置完成後就能夠像系統內置字體同樣在頁面中指定了，
無需在每一個Window或Frame中經過@font-face的方式引入。
https://docs.apicloud.com/Dev-Guide/app-config-manual#14-1

1四、JavaScript模版：建議使用doT模版等輕量級的模版。

!!!注意!!!：要優先選擇使用Mobile First的模版，體量小，生成的文本效率高。https://github.com/apicloudcom/APICloud-JS-Modules