• 新知食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,后台完善,一周就可以搭出来

     

     

     

     

     

     

     

     

  • 相关阅读:
    github提交代码——步骤备忘
    springboot 集成 lombok.jar
    maven 内置pom属性
    对spring的IOC和aop的学习总结
    前端表单form提交验证清除
    Graph and Chart Study
    Xml学习笔记
    转载unity编辑器xml数据库插件
    MySql(二)_NHibernateHelper管理会话工厂
    MySql(一)_利用NHibernate和MySql交互
  • 原文地址:https://www.cnblogs.com/gdsblog/p/7385097.html
Copyright © 2020-2023  润新知