devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS开发探索：自定义键盘-webview_原生h5实现自定义键盘

作者：在线问答5 | 2024-07-27 00:42:27

赞

踩

原生h5实现自定义键盘

场景描述

在特殊的H5场景下需要应用拉起自定义键盘进行输入。

场景一：使用jsBridge拉起自定义弹窗写自定义键盘，再通过jsBridge传参实现输入。

场景二：使用web的同层渲染将原生textInput组件渲染到页面上。

方案描述

通过注册一个js代理对象被web的registerJavaScriptProxy方法调用拉起CustomDialog，在CustomDialog上放置一个customkeyboard

场景一：通过jsBridge拉起自定义弹窗，在自定义弹窗上放置自定义键盘，例如需要输入密码时的安全键盘。

效果图

cke_23701.gif

方案

通过注册一个js代理对象被web的registJavaScriptProxy方法调用拉起CustomDialog，在CustomDialog上放置一个自定义键盘组件，通过在H5上input标签的readonly属性和注册的js方法changeNumbers实现在原生端输入数字传到H5上，他们之间通过@Link装饰器绑定的变量进行传值，所以点击删除输入的内容也是可以在H5上实现的。

核心代码

  1. 通过javaScriptProxy方法拉起自定义弹窗，在H5上的input标签绑定一个onclick事件，当点击输入框后会调用从原生注册过来的js代理方法openWindow。

    1. <input type="text" name="number_info" readonly onclick="openWindow()" value="" style="width: 500px;height: 100px;font-size:50px;border:1px solid # f00;">
    2.  
    3. <script>
    4.  
    5. function openWindow() {
    6.  
    7. let value = document.getElementsByName("number_info")[0].value;
    8.  
    9. window.myJsb.openDialog(value)
    10.  
    11. }
    12.  
    13. </script>

  2. 当H5上openWindow方法被调用后会通过jsBridge调用以下两个js代理方法打开自定义弹窗。

    1. jsbObject: JsbObject = {
    2.  
    3. openDialog: (value: string) => {
    4.  
    5. this.showDialog(this, value);
    6.  
    7. }
    8.  
    9. }
    10.  
    11. showDialog(context: object, value: string) {
    12.  
    13. // 把自定义弹窗调出来
    14.  
    15. this.currentData = value;
    16.  
    17. this.dialogController.open()
    18.  
    19. }
    20.  
    21.  
    22.  
    23. Web({ src: "resource://rawfile/web_test.html", controller: this.webviewController })
    24.  
    25. .javaScriptAccess(true)
    26.  
    27. .javaScriptProxy({
    28.  
    29. name: "myJsb",
    30.  
    31. object: this.jsbObject,
    32.  
    33. methodList: ["openDialog"],
    34.  
    35. controller: this.webviewController
    36.  
    37. })

  3. 将自定义键盘放置在自定义弹窗上。

    1. @CustomDialog
    2.  
    3. struct CustomDialogExample {
    4.  
    5. @Link currentData: string
    6.  
    7. dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
    8.  
    9. builder: CustomDialogExample({ currentData: $currentData }),
    10.  
    11. alignment: DialogAlignment.Bottom,
    12.  
    13. offset: { dx: 0, dy: -25 }
    14.  
    15. })
    16.  
    17. controller?: CustomDialogController
    18.  
    19.  
    20.  
    21. build() {
    22.  
    23. Column() {
    24.  
    25. Button('x').onClick(() => {
    26.  
    27. // 关闭自定义键盘
    28.  
    29. if (this.controller != undefined) {
    30.  
    31. this.controller.close()
    32.  
    33. }
    34.  
    35. })
    36.  
    37. Grid() {
    38.  
    39. ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '删除'], (item: number | string) => {
    40.  
    41. GridItem() {
    42.  
    43. Button(item + "")
    44.  
    45. .width(110).onClick(() => {
    46.  
    47. if (item == '删除') {
    48.  
    49. if (this.currentData.length > 0) {
    50.  
    51. this.currentData = this.currentData.substring(0, this.currentData.length - 1);
    52.  
    53. }
    54.  
    55. } else {
    56.  
    57. this.currentData += item
    58.  
    59. }
    60.  
    61. })
    62.  
    63. }
    64.  
    65. })
    66.  
    67. }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    68.  
    69. }.backgroundColor(Color.Gray)
    70.  
    71. }
    72.  
    73. }

  4. 在自定义键盘上输入内容的时候会调用onChangeInputValue方法，通过里面的runJavaScript调用H5上的js方法changeNumber传值到H5的输入框中。

    1. onChangeInputValue(stateName: string){
    2.  
    3. console.log('this.currentData:' + this.currentData)
    4.  
    5. this.webviewController.runJavaScript('changeNumber("'+ this.currentData +'")')
    6.  
    7. .then((result) => {
    8.  
    9. console.log('result: ' + result);
    10.  
    11. })
    12.  
    13. }
    14.  
    15.  
    16. <<input type="text" name="number_info" readonly onclick="openWindow()" value="" style="width: 500px;height: 100px;font-size:50px;border:1px solid # f00;" />
    17.  
    18. <script>
    19.  
    20. function changeNumber(value){
    21.  
    22. document.getElementsByName("number_info")[0].value = value;
    23.  
    24. }
    25.  
    26. </script>

场景二：通过同层渲染渲染一个原生的自定义键盘

效果图

cke_28481.gif

方案

整体实现效果为：通过web的同层渲染功能实现将原生TextInput组件渲染到H5需要使用自定义键盘的页面中，这样就可以实现在H5拉起自定义键盘，并且使用它的全部功能。

核心代码

  1. 创建一个自定义键盘并绑定到原生textInput组件上。

    1. @Component
    2.  
    3. struct ButtonComponent {
    4.  
    5. controller1: TextInputController = new TextInputController()
    6.  
    7. @State inputValue: string = ""
    8.  
    9.  
    10.  
    11. // 自定义键盘组件
    12.  
    13. @Builder
    14.  
    15. CustomKeyboardBuilder() {
    16.  
    17. Column() {
    18.  
    19. Button('x').onClick(() => {
    20.  
    21. // 关闭自定义键盘
    22.  
    23. this.controller1.stopEditing()
    24.  
    25. })
    26.  
    27. Grid() {
    28.  
    29. ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '# '], (item: number | string) => {
    30.  
    31. GridItem() {
    32.  
    33. Button(item + "")
    34.  
    35. .width(110).onClick(() => {
    36.  
    37. this.inputValue += item
    38.  
    39. })
    40.  
    41. }
    42.  
    43. })
    44.  
    45. }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    46.  
    47. }.backgroundColor(Color.Pink)
    48.  
    49. }
    50.  
    51.  
    52.  
    53. @ObjectLink params: Params
    54.  
    55. @State bkColor: Color = Color.Red
    56.  
    57. @State outSetValueTwo: number = 40
    58.  
    59. @State outSetValueOne: number = 40
    60.  
    61. @State tipsValue: number = 40
    62.  
    63. controller: web_webview.WebviewController = new web_webview.WebviewController();
    64.  
    65.  
    66.  
    67. build() {
    68.  
    69. Column() {
    70.  
    71. TextInput({ controller: this.controller1, text: this.inputValue })// 绑定自定义键盘
    72.  
    73. .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
    74.  
    75. }
    76.  
    77. .width(this.params.width)
    78.  
    79. .height(this.params.height)
    80.  
    81. }
    82.  
    83. }

  2. 将原生textInput组件通过web同层渲染功能渲染到H5上的embed标签上。

    1. @Entry
    2.  
    3. @Component
    4.  
    5. struct WebIndex {
    6.  
    7. browserTabController: WebviewController = new webview.WebviewController()
    8.  
    9.  
    10.  
    11. build() {
    12.  
    13. Column() {
    14.  
    15. Web({ src: $rawfile("test.html"), controller: this.browserTabController })// 配置同层渲染开关开启。
    16.  
    17. .enableNativeEmbedMode(true)// 获取embed标签的生命周期变化数据。
    18.  
    19. .onNativeEmbedLifecycleChange((embed) => {
    20.  
    21. console.log("NativeEmbed surfaceId" + embed.surfaceId);
    22.  
    23. // 获取web侧embed元素的id。
    24.  
    25. const componentId = embed.info?.id?.toString() as string
    26.  
    27. if (embed.status == NativeEmbedStatus.CREATE) {
    28.  
    29. console.log("NativeEmbed create" + JSON.stringify(embed.info))
    30.  
    31. // 创建节点控制器，设置参数并rebuild。
    32.  
    33. let nodeController = new MyNodeController()
    34.  
    35. nodeController.setRenderOption({
    36.  
    37. surfaceId: embed.surfaceId as string,
    38.  
    39. type: embed.info?.type as string,
    40.  
    41. renderType: NodeRenderType.RENDER_TYPE_TEXTURE,
    42.  
    43. embedId: embed.embedId as string,
    44.  
    45. width: px2vp(embed.info?.width),
    46.  
    47. height: px2vp(embed.info?.height)
    48.  
    49. })
    50.  
    51. nodeController.setDestroy(false);
    52.  
    53. // 根据web传入的embed的id属性作为key，将nodeController存入map。
    54.  
    55. this.nodeControllerMap.set(componentId, nodeController)
    56.  
    57. // 将web传入的embed的id属性存入@State状态数组变量中，用于动态创建nodeContainer节点容器，需要将push动作放在set之后。
    58.  
    59. this.componentIdArr.push(componentId)
    60.  
    61. } else if (embed.status == NativeEmbedStatus.UPDATE) {
    62.  
    63. let nodeController = this.nodeControllerMap.get(componentId)
    64.  
    65. nodeController?.updateNode({
    66.  
    67. textOne: 'update',
    68.  
    69. width: px2vp(embed.info?.width),
    70.  
    71. height: px2vp(embed.info?.height)
    72.  
    73. } as ESObject)
    74.  
    75. } else {
    76.  
    77. let nodeController = this.nodeControllerMap.get(componentId);
    78.  
    79. nodeController?.setDestroy(true)
    80.  
    81. this.nodeControllerMap.clear();
    82.  
    83. this.componentIdArr.length = 0;
    84.  
    85. }
    86.  
    87. })// 获取同层渲染组件触摸事件信息。
    88.  
    89. .onNativeEmbedGestureEvent((touch) => {
    90.  
    91. console.log("NativeEmbed onNativeEmbedGestureEvent" + JSON.stringify(touch.touchEvent));
    92.  
    93. this.componentIdArr.forEach((componentId: string) => {
    94.  
    95. let nodeController = this.nodeControllerMap.get(componentId)
    96.  
    97. if (nodeController?.getEmbedId() === touch.embedId) {
    98.  
    99. let ret = nodeController?.postEvent(touch.touchEvent)
    100.  
    101. if (ret) {
    102.  
    103. console.log("onNativeEmbedGestureEvent success " + componentId)
    104.  
    105. } else {
    106.  
    107. console.log("onNativeEmbedGestureEvent fail " + componentId)
    108.  
    109. }
    110.  
    111. }
    112.  
    113. })
    114.  
    115. })
    116.  
    117. }
    118.  
    119. }
    120.  
    121. }
    122.  
    123.  
    124. <html>
    125.  
    126. <head>
    127.  
    128. <title>同层渲染测试html</title>
    129.  
    130. <meta name="viewport">
    131.  
    132. </head>
    133.  
    134. <body>
    135.  
    136. <div>
    137.  
    138. <div id="bodyId">
    139.  
    140. <embed id="nativeTextInput" type="native/TextInput" width="100%" height="100%" src="test?params1=xxx?"
    141.  
    142. style="background-color:pink"/>
    143.  
    144. </div>
    145.  
    146. </div>
    147.  
    148. </body>
    149.  
    150. </html>


最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料（安全链接，放心点击）

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

一、鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程

​

三、《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……​

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

​

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

​

四、大厂面试必问面试题

​

五、鸿蒙南向开发技术

​

六、鸿蒙APP开发必备

​

七、鸿蒙生态应用开发白皮书V2.0PDF

​


完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

                        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/887907
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号