鸿蒙应用开发之搜索框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组件覆盖。

组件属性

名称	参数类型	默认值	必填	描述
src	string	-	否	设置需要显示网页的地址，网址的域名必须为https协议且经过ICP备案。
id	string	-	否	组件的唯一标识。

界面开发

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

index.hml

<div class="container">
    <div>
        <search hint="请输入搜索内容" @submit="submit" searchbutton="搜索"></search>
    </div>
</div>

web.hml 

<div class="container">
    <web src="{{url}}"></web>
</div>

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

 事件处理

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

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

index.js

import 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.js

export default {
    data: {
        title: 'World',
        url:''
    },

}

效果

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