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

[pcatzj]

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

[TimCheng]

现在 APP 里面应该是一个 HTML5 的地址链接吗？

[yangg]

1. 判断 native 是否支持某个接口 ，再决定 h5 的功能及界面
2. 判断版本

[PennyLee]

h5 逻辑要做版本控制的。。

[pcatzj]

@PennyLee 大概的思路呢？因为我不是做 h5 的，所以能不能稍微解释下

[qiayue]

难道不是 HTML5 页面根据 APP 的版本号显示不同的版本吗？

[eclipselu]

lz 可以看下这个 http://lincode.github.io/Rexxar-OpenSource

[PennyLee]

@pcatzj

1. h5 里面获取 native 版本
2. 针对不同版本写不同逻辑

[pcatzj]

@PennyLee
@qiayue
是吧，应该是这样吧，我也觉得应该是这样，可是他们竟然想到了版本不对就强制更新的招！！！

[pcatzj]

@yangg 就是和楼下说的差不多，根据 native 的版本控制逻辑？

[pcatzj]

@TimCheng ？？？就是 webview 加载一个个网页

[pcatzj]

@eclipselu 收藏了，但是现在要部署这个框架，估计够呛，毕竟。。。额。。。大概你懂？

[yyy]

我们的做法是，根据 APP 的版本， HTML5 也有对应的版本

[TimCheng]

@pcatzj 首先如果是 Web 端更新的话，在 Webview 中一定会更新的。但是因为更新完之后造成样式或者功能的偏差，这个只能用 Native 调整。 Native 是基础，不然 Web 写的再好也是白瞎！

[pcatzj]

@yyy 那就有多套 HTML 代码？

[pcatzj]

@TimCheng 怎么调整呢？

[wobuhuicode]

版本控制肯定要啊！
我的做法： H5 的静态资源由 native 请求，并且插入。

[pcatzj]

@wobuhuicode 这听着有点复杂啊，但是关键的是功能啊，功能的差异才是最想要规避的。在功能入口加入版本判断如何？

[yyy]

@pcatzj 用 git 管理版本比如 2.0.0 、 3.0.0 。因为你要考虑一个问题：旧版本的 APP 不支持一些接口的时候，你不把 HTML5 划分一个版本的话，兼容性怎么解决？如果显式判断版本号，将来维护起来会不会很麻烦？所以现在都分版本。

[wobuhuicode]

@pcatzj
1.页面的内容都是由 JS 生成（采用了 react/vue ）
2.页面和后台采用全 AJAX 通信
这两步就解放了 HTML ！版本号只需在静态文件下手就好了。
3. APP 打包的时候把静态文件打包进去
4. APP 端请求页面(页面内是不引入 js/css/image)，自己插入静态文件(css/js)
这两步保证了静态文件的引入控制，也避免了大块静态文件在使用的时候才下载。
5. 设置一个时间点去让 APP 请求服务器更新对应 APP 版本的静态文件。

[pcatzj]

@yyy 但是应用怎么获取 git 分支代码？

[yyy]

@pcatzj 无法理解这个问题。获取分支和发布 HTML5 页面有什么必然联系？

[pcatzj]

@yyy 就是 1.x 版本的和 2.x 版本的应用怎么获取不同 git 分支的 HTML 页面分别加载

[yyy]

@pcatzj APP 通过读一份配置来决定加载哪个页面。这份配置又前端负责维护生成，这样可以较灵活地更新 HTML5 页面。

[alqaz]

native 开放一个获取版本的借口，然后 h5 根据它来调用？

[TimCheng]

@pcatzj 如果你要是使用的像是 phoneGap 或者 Hbuilder 的话，那么我建议你还是去歇歇吧！我以前的公司是做 Hybrid App 的，他们有一个自己写的 webkit 的引擎，如果要条样式或者加一些 Native 的功能（例如调用手机摄像头）都需要原生的开发人员去写的。

[yunshansimon]

我做过 phonegap/cordova 的开发。 h5 里面可以获得 app 的版本号（ cordova 提供的 api ，当然，自己写一个也没什么难度，只是需要 native 代码提供版本号）。你的任何新功能，要在运行时检查版本号，低于某个版本号，就显示一个提示更新的信息就好了（你可以专门写个函数，比对 native 版本和参数版本，然后在新功能开始的时候运行这个函数）。这样，客户可以享受 h5 更新带来的新界面，只有在使用新功能时才会被提示升级。他觉得用不着新功能，还可以点确定后接着用，不会被反感强制升级。

[pcatzj]

@alqaz 但是这样是不是每个功能入口都得做判断？前端开发人员说貌似代价有点大

[pcatzj]

@yyy 就像你之前说的，有没有动态调用 git 上不同 branch 的办法（大概就是将 git 的 branch 结构转化为可访问的 URL ）？

[pcatzj]

@TimCheng 意思是新功能的入口尽量维持在 native ？

[pcatzj]

@yunshansimon 我也觉得是这么个方案，但是还有一种情况是并非是新功能，而是旧功能的更新。这样是不是就要在该功能模块的入口处做判断，并维持两套逻辑（大概也就意味着两套代码）？

[yyy]

@pcatzj 为何前端不把项目发布到静态资源服务器上， Native 这边只要把发布出来的 url 拿过来就好了呀。没必要去想动态调用 git 上不同 branch 这么复杂的东西。。。

[TimCheng]

@pcatzj 原生能力是要维持在 native 里面，图形渲染也是在 Native 中控制的。

[alqaz]

@pcatzj 不需要吧，那些依赖新版本的 native 实现的功能才需要，要是每个功能都要，那是每个功能都升级一次更新一次，而且还每次都不兼容？这变化也太大了吧。

[pcatzj]

@yyy 是要维护几份代码吗？不然不同版本的 URL 该如何分配？

[pcatzj]

@TimCheng 我说的是 h5 的版本控制，不懂你在说什么（困惑）

[pcatzj]

@alqaz 我的意思是每个依赖 native 的功能都要加版本控制，功能更新了才会将该功能的版本控制部分的版本号更新一下，没有更新的功能当然不需要动了

[alqaz]

@pcatzj 前端代码每次都是最新的，刚开始根本不需要，但是 native 库获取版本接口一开始就需要。只是后面功能修改，如果你使用到了新的接口，才需要。

[vjnjc]

最简单的是不要升级原有的 h5 file ，用一个新的 url 放新的 h5 ，那么新的 native+新的 h5 完美。
讲究点的话 url 配上版本控制。

[yyy]

@pcatzj
@vjnjc 的就是我那样的方案。

[pcatzj]

@vjnjc
@yyy
@alqaz
大概方案基本上都差不多确定了，大家的想法也都差不多，就看前端的小伙伴怎么实施了，我把大家的想法分享给他们，然后看他们的意见吧。感谢大家！

[yuxuan]

反正版本控制要么做到页面逻辑代码里，要么做到页面 URL 调用里，一套代码和两套代码的区别

[pcatzj]

@yuxuan 做到页面逻辑代码里大概是什么逻辑，请不吝赐教！

[yuxuan]

@pcatzj 页面逻辑的话 就是客户端提供个接口 页面来调用 判断版本号是不是要展示新的功能 对于版本号不符合或者没有这个接口的 展示就功能 try catch 一下就好

[pcatzj]

@yuxuan 对，大概都是这个思路

[yuxuan]

@pcatzj 嗯呢 比较通用的