很多应用在原生界面中混杂着HTML界面记得xp时代的QQ,有些界面偶尔会弹出熟悉的js错误对话框,还能右键弹出熟悉的IE6的右键菜单,伪装的挺好,差点没认出来,现在的QQ就不知道了。 美团、淘宝这些拥有几乎无限界面的手机App,顶部进度条一亮,这是一个H5 没谁了! Electron!好嗨哟~ 数据交互使用了HTML作界面,那么和原生程序之间的数据交互基本上是少不了的~(仅仅当做浏览器性质来用的就算了)~。 如原生程序要控制H5界面变化,就需要由原生程序传出数据到H5。 如H5界面用户点击动作触发涉及原生程序业务逻辑的调用,就需要由H5传入数据到原生程序。 这两种数据传输组合在一起就成了交互。在自行嵌入浏览器内核、Electron都可以有自己的接口实现,Android、水果~(滑稽,本文与此物种无关,下同)~都有成熟的解决方案。 小程序" style="font-size: 21px; line-height: 1.5; margin: 1.3rem 0rem; border-bottom: 3px solid rgb(0, 102, 153); color: rgb(47, 47, 47); font-family: Roboto, "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti; background-color: rgb(255, 255, 255);">Hybrid App 与 Hybrid 小程序Hybrid App并非一定是和H5的混合开发,但本文所说的专指H5。同一界面,编写一次代码,就能同时运行在Android、水果、浏览器之上,说没有诱惑力是假的。 小程序并非一定指的的某家的小程序,但本文所说的专指微信小程序。拥有一个强大的流量入口,嗯,就只这一点 ~(看好PWA)~。 自从微信小程序开放了 然鹅,开发者对小程序底层的话语权几乎为0,小程序给什么我们就吃什么,嗯,真香。虽然提供了 似乎Hybrid之路已然折戟。 Hybrid 小程序数据交互终极手段,合理合法!
数据传入基本原理:H5使用 数据传出基本原理:通过改变 升级版:通过改变后台 实战举个支付吧,点击H5内的支付按钮,执行完业务逻辑,支付条件准备完毕,现在需要调起微信支付。 小程序启动
开始支付
问题缺陷第2步虽然立即返回了,但还是会有一个短暂的界面切换动画,不过这种数据交互本来就是重量级的,也不可能频繁调用,Android和水果都是一样的,所以用户体验就是这么可观。 改变 应用案例笔者最近开发的小程序《祝福贺卡助手》,主功能采用的纯web网页,底层和微信小程序的数据交互就是本文介绍的这套模式。有2个比较重要的交互接口,一个是获取用户数据、另外一个是调起分享;当然还有一堆其他辅助类的接口。 扫码体验网页版: 小程序版: 界面和功能开发一遍,网页、小程序通吃~ 这就是Hybrid小程序的魅力! 围绕着小程序《祝福贺卡助手》的开发和审核上线过程,对于其中一些有趣的东西,我会分享出来。 下篇内容预告:Hybrid小程序混合开发之路 - H5录音和水果的对抗。 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码