Hybrid 原生控件体验优化

Posted by Guofeng Blog on December 27, 2017

Hybrid 原生控件体验优化

作者:国风

一、背景

h5在移动时代占据着不可替代的位置,快速更新,跨平台,体验一致,但是也有不可逾越的问题,那就是输入。输入主要存在如下问题:

  • H5无法自动唤起键盘

  • H5无法指定特定场景需要的键盘

    • 身份证
    • 纯数字
    • 数字密码键盘
    • 带小数点的数字键盘
    • 受设备影响大
    • 同一类型键盘在不同操作系统手机中表现不一致
  • H5模拟键盘体验差

系统目前值提供三种类型的键盘:普通文字键盘、数字键盘(多了一行数字,输入不方便),电话键盘(无符号)

background-1 background-2 background-3
文字键盘 数字键盘 电话键盘

无论是 iOS,还是 Android,h5只能用默认的键盘,很多特殊场景下仍然是普通键盘。类比下移动客户端定制的键盘,比如输入身份证(带 X),数字键盘(多个0的按钮),或者密码键盘,体验是非常好。这些特性能不能为 h5服务呢?答案是肯定的,本文接下来将介绍如何将原生定制键盘暴露给 H5无缝使用。

二、设计方案

2.1 总体方案

分为三个角色,用户、native和js(如下图);

用户操作的时候,js阻止系统弹起默认键盘,然后收集h5输入框的一些信息,包括位置、大小、样式(具体哪些信息咱们在商量);

Js将这些信息传递给native,native根据JS提供的信息,在webview之上生成新的view,新的view包含一个输入框和键盘,

提供给用户输入;

用户输入完成后(native不太懂,应该会触发类似于失去焦点的事件),native告诉js用户输入完毕,js将用户输入的信息再传递给用户

design

2.2 界面展示方案

从宏观上看,就是下面一层webview,上面一层是native的view,

design-1

如下为 native 计算控件位置和滑动距离的方式:

native-calc

2.3通信设计

这里建议使用 JsBridge,github 上有开源,加入如下两个通信接口:

一个methodname是 showKeyboard,并接收JS传递的输入框信息;

一个methodname是hideKeyboard,为js告诉native主动隐藏键盘和输入框(即销毁native-view);

Native 的输入事件通过固定回调,传递给 h5。

三、H5使用

我们的愿景目的是,场景方在使用中0副作用,做到真正的渐进增强;所以需要 h5对事件进行二次封装,由于这一块并不是我实现的,所以本文暂时不介绍,有兴趣的同学可以单独找我沟通。

这里只简单介绍下使用方式:场景方仅需在相关代码上添加一行代码即可,在可以使用廊桥安全键盘的版本下会自动使用安全键盘,否则使用场景方默认逻辑,可以做到0侵入;

对于业务方来说,是0成本的;d

bridge

use2

总结

本文介绍了一种使用原生控件来改善 h5的输入体验,类似微信和支付包小程序。当然后续可扩展的方式很多,比如图片控件,列表控件,或者各种动画,自定义控件等,最终是向着 ReactNative 方向的一个兼容方案。