基于Agile Lite开发微信webapp的特点

nandy007 发布于 2015/07/27 17:28
阅读 4K+
收藏 17
Agile Lite是一个HTML5移动前端框架,支持jQuery和Zepto双引擎,并且提供与UI无关的独立框架,内置了Flat UI样式和Ratchet样式,同时也支持单页模式和多页模式开发。对于目前比较流行的微信内置浏览器APP,Agile Lite可以轻松的使用不同模式来开发。
下面就来介绍基于Agile Lite的微信webapp的特点,了解使用Agile Lite可以适应哪些场景。


特点一:丰富的UI组件
Agile Lite设计了众多的UI组件,包括一些基本的组件,如:按钮、颜色、字体图、表单、列表、详情等页面,也对一些特殊的控件和性能效率的优化提供的组件,比如:slider滑动组件、sliderPage滑动页、下拉上拉刷新组件、懒人加载组件、滑动删除组件、动态编辑列表组件以及日历组件等。组件的设计符合移动端的操作习惯和风格,并完全遵循HTML5的规范。


特点二:无关UI的独立扩展
Agile Lite的基础UI仅仅包含一个layout的CSS样式表,再此框架内的所有具有独立UI特性的样式都可以加入到Agile Lite中,比如,我们在源码中内置的Recthet样式完全可以在Agile Lite中使用。
所以,对于开发者来说扩展自己的UI是非常方便的,不受限于现有样式


特点三:jQuery和Zepto双引擎支持
无论是jQuery还是Zepto都有各自的优劣势,给很多开发者带来了选择的困扰。Agile Lite对两者都做了很好的适配,无论使用哪种引擎都可以顺利完成Agile Lite的逻辑操作,不同页面可以使用不同的引擎。
所以,对于开发者来说,如果使用了特定引擎的第三方插件都可以很好的融合进来。


特点四:完整的控制器逻辑操作
Agile Lite的所有组件切换都是通过控制器来完成的,控制器的写法支持标签属性调用也支持JS方法触发,控制器也可以设置参数给组件调用,比如:section页面、Modal页面、tab页、滑动页等的切换,都可以很方便的使用控制器实现。而且所有控制器都是可以扩展的,对于新的控制需求可以通过对控制器的扩展做到。


特点五:完全事件驱动的架构
从Agile Lite启动,到各个组件的创建、显示、隐藏、销毁等生命周期都有相应的事件触发,所有业务逻辑均在事件内完成,并且这些事件如果与宿主容器的原生事件绑定,就可以完成跟原生程序完全一样的生命周期交互逻辑,更符合app的效果。比如微信的ready事件和close关闭页面函数都可以绑定到Agile Lite中。


特点六:单页模式和多页模式共存
Agile Lite的开发模式既支持单页模式也支持多页模式,原则上单页模式适合单窗口宿主容器(如:PhoneGap等),多页模式适合多窗口宿主容器(如ExMobi等)。但是,在微信中却很特殊,对于办公类APP一般使用单页模式,可以使页面DOM结构得到最大限度的重用,以及最方便的页面交互(无须跨页操作),而对于营销类的APP,多数页面需要被转发传播,具有相对的独立性,可以使用多页模式。


特点七:微信JS SDK无缝集成
微信本身提供了丰富的JS SDK,可以帮助开发者在应用中使用一些本地能力以及针对微信内操作的一些事件监听以实现更复杂的逻辑。
Agile Lite对微信的JS SDK实现了config的鉴权,简单配置即可实现JS SDK的无缝调用,并支持微信支付的快速实现,帮助开发者更快更灵活的使用微信的JS SDK。


最后还是要韶一韶Agile Lite的短板。Agile Lite在架构之初是为具有宿主容器的框架而设计的(比如PhoneGap、ExMobi等),所以,业务逻辑更偏向于原生APP,所以对于很多基于浏览器这类单窗口的营销页面和游戏是不适合的,因为单页模式中仅含有一个页面,也就是一个URL地址,对于页面分享和转发有一定的局限,而采用多页模式虽然可以解决此问题,但是单页模式的很多特点就丧失了。另外,Agile Lite的多页模式也更适合在ExMobi这类可以支持多窗口打开的宿主容器中,多页与多窗口匹配才能发挥更到的效应。

好了,说了这么多,该是到体验的时候了,下面奉上几个Agile Lite的示例,以供参考。

    

             Agile Lite 示例                                         EDN Lite版本(discuz论坛)




    

               商城微店类示例                                        Agile Lite微信JS SDK


更多资料请参考http://www.agilelite.net


加载中
0
千斤难买春秋醉
千斤难买春秋醉
这个table style width:877px 导致右边的字看不到了。。。
永和
永和
好机智!
0
nandy007
nandy007

dom结构和css都是有上下文关系的,单独这么说真心不知道是问的什么

能否具体点,比如这个table是放在那里的?

0
Y
Yaoguanglin

我觉得1楼所说的是本文的页面,右边看不到了

nandy007
nandy007
真的是呢,看下这个怎么编辑
0
mickelfeng
mickelfeng
看着感觉挺不错的样子
0
麦拂沙
麦拂沙
看着很强大, 打算过段时间用这个开发一套服务
0
Damir
Damir
单页模式不会对设备要求高吗?还是喜欢dcloud的。
nandy007
nandy007
回复 @Damir : 另外你说的jquery操作dom现在来看其实并没有很好的办法,这是H5本身的性能问题,只能说类似于React JS这些框架会对dom的变化进行监控,做到最大限度对dom的操作的频率以提高效率,所以后续也会考虑跟这类框架的集成,但是本质问题仍然需要大环境的解决
nandy007
nandy007
AL里对单页模式的处理是有缓存机制可以设置的,默认下是缓存的,不需要缓存的时候可以单个组件设置,可以降低页面的加载压力,你可以具体看下我们的示例看看效果体验一下。
Damir
Damir
回复 @nandy007 : 看介绍还是挺不错的,可以看看.不过在移动端的测试,使用jquery一类的东西操作DOM往往会损失4倍以上的性能.现在实施的项目都是直接操作
Damir
Damir
回复 @nandy007 : 单页的话,主要是并不能很好的控制提前加载,单页加载太多的内容也会带来渲染压力吧.
nandy007
nandy007
单页模式和多页模式各有自己的场景,并不是说一个应用全是用单页还是多页,比如通常多个页面没有太大关系的可以用多页,而单页模式则多用于多个页面有关系的,在AL里可以灵活选择。 而无论使用单页模式还是多页模式,在移动端都要控制"窗口"的个数,否则会导致内存溢出,这是任何框架都要解决的问题,AL已经在这方面有控制
0
返回顶部
顶部