题叶与敖天羽的Weex实战案例解析

2017年3月9日，周四晚上8点30分，饿了么资深前端工程师题叶和敖天羽带来了主题为“Weex 技术在饿了么前端的实战经验”的交流。以下是主持人小冰整理的问答实录，记录了作者和读者问答的精彩时刻。

问：请问页面间跳转传参数是如何实现的？Weex跳Weex，web跳web？

答：我们这边试过跳转到 Weex 页面在 bundleUrl 里加上一个 queryString, Weex 里通过解析 bundleUrl 获得参数。而跳转到 Web 也可以同样处理，区别是解析 location.search 。Web 跳 Weex 的话，需要 App 的开发人员提供一种特别的 Scheme，比如你可要求 App 方支持 myapp://weex?url=http://example.com/weex.js?a=3 这种类型的 Scheme。同理，也可以要求 App 方支持 myapp://web?url=http://example.com/?a=3这种类型的 Scheme，这样就支持了 Weex 中打开 Web。也就是通过 url 当中的状态去实现了, 比较常用的一个办法。（也就是说要原生开发人员支持这种方式？）是的。

问：这两天苹果禁用jspatch事件是否会影响Weex？

答：现在还没有确定的结论。我们询问过勾三股四，在苹果发布了通知之后，依然有使用 Weex 的应用通过了审核。使用了 Weex 的 App 发版比较着急（比如一周内上线），可能需要先移除 Weex 相关的代码去提交审核。这一点我觉得跟上官方的消息会更快一点, 比说 issue 上或者开发团队的微博。

问：如何更精准的适配是如何做的？关于Weex只支持px这一点，比如图片的展现就必须要写出宽高。

答：图片必须写出宽高是 Weex 的硬性要求，这和 AMP 的要求是一致的，这样带来的好处是，图片的加载不会带来页面的跳动，同时也有助于减少系统绘制时的布局计算。如果图片的高宽无法事先确定，可以先设置为0，从后端获取图片高宽之后再动态设置, 有个例子可以参考。AMP 是 Google 的一个技术, 在 PWA 之前, 类似的也做了优化网页加载。好像 Weex 会以总宽 750 px 为依据自动计算实际需要的大小，不存在更精确的适配问题。

问：文章中提到业务开发只用了三天，报错和性能监控用了两周。使用Weex是不是需要花很多时间用于性能的优化？使用Weex需要熟悉Android 和 iOS 开发吗，还是只要了解即可？

答：Weex 的性能很优异，不用特别的去优化。同时因为是第一个采用 Weex 的项目, 相对谨慎并不是一个很复杂的页面。监控和降级是互联网公司的通用措施，用来降低线上事故对用户的影响。我们初次使用 Weex，肯定也有很多疑虑，所以花了很多时间在监控和降级上。由于 Weex 不少程度复用了 HTML5 开发当中开发方式, 其实也有小部分栈是可以复用的.使用 Weex 需要 iOS、Android 程序员集成到你们 App 中，这个估计 2 天工作量就可以搞定了。前端程序员在使用 Weex 的时候，用到的 iOS、Android 知识最多是怎么启动一个模拟器。甚至如果是纯粹 js 部分的开发的话, 比如借助 Weex Playground, 其实也就是扫码打开一个 Weex 页面的地址那么简单,可能在查看 log 或者使用 debugger 方面确实要注意熟悉一下, 但总体上不用深入了解 Native 的开发(Native 组件的开发除外的话).

问：请问Weex中可以进行热修复，热更新这种处理吗？

答：如果你知道 WebView，可以按照 WebView 的方式去理解 Weex。WebView 加载的是 HTML 作为入口，WeexView 加载的是 JS 文件做入口。Weex 原生就支持加载远程的 JS 文件。所以如果想实现热更新，只要把自己的 JS Bundle 放到远程的 HTTP 服务器上就可以了。而且尝试过 Weex Playground 的话, 你会知道它扫码打开的就是一个 .js 的文件.所以热更新的话, 由于 Weex 的运行机制就是获取一个 JavaScript 文件, 只要重新获取这个文件, 就能达到更新的目的.

问：现在正在做一个项目，使用的是Android原生开发，打算后面的功能使用Weex开发，这样可行吗，我看一些Weex的入门资料，但都是点到为止，关于原生功能和Weex页面怎么传参，Weex怎么跳转到原生等等，都觉得没有可参考的实现。有没有比较好的资料供初学者学习和参考呢？

答：Weex 页面的传参上面的问题已经回答过了，关于初学者资料，我觉得首先是文档，Weex 的文档总体跑个 Hello World 还是没问题的。还有一些 Weex 的非官方写的教程，比如说我们的《Weex 新手指南》系列，针对于前端开发者写 Weex 我觉得基本够用了，如果是 Native 开发者写 Weex，可能需要再看一下 Vue.js 的官方文档了解一下 Vue。参考代码的话我们之后可能会出我们的仿饿了么教程，目前 GitHub 中也有一些比较有参考价值的文章。

问：本人电商应用，原来打算接入Weex的，然而呢？发现在三星galaxy上面有一些问题不显示，而我们的用户呢大部分是三星的。当时是同样代码，在华为、小米、魅族都可以，可是原生系统就不行，所以后面放弃了。不知道，您那边检测的时候有没有用户反馈这种问题，我们市场主要在美国那边。

答：我们上线的 Weex 版本的发现页崩溃率很低，我们的监控系统也并没有上报三星机型上的错误。非常抱歉，这个问题求助于 Weex 官方可能能获取到一些有用的信息。 粗体文字

问：综合Weex的技术成本和学习成本，目前看Weex是否具备了大型app构建的能力？Weex实现拖动交互困难,是困难在那个地方了？

答：Weex 的学习成本不高，前端工程师学习一周都能胜任。目前的 Weex 可以看成是 WebView 的性能改善版，完全使用 Weex 构建一个大型 App 并不现实。Weex 实现一些滚动效果的困难之处在于 Weex 的组件没有提供相应的事件，你无法得知用户正在滚动以及 Scroller 的当前位置。

问：Weex可以与原生的控件共存吗，还是用了Weex开发，所有控件都得用js来写了？

答：还是刚才那个问题的概念，你把 Weex 理解成类似 WebView 的技术。是可以在 App 中局部嵌入一个 WeexView 的，你可以参考下这个项目：https://github.com/dengjunwen/WeexPageDemo。

问：Weex listView 怎么优化的？

答：Weex 的 List 组件在 Android 端直自带的 RecyclerView；在 iOS 端自己实现了一个 List 组件，具体实现可以参考这里，我们看过一点代码，也是对不可见的 Cell 进行复用来达到的性能优化效果。

问：主动错误收集上报与业务逻辑混杂在一起是怎么解决的？

答：其实并没有解决这个问题, 现在监控的内容相对少, 因而没有侵入到业务当中,以后如果需要更加精确的监控, 未必能避免代码混进业务当中的. 我觉得这也不是 Weex 的问题.

问：能详细说下监控了哪些点吗？跟普通html5、原生app的监控异同？

答：主要监控了两个点：性能数据以及报错数据。和 HTML 5 的不同就是需要 App 配合才能拿到性能、错误数据，而不是通过浏览器的 API 不同。比如 addEventListener "error" 我们在使用当中发现并不能像 web 那样可靠地捕获到所有 error。我们了解到的是 App 的监控通过 Hook 系统的 API 的方式去监控，Weex 的监控通过 Weex 本身提供的生命周期去监控。从 Weex 获得 renderTime, networkTime, 以及 SDK 初始化消耗的时间等等, 这些和 Web 当中的 Performance API 提供的网络时间信息有不小区别。（比较关注哪些指标？）Weex 这边具体是网络占用的时间, 示例启动的时间, 渲染占用的时间.

问：关于说到的 list 组件，虽然有服用。但是首次渲染实际上是一个 cell 一个 cell 渲染的，并非一次渲染的，所以首次加载时性能很差，特别是 iOS，因为内核。这个有解决办法么？

答：没有感觉慢，相比 Scroller 渲染速度快许多。你可以确认下是否用的 List 组件而非 Scroller。

问：除了 list 组件 ，有对其他组件和RN做过性能比较吗？

答：没有做过。WebView 目前的痛点也只在于的长列表的渲染，所以我们之前对性能的关注点还是在长列表上。

问：使用v-if值显示或隐藏组件，在app上出现卡顿，你们是怎么解决的？

答：我们确实也遇到过这个问题，我们目前使用的方法是：需要隐藏元素时，直接将 height 或者 width 置为0。比如：width: active ? '750px' : 0。

问：如果我要在项目 中使用Weex，前端和native端人员分配比是怎么样的？核心是不是还在native上？

答：我们只有在前期接入监控以及实现部分 Scheme 的时候需要 Native 端配合，正式进入业务开发就不需要 Native 端配合了。还是看业务类型，如果需要使用 Native 端的组件，可能还是需要 Native 端配合了。

问：1）在工程化方面你们有什么最佳实践；2）在对 tableView 或者其他方面有什么要注意的点来尽可能的使页面渲染更快（除了尽可能用 cell）？

答：目前我们也仍旧在探索阶段，并没有特别的最佳实践，只能是对着一些资料进行探索。tableView 并不清楚。

问：我的问题是现在Weex还在快速迭代，难免出现bug，但是Weex官方团队处理这些问题上感觉有些慢。而且作为小团队很难去咨询到官方的人。 饿了么算是现在非官方最早接入Weex的大团队，不知道有没有兴趣和可能作为非官方去维护一些Weex社群，群内维护接入者的一些询问，或开展一些分享等，也可以将大家的声音带到Weex核心开发者。为Weex接入者谋些福利？

答：接触到 Weex 官方还是非常容易的，如果你真正的已经接入到你的 App 里面，你可以去联系下 vczero，他会加你到一个微信群里面。现在互助的还有 Weex.help 网站有很多爱好者, 也有社区自己的微信群, 可以加入.其实官方也说过了, Segmentfault 是他们会回答问题的地方, 其实在上面发问题已经有很多的回答了, 而且有 Weex 核心团队的同学在解答问题.我们没有维护非官方社区的打算. 其实 Weex 已经是中文社区的技术和平台了,大家可以尽量参与到官方的活动或者分享当中。

问：没用过Weex，那么Weex如果是基于webview，那么对于比如原生android的list view上容易出现的OOM的问题 Weex那边是怎样解决和优化的呢？

答：Weex 并不是基于 WebView, 准确说和浏览器共通的是 V8 引擎而已, 渲染引擎是通过 Native 代码的实现的。对于说的具体的 list view 上的问题, 我们没有深入过, 抱歉。

Chat文章：《Weex 技术在饿了么前端的实战经验》

在此感谢人民邮电出版社，为本场Chat的获奖读者提供了《Vue.js前端开发》一书。

本文转载自异步社区。

原文链接：https://www.epubit.com/articleDetails?id=NC7E3EF9359900001BEA8164A153037C0