• ReactNative


    基于ReactNative实现的博客园手机客户端

     

    去年九月,facebook发布了react-native,将web端的javaScript和react技术扩展到了IOS和Android的原生应用开发。用一句大白话来说,就是利用相同的核心代码,就可以搞出androidapp,iosapp,以及后台应用程序。同时,得益于它的热更新能力,软件更新不再需要用户下载新的安装包,就像传统的web网页一样,服务器有修改,终端可即时接触到最新内容。多端技术统一,热更新,原生的体验,真正拥有了这些,才发现当前普遍的移动端开发有多么蛋疼。就像桌面时代的cs结构程序开发很大程度上已经被bs结构所取代一样,移动端的这一进程,会进行的更快。

    出于学习及实践的目的,这次用react-native构建了一个博客园的手机客户端,因为没有ios的开发环境(穷),所以当前仅仅支持安卓平台(>=android 4.1.6),但适配ios的话,预估至多也就20%的工作量。

    实现功能

    • 首页 & 排行 & 新闻等列表查看
    • 博文详情 & 新闻详情查看
    • 热门博主查看及博主检索
    • 博主详情及博主博文列表
    • 博文评论 & 新闻评论查看
    • 博主及新闻离线收藏及查看
    • 设置 & 关于
    • CodePush代码热更新

    由于博客园官方开放接口所限,而我又不倾向于通过非正规手段实现目的,以下列举一些很重要但并未实现的功能:

    • 用户登录
    • 发表评论
    • 博文发表
    • 博文分类别查看
    • 评论消息通知等。

    页面截图

    this is a picture of gif, may die

    this is a picture of gif, may die

    home page

    detail page

    author page

    comment page

    offline page

    search page

    下载入口

    可扫码直接下载体验:

    search page

    或访问以下链接下载:
    http://fir.im/togayther

    存在的问题

    • 详情页面HTML解析组件仍然存在一些性能和细节问题,对于一些长博客的渲染会耗费比较长的时间。
    • 博主详情、博文详情等接口会出现偶尔不会返回数据的问题。
    • 接口返回的数据格式为xml,对于前端的解析不够友好。我个人搭建了一个php的中间层。所以客户端请求的接口地址为:123.56.135.166。
    • 当前app引用的图标为自己创作,因为找了很久也没有找到博客园相关的app图标资源。不知道这样会不会有什么问题。
    • 站内链接应用内跳转查看(官方博文详情接口调用需要传入博文id,但很多博文都自定义了链接,这个还需要再斟酌一下)。
    • 一些性能问题。
    • IOS适配的问题,看接下来我的时间安排吧。
    • 其它一些交互及功能完善。

    源码地址

    https://github.com/togayther/react-native-cnblogs
    有任何问题,可在博文下方留言,或提交issue。

    一点后话

    在可预知的未来,构建移动端产品的工具及生产力,一定会伴随着科学技术的发展,变得越来越简单和统一。你很难想像时代的进步造福了全人类,但IT从业人员却仍然苦逼的为了兼容各大平台而感觉身体被掏空。就像现在很多原生开发人员开始抱怨工作没有前几年那么好找,其实一定程度上,缘于很多公司的技术选型发生了变化,更加倾向于以一种轻便统一的方式构建业务应用,react-native 当前在业内的热度也印证了这一点。作为技术人员,应该时刻关注行业动态,扩展视野,更新自己的技术栈,才能保证自己的竞争力。在这里祝各位园友工作顺利,也祝博客园紧跟移动互联网浪潮,越来越好!

     
    分类: 软件开发
  • 相关阅读:
    centos7 svn服务器的搭建
    fastdfs远程服务器java连接失败的问题
    Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
    数据库访问辅助类SqlHelper
    实现基本的Ajax和Json请求
    在Asp.Net MVC中使用Repeater控件
    Asp.Net MVC向视图View传值的三种方法
    C#实现加简单的Http请求
    Http协议学习小结
    iOS开发之layoutSubviews
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/5727675.html
Copyright © 2020-2023  润新知