博客

在模块目录的module.json5模块配置文件中加入网络权限，如下图所示：

我这里模块名是entry，所以module.json5文件在entry/src/main/etc目录中，代码原文：

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

需要在page.ets中引入http，如下：

import { http } from '@kit.NetworkKit';

或者：

import http from ‘@ohos.net.http’;

我的成功示例：

import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit'

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

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          console.log('111');
          this.message = 'Welcome';
          let httpRequest = http.createHttp();
          let url = "https://nb.oihw.cn/addons/nianbao/api.index"
          let extraData = JSON.stringify({ id: 1 }); // 将extraData转换为JSON字符串
          httpRequest.request(url, {
            method: http.RequestMethod.POST,
            extraData: extraData,
            header: {
              'Content-Type': 'application/json'
            }
          }, (err: BusinessError, data: http.HttpResponse) => {
            if (!err) {
              console.log(JSON.parse(JSON.stringify(data.result)));
              this.data = JSON.parse(JSON.stringify(data.result))
            } else {
              console.error('error:' + JSON.stringify(err));
            }
          })
        })
      Button('下一页')
        .onClick(() => {
          this.message = 'ArkUI'
        })
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .width('100')
        .height(50)
        .margin({top: 120})
    }
    .height('100%')
    .width('100%')
  }
}

UIAbility从字面意思可以得知是用户界面能力，UI用户界面，Ability能力。

UIAbility组件是系统调度的基本单元，用于绘制窗口，一个应用可以包括一个或者多个UIAbility组件。我是这么理解的，UIAbility同uniapp开发有着异曲同工之处，类似于我分了四个tabbar页面，如商城可以是首页、分类、订单和我的，这四个tabbar分别对应了四个目录，每个目录名称相当于是一个UIAbility组件，而目录中又可以有多个vue文件，而UIAbility组件也可以对应多个page页面。

每个UIAbility组件实例都会在设备最近任务列表中显示一个对应的任务。

对于一个开发者而言，可以根据具体的场景选择单个还是多个UIAbility，划分规则如下：

1、假如我们希望在任务列表中看到一个任务，那么我们就可以采用一个UIAbility+多个页面的形式，这样可以避免加载不必要的资源。

2、假如我们希望在任务列表中看到多个任务或者开启多个窗口，那么我们就要采用多个UIAbility实现不同的功能；例如微信的消息通知任务和音视频任务就归属于两个UIAbility，这样既可以方便的切换任务窗口，又可以实现应用的两个任务窗在同一个屏幕上分屏显示。

在module.json5的abilities标签中定义UIAbility的名称、入口、标签等，如下代码所示：

{
  "module": {
    // ...
    "abilities": [
      {
        "name": "EntryAbility", // UIAbility组件的名称
        "srcEntry": "./ets/entryability/EntryAbility.ets", // UIAbility组件的代码路径
        "description": "$string:EntryAbility_desc", // UIAbility组件的描述信息
        "icon": "$media:icon", // UIAbility组件的图标
        "label": "$string:EntryAbility_label", // UIAbility组件的标签
        "startWindowIcon": "$media:icon", // UIAbility组件启动页面图标资源文件的索引
        "startWindowBackground": "$color:start_window_background", // UIAbility组件启动页面背景颜色资源文件的索引
        // ...
      }
    ]
  }
}

首先进入DevEco Studio工具，点击左上角菜单“File”，然后找到Settings，进入Settings中，选择plugins，进入plugins后在installed中搜索chinese然后点击右下角apply，再点击ok，即可完成。