EDN Agile Lite重置版(我们称作ednlite)

fiberlezp
   2015-07-03 16:31:32发布  2016-12-16 15:46:14更新 0收藏, 5705浏览
WebAPP技术
0

不知道大家有没有留意论坛里的这句话:

没错,这就是当年EDN手机应用附加的小尾巴,那时的EDN应用是基于Agile和ExMobi的。

如今Agile已经升级为Agile Lite了,于是EDN应用也升级了。
体验请扫描:


虽然还是原来的配方,还是熟悉的味道,不过更改的地方还是有很多。


首先是多页模式改成了单页模式

多页模式是适合ExMobi的页面形式,页面之间的切换是通过ExMobi的本地能力来实现的,速度快,模块化更明显,开发时逻辑更清晰。而单页模式更适合webapp,你可以直接用手机浏览器访问EDN。这种页面模式只用一个html就包含了所有的页面,不过不同页面的标签还是可以分散到不同文件,运行时异步加载。

其次是与服务端的传输模式以及不同页面之间的传参:

单页模式用做webapp是在普通浏览器下运行的,所以与服务器的交互方式肯定是要改成一个统一的接口,所以我把应用中的所有请求统一成了标准浏览器的Ajax请求。

而不同页面之间的传参也有所差别,同样是href中的?a=1&b=2,不过取得的形式是不一样的,多页模式下是:

$native.getParameter('tid');

单页模式下是:

var params = A.Component.params('#detail_section');

再次是Agile Lite API不同的调用形式

Agile Lite为了使用的方便性,修改了许多API,例如template,scroll,refresh等等。

最后就是webapp和ExMobi混合应用的配置差别:

虽然两者数据传输和页面组织形式都一样了,但是毕竟运行环境还是不同。

首先是本地存储的方法不一样,ExMobi应用是有单独的API实现的,而webapp是借助localstorage的。再次是Agile Lite的ready事件不同,一个是document的ready,一个是ExMobi的plusready。

好吧,实际上只要改这两个,就可以从ExMobi应用变成webapp了,这也是单页模式通用性强的优点。

工作量大致就这么多,想想还是很值的,现在贴出分享一下

PS:此示例代码由于使用了ExMobi服务端的接口开发能力(接口开发教程请参考http://edu.exmobi.cn/learn/90E54W8sCqbpT1dc),需要部署到ExMobi管理端才能访问,如果开发调试请导入到MBuilder中,启动tomcat之后通过如下地址访问:

http://{ip}:8001/process/service/ednlite/www/index.html

晒一下手机运行应用的截图,后面还有在浏览器中的效果:

浏览器中运行的截图:

ImageImageImage

Screenshot_2015-07-03-14-42-51.jpeg  (0.20M  下载次数:117次)

detail.png  (0.01M  下载次数:116次)

aution.png  (0.10M  下载次数:201次)

Screenshot_2015-07-03-14-50-59.jpeg  (0.21M  下载次数:122次)

favourite.png  (0.01M  下载次数:112次)

search_result.png  (0.01M  下载次数:101次)

search.png  (0.04M  下载次数:183次)

Screenshot_2015-07-03-14-49-18.jpeg  (0.14M  下载次数:118次)

my.png  (0.04M  下载次数:111次)

hot_part.png  (0.01M  下载次数:116次)

qiandao.png  (0.02M  下载次数:120次)

Screenshot_2015-07-03-14-42-17.jpeg  (0.33M  下载次数:115次)

tiezi.png  (0.08M  下载次数:219次)

ednlite.zip  (5.23M  下载次数:718次)

index.png  (0.05M  下载次数:112次)

ednlite.png  (0.00M  下载次数:113次)

tiezi_list.png  (0.07M  下载次数:116次)

Screenshot_2015-07-03-14-52-30.jpeg  (0.10M  下载次数:135次)

chat.png  (0.03M  下载次数:111次)

login.png  (0.01M  下载次数:111次)

Screenshot_2015-07-03-14-43-43.jpeg  (0.11M  下载次数:114次)

Screenshot_2015-07-03-14-50-29.jpeg  (0.19M  下载次数:122次)

Screenshot_2015-07-03-14-43-08.jpeg  (0.21M  下载次数:122次)

bbs.png  (0.03M  下载次数:110次)

Screenshot_2015-07-03-14-49-39.jpeg  (0.18M  下载次数:128次)

下载APP
扫码下载栗子社区APP