V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yatessss
V2EX  ›  程序员

基于 Vue 的知乎日报移动 web 版

  •  
  •   yatessss · 2016-07-12 16:47:08 +08:00 · 5420 次点击
    这是一个创建于 3038 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前段时间在 github 上看到了知乎日报的 API 和一个用 vue 制作的知乎日报,觉得自己也应该试着做一个用来练习练习 vue 。制作历时两周,基本上是仿照安卓版知乎日报的 ui 做的,功能上除了一些需要登录后完成的功能如评论点赞等,基本上都实现了。

    运行录屏

    项目地址

    https://github.com/yatessss/zhihudaily-vue

    在线 demo

    是移动端的所以 pc 浏览器改成手机模拟模式比较好,图片加载速度比较慢

    在线 demo 地址

    第 1 条附言  ·  2016-07-12 19:42:02 +08:00
    如果可以~是不是能点个 star 呢(✪ω✪)~嘿嘿
    24 条回复    2016-07-13 17:26:05 +08:00
    yatessss
        1
    yatessss  
    OP
       2016-07-12 16:50:53 +08:00
    如果有什么 bug 或者不兼容欢迎大家提出~

    不足:

    没有使用 vuex 来管理数据状态,现在所有的都是耦合在项目里的,都是通过变量在组件当中互相传递状态的。因为我还没有学习 vuex 所以在这里就没有用到,在后面学习了 vuex 后,我会重新优化一下这个部分。

    没有加入手势功能,比如在侧边栏出现的时候,向左滑动来收起侧边栏比点击要自然很多, vue 也专门有一个手势功能的库,所以这个部分也是可以优化的。
    tigerstudent
        2
    tigerstudent  
       2016-07-12 17:04:39 +08:00 via Android
    三天两头就冒出个没见过的 js 形态,我服
    yatessss
        3
    yatessss  
    OP
       2016-07-12 17:18:50 +08:00
    @tigerstudent 额。。。。宝宝也心累啊 😂😂
    noe132
        4
    noe132  
       2016-07-12 17:28:28 +08:00
    还不错~不过 firefox 不友好。。。
    yuyang041060120
        5
    yuyang041060120  
       2016-07-12 17:30:16 +08:00
    给你点个赞
    yatessss
        6
    yatessss  
    OP
       2016-07-12 17:37:28 +08:00
    @noe132 (⊙o⊙)…我主要是在 chrome 里和 QQ 的 x5 内核的 webview 里测试的。。。确实没考虑 Firefox 兼容啊。。。:-(
    wslsq
        7
    wslsq  
       2016-07-12 17:37:35 +08:00
    很棒,感谢楼主分享
    yatessss
        8
    yatessss  
    OP
       2016-07-12 17:37:41 +08:00
    @yuyang041060120 O(∩_∩)O 谢谢
    jaywcjlove
        9
    jaywcjlove  
       2016-07-12 17:44:06 +08:00   ❤️ 1
    @yatessss iOS 兼容问题 iPhone 4/4s 上面的浏览器会有兼容问题 解决方法如下 https://segmentfault.com/n/1330000005851173
    jaywcjlove
        10
    jaywcjlove  
       2016-07-12 17:45:35 +08:00
    @yatessss 如果 iPhone5 系统不升级 `position:fixed`定位会有卡顿的情况
    yatessss
        11
    yatessss  
    OP
       2016-07-12 18:51:38 +08:00
    @jaywcjlove 非常感谢!已按照你说的方式优化了,看解决方法的图片,这个问题是说的 header fixed 在顶部会出现问题吧? 还是说侧边栏滑动时 用 fixed 会出现卡顿
    yatessss
        12
    yatessss  
    OP
       2016-07-12 18:51:59 +08:00
    @wslsq ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ 逃
    dtfm
        13
    dtfm  
       2016-07-12 19:05:03 +08:00
    上次看见一个用 vue.js 写的 QQ 呢,现在 js 都这么强大么?照这个趋势,以后 Native 客户端要要跟着 flash 一起上路。
    liteneo
        14
    liteneo  
       2016-07-12 19:39:48 +08:00
    知乎日报简直是最好的练手 API
    yatessss
        15
    yatessss  
    OP
       2016-07-12 19:40:23 +08:00
    @dtfm 不会的,你可以先体验一下,且不说手机不同浏览器的版本和兼容性问题,在一些性能差一些的手机上,流畅性远远不如原生,不过现在有了 react native 和 weex 可以用 js 去实现原生,但是我还没有了解过这方面,以后学习一下吧~
    yatessss
        16
    yatessss  
    OP
       2016-07-12 19:42:57 +08:00
    @liteneo 哈哈哈哈 但是得用 nginx 转一下才可以 要不然前端会跨域 造福人类啊知乎日报~
    zhuangzhuang1988
        17
    zhuangzhuang1988  
       2016-07-12 19:45:34 +08:00
    已经 star.
    yatessss
        18
    yatessss  
    OP
       2016-07-12 19:48:40 +08:00
    @zhuangzhuang1988 /抱拳 /抱拳
    Stlin
        19
    Stlin  
       2016-07-13 00:43:05 +08:00
    star ! 学习,学习,我也正在写个类似的斗鱼 TV 呢~ 看了一下代码你好像是用 nginx 反代了 api ?我是直接用的 config/index.js 里面的 proxyTable 反代了 api 呢,感觉挺方便的呢~ 在这里跟楼主说下
    yatessss
        20
    yatessss  
    OP
       2016-07-13 09:45:10 +08:00
    @Stlin 哈哈 斗鱼也会有 api 吗?嗯对我用 nginx 转了一下。是吗?我都不知道。。。。 - - 请问你有具体的项目地址吗? 我去也学习学习~
    Stlin
        21
    Stlin  
       2016-07-13 12:36:04 +08:00
    @yatessss 有啊,斗鱼首页拉到底,有个友情链接->开发者论坛,里面有提供开放的 api ,不过 api 很少。愁死我了,我弄看直播都不知道要怎么解决!那个反代 api 的具体可以看这里 http://vuejs-templates.github.io/webpack 。我写的很乱呢~都还没有开源,等我整理下弄到 github 上面去吧
    yatessss
        22
    yatessss  
    OP
       2016-07-13 14:00:58 +08:00
    @Stlin 我记得上次在论坛里看到过一个直播聚合的网站,还有一个自己写的直播平台,你可以在站里搜一搜,哈哈哈 cnode 上面开放的 api 还好,不是有一个 vue 的项目是 cnode 的 webapp 版吗?可以参考参考那个~ 等到时候写得差不多了一定 @我啊~
    Stlin
        23
    Stlin  
       2016-07-13 14:36:53 +08:00
    @yatessss 嗯 我去找找看~,写完了到时候 @你
    yatessss
        24
    yatessss  
    OP
       2016-07-13 17:26:05 +08:00
    @Stlin 🆗🆗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1237 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 23:24 · PVG 07:24 · LAX 15:24 · JFK 18:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.