MyException - 我的异常网
当前位置:我的异常网» 移动开发 » 新知吃APP架构分析-北京识物科技有限公司旗下产品

新知吃APP架构分析-北京识物科技有限公司旗下产品

www.MyException.Cn  网友分享于:2013-09-19  浏览:0次
新知食APP架构分析--北京识物科技有限公司旗下产品


 

俗话说不打无准备之仗,这次真是有点懵逼了,建议大家去面试的时候,尤其是去小型互联网公司的时候,如果你想比其他人有竞争力,那么你要研究一下当前他的公司正在开发产品,他们的业务类型是什么样的,比如他们公司正在开发xxxApp,你可以花费两天时间,做一个xxxApp的demo,等去面试的时候,你就可以有底气的说,我研究了一下贵公司的业务,对贵公司的产品很感兴趣,顺便做了个demo,然后你把打包好的app在你手机上运行一下,给技术看一下,基本上这份offer就属于你的了,一定要做事前要谋一下,古话说万事不预则废,预 则力!(小编就在前天面试的时候就吃了很大的亏,故,总结一下,分享给后来人,千万要长脑子 啊)好,接下来我们解析一下新知食APP的框架,看一下其中用到了什么技术。



 

 

上几张图,咱们按图索骥,一步步走

 


 

 这三张图演示了一个过程,从应用程序启动到启动ok加载出主菜单,这里我们简单说一下坑。

1.React Native启动页白屏现象,(用React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或模拟器的性能不同而不同)

why?为什么会出现白屏?

React Native应用在启动时会将js bundle读取到内存中,并完成渲染。这期间由于js bundle还没有完成装载并渲染,所以界面显示的是白屏。

白屏给人的感觉很不友好,那有没有办法不显示白屏呢?

上文解释了:为什么React Native应用会在启动的时候显示一会白屏。既然知道了出现问题的原因,那么离解决问题也不远了。市场上大部分APP在启动的时候都会有个启动屏,启动屏对于用户是比较友好的,一来展示欢迎信息,二来显示一些产品信息或一些广告,启动页对于程序来说,是为程序完成初始化加载数据,做一些初始化工作的所保留的时间,启动屏等待的时间可长可短,具体根据业务而定。

解决方案:http://blog.csdn.net/fengyuzhengfan/article/details/52712829(参考这个blog)

2.启动进入主页面后,依然布局简单,如果按照我的解决方案来的话,主要采取stacknavigator+tabnavigator,可以看出,该app下有三个tab,

第一个tab为目标,他的布局由上往下看的话,首先采用第三方,卡式轮播,做出轮播图效果,或者就是简单的用一下<ScrollView></ScrollView>

再往下的话,用一个<View>包四个<TouchableOpcity>做具体的相应的事件处理

继续往下的最新推荐和热门推荐,我觉的应该用flatlist去做,不过我越看越不想用flatlist做的,倒是有几分<WebView>的风格,直接加载过来的。

该提示是当点击个人健康报告的时候,做出的相应的逻辑判断,然后做出友好提示,显然要查看个人健康报告是要先添加一个成员的。

上图的功能是我对这款App赞赏的一点,(该app有两个模块,我个人觉得做的不错,一个是上图的模块,另一个是该App用到标尺的第三方,我觉得也不错)

首先分析该模块功能,该模块可以正对不同人做出个人饮食计划,不同阶段,不同日期,做出相应的早中晚三餐的合理搭配,非常不错,这块需要后台做 出复杂的处理,前台展示,到是还可以,那么接下来说做法,直说能看的到的。(title那块的返回箭头太丑了,并且可以看出来,根本不是一个人做的,或者说,两人开发,没有达成相应的约定,一点都不统一)title下面的那个“饮食方案”和“原则”的小组件,这个用的太平常了,市面上都有,不过一半市面上的是放在title上的,(比如说boss直聘)而不是这样的,下面的东西,我就不乱说了。


 

 “发现”这个模块,个人觉得就是用<WebView>做的,不多说了!


 

 

“我的”这个模块,先说我的这个tab,他是加了点击事件的,因为这个模块,只有登录了的人,才有权操作,如果你没有登录,他会让你登录,只有登录的用户,才可以看到上图的模样!

好那么如何给tab加点击事件呢?

这里我参考老兔写的,我们需要修改react navigation的源码,让TabBar拥有点击事件(http://www.jianshu.com/p/b877115fff1b)

官方的api里面是没有提供tabBar的点击事件的,但在开发中经常需要监听tabBar的点击事件,解决这个问题的一种方法就是去修改源码,另一种是监听onTransitionEnd。(第二种方法这里先不讨论)

源码中一共需要修改8处地方,包含3个js文件。源码在下面。

 1、react-navigation目录下src/views/TabView/TabBarBottom.js

2、react-navigation目录下src/views/TabView/TabBarTop.js

 

 3、react-navigation目录下src/views/TabView/TabView.js

注意:第111行中的getScreenConfig需要手动改成getScreenOptions,要不然修改完源码会报错。

 修改源码之后,在页面中这么用:

static navigationOptions = ({navigation,screenProps}) => ({
    onTabPress:(()=>{
        alert('Home');
    })
});


好了,如果看源码的话,可以从这里获取:
https://github.com/kimdhoe/react-navigation/commit/f120c72af57d1a6b406a32c692deb6d3999d92ef#diff-d90a62b2d79c701ede87fb7db09dad1e


现在继续分析该款APP的结构

 


 

 这块我觉得不错,并且那个滑尺的第三方我还没有用过,(高手见了,可以指点一下),所以在这里不多说了

这里的意见反馈,我不知道反馈给谁,一副见了鬼的样子,哈哈!

优惠卷,看起来不错,好像不能用,是假的啊哈哈!

 

这里的bug是,当我点击修改个人信息的时候,程序就卡退了,应该是内存溢出的问题吧,具体不清楚。。。

 

退出登录好像不能用啊,。。。

 


最后提点意见

这块不能模仿一下boss直聘吗,啊啊啊,受不了拉!

不写拉,如有问题请联系微信:jkxx123321

 

 

 

 

 



明天继续完善...这种App,后台完善,一周就可以搭出来

 

 

 

 

 

 

 

 

文章评论

如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员应该关注的一些事儿
程序员应该关注的一些事儿
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
我的丈夫是个程序员
我的丈夫是个程序员
每天工作4小时的程序员
每天工作4小时的程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
鲜为人知的编程真相
鲜为人知的编程真相
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
编程语言是女人
编程语言是女人
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
10个调试和排错的小建议
10个调试和排错的小建议
一个程序员的时间管理
一个程序员的时间管理
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员和编码员之间的区别
程序员和编码员之间的区别
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
为什么程序员都是夜猫子
为什么程序员都是夜猫子
漫画:程序员的工作
漫画:程序员的工作
那些争议最大的编程观点
那些争议最大的编程观点
程序员必看的十大电影
程序员必看的十大电影
总结2014中国互联网十大段子
总结2014中国互联网十大段子
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
代码女神横空出世
代码女神横空出世
程序员都该阅读的书
程序员都该阅读的书
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
Java程序员必看电影
Java程序员必看电影
如何成为一名黑客
如何成为一名黑客
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有