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内的支付按钮,执行完业务逻辑,支付条件准备完毕,现在需要调起微信支付。
小程序启动
- 小程序启动。
- 启动
Response.wxml
,webview
加载后台页面。 - 启动
Main.wxml
,保留Response.wxml
后台页面在后台运行,前台主界面加载页面。启动完毕。
开始支付
- 主界面请求
jssdk
wx.miniProgram.navigateTo
接口向Request.wxml
界面发起请求,path
中携带请求数据。 Request.wxml
原生程序接收到请求,发现支付请求并不需要保留界面,立马返回上一个界面(前台主界面);然后后台继续处理支付请求,调起微信支付。- 前台主界面H5此时应该是在等待
Request.wxml
的响应结果,并且微信已经弹出支付功能。 - 用户支付完成,
Request.wxml
残留代码收到支付响应结果,立马通知Response.wxml
修改后台页面src
中的hash
,响应结果数据包含在其中。 - 后台页面监听到
hash change
事件,或 页面刚刚加载完毕事件。从hash
中拿到响应数据。 - 后台页面把响应数据写入
localStroage
,前台页面监听到localStroage
数据。成功得到支付响应数据。
问题缺陷
第2步虽然立即返回了,但还是会有一个短暂的界面切换动画,不过这种数据交互本来就是重量级的,也不可能频繁调用,Android和水果都是一样的,所以用户体验就是这么可观。
改变webview
src
hash
产生的行为是不可预测的 ,任性的版本,如果会刷新页面,延迟会比较大,甚至导致两次调用之间相互覆盖结果。
应用案例
笔者最近开发的小程序《祝福贺卡助手》,主功能采用的纯web网页,底层和微信小程序的数据交互就是本文介绍的这套模式。有2个比较重要的交互接口,一个是获取用户数据、另外一个是调起分享;当然还有一堆其他辅助类的接口。
扫码体验
网页版:
小程序版:
界面和功能开发一遍,网页、小程序通吃~ 这就是Hybrid小程序的魅力!
围绕着小程序《祝福贺卡助手》的开发和审核上线过程,对于其中一些有趣的东西,我会分享出来。
下篇内容预告:Hybrid小程序混合开发之路 - H5录音和水果的对抗。
Hybrid小程序混合开发之路 - 数据交互的更多相关文章
- 微信小程序云开发-数据库-更新数据
一.js文件代码使用.update更新数据 写一个更新数据的函数,函数内使用.update更新数据.一定要通过.doc指定修改哪一条数据. 二.wxml文件修改数据的按钮 在wxml文件中写[修改] ...
- 微信小程序云开发-数据库-删除数据
一.js文件使用.remove()删除单条数据 在js文件中写updategood函数,在函数中使用.doc()指定要删除的数据id,调用.remove()方法删除数据. 二.wxml文件添加[删除] ...
- 开发 | 如何在微信小程序的页面间传递数据?
我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法. 本期,知晓程序(微信号 zxcx0101)为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有 ...
- 微信小程序的开发(一)
我现在在学习,微信小程序开发,刚刚看看一篇对我特别有用的博客文章,我就把摘抄过来了,好好的学习一下. 序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」 ...
- 微信小程序代开发
微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考 注意事项:如果在调试过程中返回了错误码请到小程序 ...
- 【推荐】开源项目minapp-重新定义微信小程序的开发
minapp 重新定义微信小程序的开发 官网:https://qiu8310.github.io/minapp/ 作者:Mora minapp 重新定义微信小程序的开发 使用 用 npm 安装命令行工 ...
- 微信小程序快速开发上手
微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...
- 【微信小程序云开发】从陌生到熟悉
前言 微信小程序在9月10号正式上线了云开发的功能,弱化后端和运维概念,以前开发一个小程序需要申请一个小程序,准备一个https的域名,开发需要一个前端一个服务端,有了云开发只有申请一个小程序,一个前 ...
- 微信小程序如何调用API实现数据请求-wx.request()
前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...
随机推荐
- http协议及长连接和短连接
1. HTTP协议与TCP/IP协议的关系 HTTP的长连接和短连接本质上是TCP长连接和短连接.HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议. IP协议主要解决网络路由和寻址 ...
- recovery 升级过程LED灯闪烁
Android设备在进入recovery升级的过程,我们在屏幕上面可以看到升级的机器人动画,以及升级的进度显示.这仅限于有屏幕的设备,比如平板PAD,电视TV等,对与没有屏幕的盒子BOX,那么在不接入 ...
- 13、多进程multiprocessing、进程池
内容相关: multiprocessing: 进程的创建与运行 进程常用相关函数 进程池: 为什么要有进程池 进程池的创建与运行:串行.并行 回调函数 多进程multiprocessing: pyth ...
- HTTP的Referrer和Referrer Policy设置
Referrer referrer是HTTP请求header的报文头,用于指明当前流量的来源参考页面.通过这个信息,我们可以知道访客是怎么来到当前页面的.这对于Web Analytics非常重要,可以 ...
- Java新建Web应用与配置Tomcat流程
1. 新版本IDEA新建Web应用后没有web.xml文件,需要通过下图方式添加 2. IDEA中的web文件夹相当于eclipse里的WebRoot文件夹,在里面新建WEB-INF文件夹,再创建cl ...
- 【redis专题(1)】安装与启动
简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo(redis之父)写的key-value存储系统. Redis提供了一些丰富的数据 ...
- [20180327]行迁移与ITL浪费.txt
[20180327]行迁移与ITL浪费.txt --//生产系统遇到的一个问题,增加一个字段到表结构,修改数据字典,导致出现行迁移,而更加严重的是没有修改pctfree值,--//以后的业务操作,依旧 ...
- ALSA声卡驱动的DAPM(一)-DPAM详解
最近使用tinymix 调试相应的音频通道,但是一直不知道音频通道的原理是什么.所以百度了一下,百度结果是与DPAM有关. 一.DAPM简介: DAPM是Dynamic Audio Power Man ...
- Kali下Ettercap 使用教程+DNS欺骗攻击
一.Ettercap 使用教程 EtterCap是一个基于ARP地址欺骗方式的网络嗅探工具.它具有动态连接嗅探.动态内容过滤和许多其他有趣的技巧.它支持对许多协议的主动和被动分析,并包含许多用于网络和 ...
- 手机上的m3u8视频(缓存)怎么转成MP4?
一.下载M3u8合并APK,自定义扫描手机中的m3u8文件目录.选择导出的目录,可以多个同时进行m3u8的合并任务. 合并后的文件可以完整播放,但是视频时间只有前十来秒,进度无法拖动. 二.将合并好的 ...