鸿蒙应用开发之搜索框2

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

回顾

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

鸿蒙应用开发之搜索框(是刘小猿呀)icon-default.png?t=M85Bhttps://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:''
    },

}

效果

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

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是刘小猿呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值