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