哈喽,各位我又回来了,好久没更新了,在半年前发布了原创的《鸿蒙应用开发之搜索框》,今天我来补一个它的续集,嘿嘿~
回顾
在上一篇推文中,我们详细的介绍了Search组件(搜索框),官方提供的属性以及简单的使用方法,如果想详细了解一下上一篇推文大家可以点击下方链接。
模拟练习
本文为《鸿蒙应用开发之搜索框》的续篇,即将上一篇推文中介绍到的方法,运用到实际开发场景中。实现软件的搜索功能,这里用到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:''
},
}
效果
注:本文章仅提供了部分组件和样式,展示效果为软件的整体效果,仅作为功能参考