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

请教 native 和 h5 混合开发的问题

  •  1
     
  •   pcatzj · 2016-12-16 10:03:18 +08:00 · 11817 次点击
    这是一个创建于 2899 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在遇到一个问题,某 APP 混杂着 native 和 h5 的页面,但是现在遇到一个问题, h5 和 native 如何保持版本一致?用户如果没有更新 APP ,但是 web 端的界面已经更新了,导致某些功能出现偏差,对于这种问题,有没有什么好的解决办法?

    45 条回复    2016-12-22 21:20:25 +08:00
    TimCheng
        1
    TimCheng  
       2016-12-16 10:12:48 +08:00
    现在 APP 里面应该是一个 HTML5 的地址链接吗?
    yangg
        2
    yangg  
       2016-12-16 10:14:30 +08:00
    1. 判断 native 是否支持某个接口 ,再决定 h5 的功能及界面
    2. 判断版本
    PennyLee
        3
    PennyLee  
       2016-12-16 10:15:09 +08:00
    h5 逻辑要做版本控制的。。
    pcatzj
        4
    pcatzj  
    OP
       2016-12-16 10:35:05 +08:00
    @PennyLee 大概的思路呢?因为我不是做 h5 的,所以能不能稍微解释下
    qiayue
        5
    qiayue  
       2016-12-16 10:37:48 +08:00
    难道不是 HTML5 页面根据 APP 的版本号显示不同的版本吗?
    eclipselu
        6
    eclipselu  
       2016-12-16 10:38:39 +08:00
    PennyLee
        7
    PennyLee  
       2016-12-16 10:39:42 +08:00
    @pcatzj

    1. h5 里面获取 native 版本
    2. 针对不同版本写不同逻辑
    pcatzj
        8
    pcatzj  
    OP
       2016-12-16 13:24:22 +08:00
    @PennyLee
    @qiayue
    是吧,应该是这样吧,我也觉得应该是这样,可是他们竟然想到了版本不对就强制更新的招!!!
    pcatzj
        9
    pcatzj  
    OP
       2016-12-16 13:27:59 +08:00
    @yangg 就是和楼下说的差不多,根据 native 的版本控制逻辑?
    pcatzj
        10
    pcatzj  
    OP
       2016-12-16 13:28:24 +08:00
    @TimCheng ???就是 webview 加载一个个网页
    pcatzj
        11
    pcatzj  
    OP
       2016-12-16 13:33:19 +08:00
    @eclipselu 收藏了,但是现在要部署这个框架,估计够呛,毕竟。。。额。。。大概你懂?
    yyy
        12
    yyy  
       2016-12-16 14:14:30 +08:00
    我们的做法是,根据 APP 的版本, HTML5 也有对应的版本
    TimCheng
        13
    TimCheng  
       2016-12-16 16:15:56 +08:00
    @pcatzj 首先如果是 Web 端更新的话,在 Webview 中一定会更新的。但是因为更新完之后造成样式或者功能的偏差,这个只能用 Native 调整。 Native 是基础,不然 Web 写的再好也是白瞎!
    pcatzj
        14
    pcatzj  
    OP
       2016-12-16 16:20:27 +08:00
    @yyy 那就有多套 HTML 代码?
    pcatzj
        15
    pcatzj  
    OP
       2016-12-16 16:20:44 +08:00
    @TimCheng 怎么调整呢?
    wobuhuicode
        16
    wobuhuicode  
       2016-12-16 16:36:58 +08:00
    版本控制肯定要啊!
    我的做法: H5 的静态资源由 native 请求,并且插入。
    pcatzj
        17
    pcatzj  
    OP
       2016-12-16 17:04:11 +08:00
    @wobuhuicode 这听着有点复杂啊,但是关键的是功能啊,功能的差异才是最想要规避的。在功能入口加入版本判断如何?
    yyy
        18
    yyy  
       2016-12-16 17:19:00 +08:00
    @pcatzj 用 git 管理版本比如 2.0.0 、 3.0.0 。因为你要考虑一个问题:旧版本的 APP 不支持一些接口的时候,你不把 HTML5 划分一个版本的话,兼容性怎么解决?如果显式判断版本号,将来维护起来会不会很麻烦?所以现在都分版本。
    wobuhuicode
        19
    wobuhuicode  
       2016-12-16 17:21:48 +08:00
    @pcatzj
    1.页面的内容都是由 JS 生成(采用了 react/vue )
    2.页面和后台采用全 AJAX 通信
    这两步就解放了 HTML !版本号只需在静态文件下手就好了。
    3. APP 打包的时候把静态文件打包进去
    4. APP 端请求页面(页面内是不引入 js/css/image),自己插入静态文件(css/js)
    这两步保证了静态文件的引入控制,也避免了大块静态文件在使用的时候才下载。
    5. 设置一个时间点去让 APP 请求服务器更新对应 APP 版本的静态文件。
    pcatzj
        20
    pcatzj  
    OP
       2016-12-16 17:55:26 +08:00
    @yyy 但是应用怎么获取 git 分支代码?
    yyy
        21
    yyy  
       2016-12-16 18:33:08 +08:00
    @pcatzj 无法理解这个问题。获取分支和发布 HTML5 页面有什么必然联系?
    pcatzj
        22
    pcatzj  
    OP
       2016-12-16 18:43:47 +08:00
    @yyy 就是 1.x 版本的和 2.x 版本的应用怎么获取不同 git 分支的 HTML 页面分别加载
    yyy
        23
    yyy  
       2016-12-16 19:28:32 +08:00
    @pcatzj APP 通过读一份配置来决定加载哪个页面。这份配置又前端负责维护生成,这样可以较灵活地更新 HTML5 页面。
    alqaz
        24
    alqaz  
       2016-12-16 19:50:42 +08:00
    native 开放一个获取版本的借口,然后 h5 根据它来调用?
    TimCheng
        25
    TimCheng  
       2016-12-17 00:10:58 +08:00
    @pcatzj 如果你要是使用的像是 phoneGap 或者 Hbuilder 的话,那么我建议你还是去歇歇吧!我以前的公司是做 Hybrid App 的,他们有一个自己写的 webkit 的引擎,如果要条样式或者加一些 Native 的功能(例如调用手机摄像头)都需要原生的开发人员去写的。
    yunshansimon
        26
    yunshansimon  
       2016-12-17 01:10:29 +08:00
    我做过 phonegap/cordova 的开发。 h5 里面可以获得 app 的版本号( cordova 提供的 api ,当然,自己写一个也没什么难度,只是需要 native 代码提供版本号)。你的任何新功能,要在运行时检查版本号,低于某个版本号,就显示一个提示更新的信息就好了(你可以专门写个函数,比对 native 版本和参数版本,然后在新功能开始的时候运行这个函数)。这样,客户可以享受 h5 更新带来的新界面,只有在使用新功能时才会被提示升级。他觉得用不着新功能,还可以点确定后接着用,不会被反感强制升级。
    pcatzj
        27
    pcatzj  
    OP
       2016-12-20 10:07:22 +08:00
    @alqaz 但是这样是不是每个功能入口都得做判断?前端开发人员说貌似代价有点大
    pcatzj
        28
    pcatzj  
    OP
       2016-12-20 10:08:54 +08:00
    @yyy 就像你之前说的,有没有动态调用 git 上不同 branch 的办法(大概就是将 git 的 branch 结构转化为可访问的 URL )?
    pcatzj
        29
    pcatzj  
    OP
       2016-12-20 10:11:45 +08:00
    @TimCheng 意思是新功能的入口尽量维持在 native ?
    pcatzj
        30
    pcatzj  
    OP
       2016-12-20 10:15:20 +08:00
    @yunshansimon 我也觉得是这么个方案,但是还有一种情况是并非是新功能,而是旧功能的更新。这样是不是就要在该功能模块的入口处做判断,并维持两套逻辑(大概也就意味着两套代码)?
    yyy
        31
    yyy  
       2016-12-20 10:18:53 +08:00
    @pcatzj 为何前端不把项目发布到静态资源服务器上, Native 这边只要把发布出来的 url 拿过来就好了呀。没必要去想动态调用 git 上不同 branch 这么复杂的东西。。。
    TimCheng
        32
    TimCheng  
       2016-12-20 10:36:34 +08:00
    @pcatzj 原生能力是要维持在 native 里面,图形渲染也是在 Native 中控制的。
    alqaz
        33
    alqaz  
       2016-12-20 11:14:34 +08:00
    @pcatzj 不需要吧,那些依赖新版本的 native 实现的功能才需要,要是每个功能都要,那是每个功能都升级一次更新一次,而且还每次都不兼容?这变化也太大了吧。
    pcatzj
        34
    pcatzj  
    OP
       2016-12-20 11:37:14 +08:00
    @yyy 是要维护几份代码吗?不然不同版本的 URL 该如何分配?
    pcatzj
        35
    pcatzj  
    OP
       2016-12-20 11:38:05 +08:00
    @TimCheng 我说的是 h5 的版本控制,不懂你在说什么(困惑)
    pcatzj
        36
    pcatzj  
    OP
       2016-12-20 11:40:12 +08:00
    @alqaz 我的意思是每个依赖 native 的功能都要加版本控制,功能更新了才会将该功能的版本控制部分的版本号更新一下,没有更新的功能当然不需要动了
    alqaz
        37
    alqaz  
       2016-12-20 13:07:22 +08:00
    @pcatzj 前端代码每次都是最新的,刚开始根本不需要,但是 native 库获取版本接口一开始就需要。只是后面功能修改,如果你使用到了新的接口,才需要。
    vjnjc
        38
    vjnjc  
       2016-12-20 15:55:27 +08:00
    最简单的是不要升级原有的 h5 file ,用一个新的 url 放新的 h5 ,那么新的 native+新的 h5 完美。
    讲究点的话 url 配上版本控制。
    yyy
        39
    yyy  
       2016-12-20 16:06:17 +08:00
    @pcatzj
    @vjnjc 的就是我那样的方案。
    pcatzj
        40
    pcatzj  
    OP
       2016-12-21 09:46:27 +08:00
    @vjnjc
    @yyy
    @alqaz
    大概方案基本上都差不多确定了,大家的想法也都差不多,就看前端的小伙伴怎么实施了,我把大家的想法分享给他们,然后看他们的意见吧。感谢大家!
    yuxuan
        41
    yuxuan  
       2016-12-21 09:48:08 +08:00
    反正版本控制要么做到页面逻辑代码里,要么做到页面 URL 调用里,一套代码和两套代码的区别
    pcatzj
        42
    pcatzj  
    OP
       2016-12-22 20:09:15 +08:00
    @yuxuan 做到页面逻辑代码里大概是什么逻辑,请不吝赐教!
    yuxuan
        43
    yuxuan  
       2016-12-22 20:32:56 +08:00
    @pcatzj 页面逻辑的话 就是客户端提供个接口 页面来调用 判断版本号是不是要展示新的功能 对于版本号不符合或者没有这个接口的 展示就功能 try catch 一下就好
    pcatzj
        44
    pcatzj  
    OP
       2016-12-22 20:38:05 +08:00
    @yuxuan 对,大概都是这个思路
    yuxuan
        45
    yuxuan  
       2016-12-22 21:20:25 +08:00
    @pcatzj 嗯呢 比较通用的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1095 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:51 · PVG 02:51 · LAX 10:51 · JFK 13:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.