『江鸟中原』鸿蒙——实现简单浏览器

前言

随着科技的不断发展，互联网已经成为人们生活中不可或缺的一部分。浏览器作为互联网信息的入口，扮演着至关重要的角色。在华为的鸿蒙操作系统中，一个简单浏览器和纯净简洁的页面对于提供良好的用户体验具有重要意义。本文将概述如何在鸿蒙系统下实现一个简单浏览器的开发。

正文

创建工程

打开DevEco Studio，创建一个新的project，如下图所示

加载图片资源

将自己的logo图片和搜索按钮图片放入entry/src/main/resources/base/media目录下

设计UI界面

代码如下：

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = ''

  build() {
    Column() {
      Row() {
        Image($r("app.media.logo"))
          .width(120)
      }

      Row() {
        Stack() {
          TextInput({ placeholder: "请输入搜索内容" })
            .margin(20)
            .width("85%")
            .height(50)
            .enterKeyType(EnterKeyType.Search)
            .onChange((value) => {
              this.message = value
            })

          Button() {
            Image($r("app.media.search")).width(40)
          }
          .width(100)
          .type(ButtonType.Circle)
          .backgroundColor("")
          .margin({ right: 20 })
          .onClick(() => {
            router.pushUrl({
              url: 'pages/search',
              params: {
                src: this.message,
              }
            },router.RouterMode.Single)
          })
        }
        .alignContent(Alignment.End)
      }
      .width('100%')
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
  }
}

代码解析：

1. Column()：一个布局的容器，它将包含的所有子元素垂直排列（即列方向）。
2. Row()：另一个布局的容器，与Column()相反，它将包含的所有子元素水平排列（即行方向）。
3. Image($r("app.media.logo"))：这是一个图片组件，它从应用的媒体资源中获取一个名为"logo"的图像，并将其显示出来。此外，使用.width(120)设置了图片的宽度为120像素。
4. 下一个Row()内的Stack()：这是一个堆栈布局的容器，它会将包含的所有子元素垂直堆叠起来。
5. TextInput({ placeholder: "请输入搜索内容" })：这是一个文本输入框组件，placeholder设置为"请输入搜索内容"。设置了它的宽度为"85%"、高度为50、输入键盘类型为搜索、以及一个onChange事件处理函数，该函数将在用户输入时被调用，并将输入的值保存在this.message中。
6. Button()：这是一个按钮组件。设置了它的宽度为100、类型为圆形、背景颜色为空、右侧边距为20像素。你设置了一个onClick事件处理函数，该函数将在用户点击按钮时被调用。在这个函数中，你使用router.pushUrl()方法导航到一个名为"search"的页面，并将this.message作为参数传递给search页面。
7. .alignContent(Alignment.End)：这是对Stack()内的子元素的对齐设置，设置为底部对齐。
8. .width('100%')：这是对Row()的宽度设置，将其设置为占据全部屏幕宽度。
9. .justifyContent(FlexAlign.Center)：这是对Column()的布局设置，将所有子元素水平居中。
10. .height('100%')：这是对整个组件的高度设置，将其设置为占据全部屏幕高度。

总的来说，这段代码创建了一个有两行的表单，第一行显示应用logo，第二行包含一个搜索框和一个搜索按钮。用户可以在搜索框中输入文本，然后点击搜索按钮搜索内容。搜索结果将会在新的页面中展示。

加入search.ets文件

在src/main/ets/pages中新建一个ets文件，命名为search，切记与上述代码中要跳转的命名相同，并且要在src/main/resources/base/profile中的main_pages.json中的src下添加如下字段

代码如下：

import router from '@ohos.router';

@Entry
@Component
struct WebComponent {
  @State message: string = (router.getParams() as Record<string, string>)['src'];
  search: string = "https://m.baidu.com/from=1027661c/s?word=" + this.message;

  controller: WebController = new WebController();

  build() {
    List() {
      ListItem() {
        Web({ src: this.search, controller: this.controller })
          .pinchSmooth(true)
      }
    }
  }
}

代码解析：

1.Web组件：Web组件的使用非常简单，只需要在Page目录下的ArkTS文件中创建一个Web组件，传入两个参数就可以了。其中src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于实现对Web组件的控制。

2.定义message变量从Index.ets中获取传递过来的信息

获取网络权限

访问在线网页时需要在entry/src/main/module.json5文件中申明网络访问权限：ohos.permission.INTERNET。

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

运行效果

结语

在鸿蒙操作系统上开发浏览器是一项具有挑战性的任务，本人也只是学到了鸿蒙ArkTs的一点皮毛，目前只能做到这些。文章所述仅代表个人理解，如有不足恳请读者不吝赐教。