你真的完全掌握了 Input 组件的键盘控制么? ——百度智能小程序 Input 组件原理剖析与键盘行为说明
在百度智能小程序的很多开发场景中,我们都会使用到 Input 输入框组件。而在操作输入框的过程中,正确处理键盘的弹出和收起行为也是十分重要的一环。键盘行为不仅需要完美符合业务场景,同时也和用户体验息息相关。
那么,你真的完全掌握了 Input 组件的键盘控制么?
Input 组件的使用
在智能小程序的开发过程中,开发者通过使用 Input 组件的 focus 和 blur 属性来控制键盘,从而实现当用户点击 Input 框时,键盘弹起;当用户点击空白区时,键盘收起的效果。
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
focus | Boolean | false | 否 | 获取焦点,调起键盘。开发者工具暂不支持自动获取焦点 |
bindblur | EventHandle | 否 | 输入框失去焦点时触发,event.detail = {value: value} |
那么智能小程序组件的开发同学在开发 Input 组件的时候,又做了什么呢?
让我们来深入了解一下 Input 组件的实现原理。
Input 组件底层对 focus/bindblur 的处理
由于百度智能小程序的 Input 组件是基于同层渲染来开发,我们首先需要了解什么是同层渲染技术。
而在讨论同层渲染前,我们又需要先了解一下什么是原生组件。
原生组件
原生组件是小程序当中的一类特殊的内置组件,这类组件有别于 WebView 渲染的内置组件,他们是交由原生客户端渲染的。
原生组件有哪些优点呢?
-
原生组件带来了更加流畅的原生化体验和更加丰富的控件功能。
-
提供 H5 组件无法实现的一些功能,例如 H5 Video 不支持视频格式优先、Canvas 不支持绘制本地图片、Input 无法调起客户端定制的身份证键盘等。
-
使用原生控件减少了 H5 组件利用 JS 与 Objective-C(端)交互流程,降低了通信开销。
但原生组件也存在限制:
原生组件的层级是最高的。页面中的其他 H5 组件无论设置 z-index 为多少,都无法覆盖原生组件,后插入的原生组件可以覆盖之前的原生组件。造成的影响有:
-
无法支持在原生控件上覆盖自定义 HTML 元素。
-
所有的 H5 弹出元素都会被原生控件遮挡,如 Alert 、Toast 等。
如何才能享用到原生组件的优点,同时又可以避开这些限制呢?同层渲染技术应运而生。
同层渲染与原生组件的关系
同层渲染是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上,此时原生组件此时已被直接挂载到 WebView 节点上,可以像使用非原生组件一样去使用同层渲染的原生组件。
focus处理
我们在上文已经理解了同层渲染的概念,Input 组件就是通过同层渲染技术实现的,但是在 IOS 和 Android 上的实现方式有一些差异。
-
Android 的 Input 组件是一个纯 H5 组件,由前端和内核统一处理。NA 端的能力实际上是通过API来与 NA端进行通信,之后由客户端去处理,例如:调起自定义键盘功能。
-
IOS 的 Input 组件全流程是一个 NA 组件,在未获取焦点时,NA 组件是 DOM 树中的一个节点,和其他前端组件节点的区别是该节点是 NA 组件。在获得焦点的时候,该 NA 组件的视图树关系发生了变化,不再继承于 DOM 树,而是客户端 Webview 组件的一个子节点;再次失去焦点的时候,会再次将这个 NA 组件放回 DOM 树当中。下图以 IOS 的处理为例:
- 首先 Input 组件会接收到开发者传来的 focus 值并保存在 focus 变量中。
- 之后在用户点击时,将focus 变量置为 true。
- 其次调 Input insert 端能力,与端通信插入 input 标签,组件底层触发 bindFocus 方法,失去焦点后,触发 bindBlur 方法。
- 最后底层会将 focus 的值设为客户端返回值。在触发 blur 方法时,会销毁 Input 原生组件。
需要注意的是,在触发 bindConfirm 时,会触发两个事件:confirm 和 blur。IOS 端和 Android 端执行这两个事件的顺序有所差别,IOS 会先触发 confirm 再触发 blur; Android 端会先触发 blur 再触发 confirm。
Tips
这里提供一些使用 Input 组件的 tips,帮助你避开一些体验问题。
1. 避免快速切换 focus 的状态。
如下图的代码段,会导致键盘双次弹起,造成体验问题。
// badcase data: { focus: true } searchFocus(e) { this.setData({ focus: false }, () => { this.setData({ focus: true }); }); } // goodcase data: { focus: true } searchFocus(e) { this.setData({ focus: true }); }
2. 不要滥用 blur 等变量。
客户端会自动响应键盘的基本操作,所以开发者无需在 bindBlur 事件中去手动维护 blur 的值。
// badcase data: { blur: false } searchBlur(e) { // 没有与blur有关逻辑下,更改blur状态 this.setData({ blur: true }); }
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
如何利用OCR进行营业执照图片识别?
使用营业执照识别技术,实现对企业信息的结构化识别和录入,可应用于电商、零售、O2O等行业的商户入驻审查场景,实现商户信息的自动化审查和录入,有效提高客户体验,并大幅度提升服务标准和运营效率首先,激活使用权限,点此链接然后,进行在线调试看是否成功,如下图:返回数据如下: { "code": 1000, "name": "西安网极网络科技有限公司", "credit": "91610138397119703K", "ifCreditValid": true, "expirationDate": "2014年05月30日至长期", "establishDate": "2014年05月30日", "address": "陕西省西安市国家民用航天产业基地神舟四路239号2栋5层501-A04", "companyType": "有限责任公司(自然人投资或控股)", "capital": "壹佰万元人民币" "businessScope": "软件设计与开发;企业信息化服务;网络工程设计施工;网站设计与开发;计算机软硬件销售;计算机技术开发、技术服务;商标、版权、著作权、专利的代理及转让;广告的设...
- 下一篇
数据源管理 | OLAP查询引擎,ClickHouse集群化管理
本文源码:GitHub·点这里 || GitEE·点这里 一、列式库简介 ClickHouse是俄罗斯的Yandex公司于2016年开源的列式存储数据库(DBMS),主要用于OLAP在线分析处理查询,能够使用SQL查询实时生成分析数据报告。 列式存储 行式存储和列式存储,数据在磁盘上的组织结构有着根本不同,数据分析计算时,行式存储需要遍历整表,列式存储只需要遍历单个列,所以列式库更适合做大宽表,用来做数据分析计算。 絮叨一句:注意这里比较的场景,是数据分析计算的场景。 二、集群配置 1、基础环境 ClickHouse单服务默认已经安装完毕 Linux下安装ClickHouse单机服务 SpringBoot整合ClickHouse列式数据库 2、取消文件限制 vim /etc/security/limits.conf vim /etc/security/limits.d/90-nproc.conf 文件末尾追加 * soft nofile 65536 * hard nofile 65536 * soft nproc 131072 * hard nproc 131072 3、取消SELIN...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Mario游戏-低调大师作品
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,CentOS7官方镜像安装Oracle11G