体验鸿蒙开发第2课-http and image

修改Index.ets:
// 导入http模块。
import http from '@ohos.net.http';
import router from '@ohos.router';
import image from '@ohos.multimedia.image'
@Entry
@Component
struct Index {
  @State message: string = '我是没头脑'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(38)
          .fontWeight(FontWeight.Bold)

        // 请求
        Button(('baidu'), { type: ButtonType.Capsule })
          .width(140)
          .fontSize(40)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 20, bottom: 20 })
          .onClick(() => {
            this.httpReq()
          })
        Image($r('app.media.logo'))
          .width(181)
          .height(181)
          .margin({ top: 20, bottom: 20 })
          .width(181)
          .height(181)
          .margin({ top: 20, bottom: 20 })
        Button() {
          Text("Open Page")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#ff9900')
        .width('80%')
        .height('5%')
        // 给按钮绑定点击事件
        .onClick(()=>{
          console.log("点击了按钮") // 跳转第二个页面
          router.pushUrl({url: 'pages/second' }).then(()=>{
            console.log("成功跳转了");
          })
        })

      }
      .width('100%')
    }
    .height('100%')
  }

  private httpReq() {
    // 创建httpRequest对象。
    let httpRequest = http.createHttp();

    let url = "https://www.baidu.com/";
    let promise = httpRequest.request(
      // 请求url地址
      url,
      {
        // 请求方式
        method: http.RequestMethod.GET,
        // 可选，默认为60s
        connectTimeout: 60000,
        // 可选，默认为60s
        readTimeout: 60000,
        // 开发者根据自身业务需要添加header字段
        header: {
          'Content-Type': 'application/json'
        }
      });

    // 处理响应结果。
    promise.then((data) => {
      if (data.responseCode === http.ResponseCode.OK) {
        console.info('Result:' + data.result);
        console.info('code:' + data.responseCode);
        this.message = JSON.stringify(data.result);
      }
    // }).catch((err) => {
    //   console.info('error:' + JSON.stringify(err));
    });
  }
}

second.ets:

// Second.ets
import router from '@ohos.router';
@Entry
@Component
struct Second {
  @State message: string = '你是不高兴'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#ff9900')
        .width('80%')
        .height('5%') // 绑定点击事件
        .onClick(()=>{
          // 返回上一页面
          router.back()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

------

C:\Users\rogabet\DevEcoStudioProjects\hwrogachat\entry\src\main\resources\base\media

放入logo.JPG 作为素材.

代码如上。

开发工具地址：

DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟

-----------------

C:\Users\rogabet\DevEcoStudioProjects\hwrogachat\AppScope

app.json5应用公共配置信息

{
  "app": {
    "bundleName": "com.example.hwrogachat",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name"
  }
}
----------------------

C:\Users\rogabet\DevEcoStudioProjects\hwrogachat\entry\src\main

module.json5当前模块配置信息

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported": false,
        "metadata": [
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ],
      }
    ]
  }
}

--------------------------

C:\Users\rogabet\DevEcoStudioProjects\hwrogachat\entry\src\main\resources\base\profile

main_pages.json页面配置

{
  "src": [
    "pages/Index",
    "pages/second"
  ]
}