鸿蒙应用开发之搜索框2

哈喽，各位我又回来了，好久没更新了，在半年前发布了原创的《鸿蒙应用开发之搜索框》，今天我来补一个它的续集，嘿嘿~

回顾

在上一篇推文中，我们详细的介绍了Search组件（搜索框），官方提供的属性以及简单的使用方法，如果想详细了解一下上一篇推文大家可以点击下方链接。

鸿蒙应用开发之搜索框（是刘小猿呀）https://blog.csdn.net/weixin_57422520/article/details/124217082?spm=1001.2014.3001.5501

模拟练习

本文为《鸿蒙应用开发之搜索框》的续篇，即将上一篇推文中介绍到的方法，运用到实际开发场景中。实现软件的搜索功能，这里用到Search组件以及Web组件。

Web组件介绍

所需权限

在使用web组件前需配置网络权限，在config.json文件中找到reqPermissions添加ohos.permission.

INTERNET权限，代码如下：

{  "app": {    ...  },  "deviceConfig": {    ...  },  "module": {    ...,    "reqPermissions": [      { "reason": "", "name": "ohos.permission.INTERNET"      }    ]}

注意事项

该组件默认会在界面的最顶层且布满整个界面，也就是该界面其他组件都会被Web组件遮住。且不支持子组件。

官方原文：

web组件不跟随转场动画。一个页面仅支持一个web组件，全屏显示，若页面中还有其他组件，会被web组件覆盖。

组件属性

界面开发

我们将界面构成分为两个界面 index和web界面，创建项目时会自带index目录，所以在page目录下新建web界面目录，项目结构如图所示。

index.hml

web.hml 

我们现将界面布置好，在预览器中运行，如下图所示。

 事件处理

通过绑定search组件中的@submit方法进行获取用户点击搜索按钮的点击事件，通过绑定参数来获取文本输入框中的内容，通过界面跳转时将参数和用户输入内容以参数的形式传入web.js中的url变量中，实现输入web组件的路径信息。代码如下。

注:本文中采用的“https://so.csdn.net/so/search?q=”链接，来源于CSDN搜索路径。

index.jsimport router from '@ohos.router';export default {    data: {    },    submit(e){ router.push({     uri:'pages/WebView/WebView',     params:{  url: 'https://so.csdn.net/so/search?q='+e.text,     } });    },}

web.jsexport default {    data: { title: 'World', url:''    },}

效果

注：本文章仅提供了部分组件和样式，展示效果为软件的整体效果，仅作为功能参考