• UID97
  • 登录2016-04-18
  • 粉丝12
  • 关注3
  • 发帖134
  • 主页
  • 金币1957枚
社区居民
忠实会员
原创写手
fsnews 发布于2015-11-05 11:05
0/813

跨平台移动应用开发实战之三 客户端开发

楼层直达
概述
移动客户端跨平台方案有多种,例如有使用c++语言生成编写程序,来生成不同平台的代码,这样的优点是运行速度快;基于html5的跨平台方案,开发速度快,基于html+css+js等web语言。
Wex5UI编程基本上就是对js框架的使用,包括jQuery, bootstrap等等。
文本给出主要的UI设计,具体控件的布局和设置可到官网查看相关文档。

另外需要指出的是开发工具的bug:(1)在查看控件属性时,如果鼠标在某个属性的上方,滚轮不小心滑动,这将会修改该属性值,尽管你可能没有先选择该属性区(2)修改了代码,如果想回退,很多时候编辑里面的"undo"不可操作。另外还有其他一些小问题,读者可自己体会。

UI界面设计
根据我们项目的需求,首先创建一个panel,它包括bottom1作为导航栏,content1作为内容区域。content1中创建了4个content来代表四个主要页面。将这四个页面分别与导航栏里的button绑定。

图片:屏幕快照 2015-11-05 上午11.47.07.png




"发现"页面作为首页,显示文章列表,因此可以通过在scroll控件中添加list来实现:

图片:屏幕快照 2015-11-05 上午11.49.50.png




数据绑定
UI控件显示的数据需要和服务器返回的数据进行绑定。

图片:屏幕快照 2015-11-05 上午11.20.27.png


图片:屏幕快照 2015-11-05 上午11.20.54.png



事件处理
添加articleData的事件处理函数,使其获取数据,呈现在绑定的UI控件上:

图片:屏幕快照 2015-11-05 上午11.46.22.png



事件处理代码如下:

Model.prototype.articleDateCustomRefresh = function(event){
var data = event.source;
var params = {
"columns" : Baas.getDataColumns(data),
"limit" : event.limit,
"offset" : event.offset
};
var success = function(resultData) {
//justep.Util.hint("success to get article data");
    debugger;
var append = event.options && event.options.append;
data.loadData(resultData, append);
};
Baas.sendRequest({
"url" : "/fs",
"action" : "queryArticle",
"params" : params,
"success" : success
});
};


运行调试
可以通过chrome浏览器来模拟运行,如下图:

图片:屏幕快照 2015-11-05 上午11.42.55.png



如果想要debug,点击右键,选择“审查元素”,之后选择设备类型,再刷新即可。
代码中添加"debugger"的地方,程序运行到此时将会被断掉。

图片:屏幕快照 2015-11-05 上午11.43.37.png




总结
至此,本文完成了使用wex5平台的移动应用demo的开发。可以看到,对于熟悉web的开发人员而言,在熟悉wex5框架后,将会比android/ios开发速度快几倍,这对于应用UI界面不复杂,以服务器端获取数据显示的论坛而言是不错的解决方案。

Note:本源代码由“极分享”社区创建,添加或者修改,我们会持续优化源代码以提供更好的解决方案,更多详情和支持请前往finalshares.com
fs_demo.zip
[fsnews于2015-11-05 12:19编辑了帖子]

0人打赏
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 57676/339   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 30959/139   省时省力的Android组件群来了,非常棒的原型参考

  • 30637/187   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 27335/216   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 25732/2   超全!整理常用的iOS第三方资源

  • 23951/70   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 22264/0   Python爬虫:常用浏览器的useragent

  • 21675/137   2016抢红包软件及源码

  • 19600/29   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 19441/25   Android工程师面试题大全

  • 18725/27   2016程序员跳槽全攻略

  • 18653/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 18182/20   码魂:程序员的牛B漫画

  • 16646/3   吐槽那些程序员的搞笑牛逼注释

  • 15732/146   Android版类似UC浏览器:非常赞,产品级的源码

  • 15463/1   iOS 动画总结

  • 14823/41   一个绚丽的loading动效分析与实现!

  • 14404/10   女程序员的梦,众网友的神回复

  • 14237/11   年会上现场review代码是怎么样的体验!

  • 14207/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 14203/83   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 14131/44   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 13816/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 13639/23   个人收集的Android 各类功能源代码

  • 13616/10   2016年最全的Android面试考题+答案 精编版

  • 12925/19   珍藏多年的素材,灵感搜寻网站

  • 12802/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 12453/15   基于Android支付宝支付设计和开发方案

  • 12421/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 12142/74   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 12128/20   Android福利第三波【Android电子书】

  • 12067/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 11600/18   65条最常用正则表达式,你要的都在这里了

  • 11522/94   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 11514/7   用程序员的姿势抢过年的火车票

  • 11486/70   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 11419/7   一张图搞定iOS学习路线,非常全面

  • 11302/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 11050/0   iOS中文版资源库,非常全

  • 10939/10   成为Java顶尖程序员 ,看这11本书就够了

  • 10530/18   一张图搞定Android学习路线,非常全面

  • 10498/10   微信支付终于成功了(安卓,iOS),在此分享

  • 10104/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 10045/29   【持续更新中】Android福利贴(一):资料源码

  • 10035/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 10028/0   GitHub iOS 库和框架Top100 

  • 9688/4   46 个非常有用的 PHP 代码片段

  • 9326/3   即时通信第三方库

  • 9323/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 9173/8   流媒体视频直播方案

  • 9123/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 9042/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 8995/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 8903/9   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 8868/18   八个最优秀的Android Studio插件

  • 8439/6   开箱即用!Android四款系统架构工具

  • 8346/3   一张图看清Linux 内核运行原理

  • 8233/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8223/10   十大技巧快速提升Android应用开发性能

  • 7883/1   Android性能优化视频,文档以及工具

  • 返回顶部