一个一线前端攻城狮的快应用开发之路：2、我与WebView的斗...

XiaoTian

一个一线前端攻城狮的快应用开发之路：2、我与WebView的斗智斗勇

---

一、场景 在我们的产品的业务场景中，必须要引用一个特殊的第三方API：

• 这个API不能服务端封装，只能客户端自己引用SDK、自己初始化、自己调用。
• 初始化的过程比较慢，但一旦初始化过一次，在单次访问中可以一直调用不失效。然而如果快应用每个需要用到这个API的页面都初始化一次，则会等待时间较长，用户体验较差。

---

二、框架改造（1）：创造单页快应用 当时的想法很简单，想要一个全局可用的、唯一的Web组件，那么我就开始动手改造，大概步骤如下：

• 核心页面就一个Container.ux页面，里面引入了很多组件，每个组件其实就是一个单独的页面，例如Home.ux、WebView.ux等。
• 新增加每个页面的配置项，例如标题等，全局配置项全局存储一个 [ 当前活动页面信息 ] ，只有一个页面是显示的；
• 我重写了Redirect、Replace、Reload、Back、RemovePage等方法，自己模拟了页面堆栈，当用户点击页面上的跳转按钮时，将新新页面的页面信息写入堆栈中，Container中由于data中的数据变化，则会自动显示新页面，隐藏原页面。
• 当A页面需要跳转到B页面时，A页面需要发送消息给Container.ux，Container再调用同一封装的PageHandler，PageHandler会做特定操作。 this.$dispatch('redirectTo',{ Url: 'Detail',Params:JSON.stringify({pid:1132, img:false})}); Container.ux监听 that.$on('redirectTo',function (args) {controller.pageRedirectTo(that, args.detail.Url , args.detail.Params||'')});

---

三、框架搭建（2）：WebView通信（基于1010版本） 单页应用的形式改造好之后，我发现当前版本(1010)居然没有网页通信的接口？如果两边无法通信的话将会造成很多数据上和交互上的麻烦。当时一度以为：完了，感觉要凉凉。 虽然在群里和论坛里有收到回复说后续新版本会有专门的通信的接口，但是项目开发不能干等SDK更新，因为即使官方立马更新了SDK，十大厂商的覆盖率也是个问题，新属性新接口很可能没办法一下子投入使用。 于是我就开始研究现有接口，是否有可能通过现有接口来实现网页双向通信？ 最终研究出了这个方案： 实现原理

• 快应用端的Web组件的src从一开始就固定了，并且已进入应用实际上就开始执行那个特殊API的初始化。
• 快应用端通知H5：可以动态修改锚点，例如#login、#delete。也可以携带参数#get?id=1，#后一律视为锚点，因此参数需要在H5单独解析。修改锚点不会引起网页重新刷新，因此不会存在刷新后需要重新初始化的情况。
• H5端通知快应用：修改title，笔者是按照这种格式： 应用名-DELETE 解析后执行对应的DELETE事件，也可以携带简单的参数： 应用名-ADD-sandklasnmd 第二个-斜杠后代表某个id值。格式不唯一，总之就是H5通过document.title来发送消息。
• 快应用端监听titleReceive，并对title进行解析，然后执行对应的操作。 综合 [ 单页应用搭建方案 ] 和 [ 通信方式搭建方案 ]，我终于实现了WebView的理想操作，笔者内心可谓是激动不已： WebView全局可用，且只初始化一次,并且可以实现双向通信

---

四、框架优化（3）：WebView新通信（基于1020版本） 在产品上线一段时间后，终于迎来了1020新版本，这次我立马关注到了新增的message双向通信，看似非常好用的样子！ 但是！但是根据厂商发布的最新的覆盖率统计，目前仍有至少3个厂商完全不支持1020。支持1020的厂商，目前支持率也有高有低，如果直接使用的话，就意味着1010的用户会无法使用我们的产品。因此，产品和市场的同事们并不同意我们立马使用新特性……其实也在意料之中啦。 又过了一段时间，一方面官方最新统计的覆盖率有了些许地提升，另一方面市场的同事说貌似不支持1020的厂商市场占有率也不高，我们可以使用1020来主推几个大的厂商，还有就是部分厂商在1010版本中有未解决的BUG，希望我们升级到1020，一方面可以解决前面版本已知BUG，另一方面可以使用1020很多新特性来优化自己产品的体验。 终于，我就开始改造通信方式，快应用和H5分别都有自己的postmessage和receiveMessage写法，使用起来蛮方便的。并且我开始尝试大数据传输，比如把一个列表数据从H5传到快应用，完全没有问题。想起来如果之前使用title传递的话，会不会字节数就有限制了呢？这个倒没尝试过。

---

五、总结 总的来说，改造单页应用和Web通信其实还是蛮有意思的，的确在某个时间段解决了很大问题，真的感觉我在跟Web组件斗智斗勇，哈哈。如果有哪里错误或者问题欢迎大家不吝骚扰~ 快应用这门技术在不断成长中，作为一个基层前端开发，我愿意相信他会越来越好，也希望它能够越来越好。 其实这笔者的这份分享并没有大段的代码，想传递的还是一个思路、一个方案，能给大家一些启发最好了。 预告下：后面笔者会专门做一篇 [ 音频 ] 的分享，主要讲的就是关于快应用音频的种种操作，哈哈~

---

1024814617

想问一下楼主如何去除webview的标题栏，开放文档中说“打开网页，标题栏样式与打开 webview 的页面的标题栏样式相同”，但是打开网页的文件已经去除标题栏了，要做什么配置吗，我是直接点击按钮跳转到webview页面的