Github上最全的APICloud開源前端框架效果盤點(轉)

1.微信網站幾分鐘變身「原生 App」

微信推出了微信JS-SDK，使微信公共號能夠直接調用微信原生的接口，具有部分原生應用的能力。微信JS-SDK的推出，將大大提升微信公共號的 用戶體驗，可是若是存在一種方式，可使微信公共號各類已有的服務，直接變爲一款真正的原生應用，豈不是會更好?藉助APICloud 平臺，能夠作到：零修改，微信公共號 變 iOS + Android雙平臺原生應用!

實現方法：https://github.com/apicloudcom/adapter-weixin-js-sdk

2. 基於 iScroll 前端框架實現的導航條

導航條在多列表頁面中很是常見，當導航條中提供的選項不少，頁面寬度沒法知足所有顯示時，須要支持橫向滑動操做。 iScroll.js 幫咱們很好的解決了這個問題，而且支持慣性彈動效果。

固然，若是您對導航條的樣式沒有太多個性化的要求，更推薦您使用模塊navigationBar完成導航條的實現。

實現方法：https://github.com/apicloudcom/demo-scroll-nav

學習文檔：http://docs.apicloud.com/端API/導航菜單/navigationBar

3. APICloudJavascript Framework

APICloud爲開發者提供了一個可選的前端腳本框架，該框架可與任何第三方前端框架混用。api.js 借鑑了 Zepto.js，去掉了開發 APICloud 應用時沒必要要的方法，只提供最基礎的 Javascript 函數，作到儘量的輕量和簡潔，同時還結合了部分App開發中經常使用的功能。

若是您還像原始人同樣使用document.getElementById，我只能說您的年齡暴露了。

實現方法：https://github.com/apicloudcom/framework-api-js

4. 基於 Swipe 前端框架實現的圖片輪播效果

輪播圖在手機應用中能夠說是必不可少的了，能讓咱們的展現頁看起來內容更豐富，大大增長用戶繼續看下去的慾望。爲了方便開發者快速使用，咱們提供了一個使用 Swipe.js 實現的輪播圖、輪播菜單示例。

固然咱們也提供了這方面的模塊支持，您也能夠考慮使用模塊UIScrollPicture來快速完成您的輪播圖展現。

實現方法：https://github.com/apicloudcom/demo-slide

學習文檔：http://docs.apicloud.com/端API/界面佈局/UIScrollPicture

5. 基於 echo 前端框架實現的圖片延時加載

使用移動端訪問您的App的用戶極可能是在旅途或無wifi的環境中，每每更在乎網絡流量的使用狀況，若是咱們老是無心義的爲用戶加載用戶未必會查 看的圖片，會使咱們的 App 增長不少無心義的流量浪費。 echo.js 很好的解決了這一問題，只有被顯示在當前屏幕中的圖片纔會被下載到手機。

同時若是您夠細心，也會發現這種方式在表象上看起來也更接近原生體驗。

千萬不要忘記，結合本地圖片緩存機制(api.imageCache)效果更佳哦～

實現方法：https://github.com/apicloudcom/demo-echo

學習文檔：http://docs.apicloud.com/端API/api#78

6. 基於 hammer 前端框架實現的觸控示例

相信手機能受到用戶喜好的其中一點就是容許用戶使用手指直接進行大量的操做，這其中就包括了單點、多點、長按、雙擊等等方式。這麼多的觸控事件，如 果開發者本身實現，須要很是高的技術水平以及大量的時間和精力，快來看看 hammer.js 讓咱們如何瞬間變身技術大牛吧。

同時APICloud也爲你們提供了不少原生事件的支持，你們也能夠看看是否就有困擾您好久的小問題可使用原生事件來解決。

實現方法：https://github.com/apicloudcom/demo-hammer

學習文檔：http://docs.apicloud.com/端API/api#c1

7. doT模板主要用法示例

當咱們動態生成一個數據列表、複雜詳情頁時，若是使用字符串拼接的方式會加大不少工做量和各類語法錯誤的風險。同時頁面顯示效果也可能出現閃動等現象。推薦開發者使用在 webkit 瀏覽器引擎下效率比較高的 js 模板插件 dot.js。

dot.js是衆多模塊類框架中在webkit內核下表現的效率最高的，除了支持多條數據顯示外，還支持各類腳本邏輯語法，如if。它除了減小咱們大部分工做量外，也由於其預編譯的實現方式讓咱們的頁面響應更快、更好。

我只能說您的app中若是未使用dot.js，那您就已經輸在起跑線上了。

實現方法：https://github.com/apicloudcom/demo-dot

8. 基於 api.openFrameGroup 實現的 App 引導頁

絕大多數 App 都會有本身的引導頁、廣告頁等。 引導頁能夠說是體現產品和UI設計水平的第一個分水嶺，各類層出不窮的新奇創意、交互特效能夠頗有效的向用戶炫耀咱們App的實力，也能讓用戶對App內容充滿期待。

說到體驗，天然這就是APICloud的優點，得用 api.openFrameGroup和frame 的 bgColor 參數來實現引導頁相比於使用腳本使用有不少好處：

頁面間的滑動效果是原生實現，用戶體驗好，無卡頓;

bgColor設置的圖片也是原生渲染，性能方面完暴給css樣式設置背景圖的方式。

實現方法：https://github.com/apicloudcom/demo-intro-page

學習文檔：http://docs.apicloud.com/端API/api#28

9. 基於 Swipe 前端框架實現的 App 引導頁

除了用 api.openFrameGroup來實現APP引導頁，還能夠試試Swipe.js，Swipe.js幫咱們很好的解決了頁面或圖片之間滑動特效的特效。

固然爲了用戶體驗，咱們更推薦您使用APICloud提供的frameGroup來實現，可查看示例：https://github.com/apicloudcom/demo-intro-page

實現方法：https://github.com/apicloudcom/demo-app-guide

10.基於 Async 前端框架實現異步函數同步調用

異步調用或者說回調是 Javascript 開發中經常使用到的業務實現方式，但有時候咱們也但願可使用同步的方式來保證業務邏輯能夠按順序執行。 Async.js 給咱們帶來了這個能力。

實現方法：https://github.com/apicloudcom/demo-async

11.SwipeFramework

Swipe.js是一個輕量級腳本觸摸滑動類庫

想必作移動前端的同窗常常會接到這樣子的一個需求，就是在移動設備頁面上的banner圖可以用手指觸摸左右或上下的滑動切換，這在移動設備是很常 見的一個效果，其用戶體驗遠甚於點擊一個按鈕區域，經過手指的觸摸操做也是移動設備的中一個特性，咱們必須專業化的處理，Swipe.js就是一個很是明 智的選擇。

實現方法：https://github.com/apicloudcom/framework-swipe-js

12.APICloudCSS Framework

APICloud爲開發者提供了一個可選的前端樣式框架，該框架可與任何第三方前端框架混用。 api.css 只處理不一樣平臺瀏覽器的默認樣式，讓咱們的頁面元素在全部瀏覽器中表現近乎一至，沒錯，就是這麼簡單實用。

實現方法：https://github.com/apicloudcom/framework-api-css

13.CarouselFramework

Carousel.js是一個輕量級腳本觸摸滑動類庫。

輪播(Carousel)插件是一種靈活的響應式的向站點添加滑塊的方式。內容是足夠靈活的，能夠是圖像、視頻或者其餘您想要放置的任何類型的內容。

實現方法：https://github.com/apicloudcom/framework-carousel-js