Fork me on GitHub
RainingNight

Hybrid小程序混合开发之路 - 数据交互

HTML+CSS是历史悠久、超高自由度、控制精准、表现能力极强、编码简单、学习门槛超低、真跨平台的一种UI界面开发方式。

本文介绍的是微信小程序和H5混合开发的一种数据交互方式。

很多应用在原生界面中混杂着HTML界面

记得xp时代的QQ,有些界面偶尔会弹出熟悉的js错误对话框,还能右键弹出熟悉的IE6的右键菜单,伪装的挺好,差点没认出来,现在的QQ就不知道了。

美团、淘宝这些拥有几乎无限界面的手机App,顶部进度条一亮,这是一个H5 没谁了!

Electron!好嗨哟~

数据交互

使用了HTML作界面,那么和原生程序之间的数据交互基本上是少不了的~(仅仅当做浏览器性质来用的就算了)~。

如原生程序要控制H5界面变化,就需要由原生程序传出数据到H5。

如H5界面用户点击动作触发涉及原生程序业务逻辑的调用,就需要由H5传入数据到原生程序。

这两种数据传输组合在一起就成了交互。在自行嵌入浏览器内核、Electron都可以有自己的接口实现,Android、水果~(滑稽,本文与此物种无关,下同)~都有成熟的解决方案。

Hybrid App 与 Hybrid 小程序

Hybrid App并非一定是和H5的混合开发,但本文所说的专指H5。同一界面,编写一次代码,就能同时运行在Android、水果、浏览器之上,说没有诱惑力是假的。

小程序并非一定指的的某家的小程序,但本文所说的专指微信小程序。拥有一个强大的流量入口,嗯,就只这一点 ~(看好PWA)~。

自从微信小程序开放了webview,和Hybrid App就有了共性,然后生了个“Hybrid 小程序”,是我一个人这么叫吗?我不管,我就要叫!

然鹅,开发者对小程序底层的话语权几乎为0,小程序给什么我们就吃什么,嗯,真香。虽然提供了webview,但未提直接的供交互手段(记得要双向才能算交互吗,单向传递数据一边玩球)。

似乎Hybrid之路已然折戟。

Hybrid 小程序数据交互

终极手段,合理合法!

注:发现有人采用的是websocket来实现的数据交互,原生小程序和H5都通过服务器来中转数据,点评:这也是个好办法。

数据传入

基本原理:H5使用wx.miniProgram.navigateTo传递数据给小程序原生程序代码。

数据传出

基本原理:通过改变webview src中的hash,来实现无刷新数据传入原生小程序。最初开放webview时可用,后面有版本不行了,改变src中任意字符会导致重新加载界面,神奇的是现在又恢复了改变hash不会刷新。

升级版:通过改变后台webview src中的hash,实现数据传入我们后台页面,不管有没有重新加载,hash始终能被我们的H5代码接收(而且省去了处理url变化的问题)。然后由后台页面传输数据给前台页面。

实战

举个支付吧,点击H5内的支付按钮,执行完业务逻辑,支付条件准备完毕,现在需要调起微信支付。

小程序启动

  1. 小程序启动。
  2. 启动Response.wxmlwebview加载后台页面。
  3. 启动Main.wxml,保留Response.wxml后台页面在后台运行,前台主界面加载页面。启动完毕。

开始支付

  1. 主界面请求jssdk wx.miniProgram.navigateTo接口向Request.wxml界面发起请求,path中携带请求数据。
  2. Request.wxml原生程序接收到请求,发现支付请求并不需要保留界面,立马返回上一个界面(前台主界面);然后后台继续处理支付请求,调起微信支付。
  3. 前台主界面H5此时应该是在等待Request.wxml的响应结果,并且微信已经弹出支付功能。
  4. 用户支付完成,Request.wxml残留代码收到支付响应结果,立马通知Response.wxml修改后台页面src中的hash,响应结果数据包含在其中。
  5. 后台页面监听到hash change事件,或 页面刚刚加载完毕事件。从hash中拿到响应数据。
  6. 后台页面把响应数据写入localStroage,前台页面监听到localStroage数据。成功得到支付响应数据。

问题缺陷

第2步虽然立即返回了,但还是会有一个短暂的界面切换动画,不过这种数据交互本来就是重量级的,也不可能频繁调用,Android和水果都是一样的,所以用户体验就是这么可观。

改变webview src hash产生的行为是不可预测的 ,任性的版本,如果会刷新页面,延迟会比较大,甚至导致两次调用之间相互覆盖结果。

应用案例

笔者最近开发的小程序《祝福贺卡助手》,主功能采用的纯web网页,底层和微信小程序的数据交互就是本文介绍的这套模式。有2个比较重要的交互接口,一个是获取用户数据、另外一个是调起分享;当然还有一堆其他辅助类的接口。

扫码体验

网页版:

小程序版:

界面和功能开发一遍,网页、小程序通吃~ 这就是Hybrid小程序的魅力!


围绕着小程序《祝福贺卡助手》的开发和审核上线过程,对于其中一些有趣的东西,我会分享出来。

下篇内容预告:Hybrid小程序混合开发之路 - H5录音和水果的对抗。

posted @ 2019-01-23 07:53 xiangyuecn 阅读(...) 评论(...) 编辑 收藏