HarmonyOS学习(十)——网络编程

1、通过HTTP请求网络

官方API文档地址：HTTP数据请求-Network Kit数据传输能力-Network Kit（网络服务）-网络-系统 - 华为HarmonyOS开发者 (huawei.com)

接口地址：

https://route.showapi.com/109-34?appKey=B759f4a503eC4AB8BeA40f37C1AbF4E4

private httpReq(){
  //创建http请求
  let httpRequest = http.createHttp();
  //请求地址
  let requestUrl = "https://route.showapi.com/109-34?appKey=B759f4a503eC4AB8BeA40f37C1AbF4E4";
  //请求参数
  let options = {
    method:http.RequestMethod.GET,
    connectTimeout:6000,
    readTimeout:6000,
    header:{
      'content-Type':'application/json'
    }
  };
  let promise = httpRequest.request(
    requestUrl,
    options
  );
  //处理请求响应结果
  promise.then((data) => {
    if(data.responseCode == http.ResponseCode.OK){
      console.error('result:'+data.result);
      console.error('code:'+data.responseCode)
      this.message = JSON.stringify(data.result);
    }
  }).catch((err) => {
    console.error('error:'+JSON.stringify(err));
  })

}

• 导入http模块。

import http from '@ohos.net.http';

• 创建httpRequest对象，需要注意的是，每个httpRequest对象对应一个HTTP请求任务，不可重复。

//创建http请求
let httpRequest = http.createHttp();

• 通过httpRequest对象发起HTTP请求。

//请求参数
let options = {
  method:http.RequestMethod.GET,
  connectTimeout:6000,
  readTimeout:6000,
  header:{
    'content-Type':'application/json'
  }
};
let promise = httpRequest.request(
  requestUrl,
  options
);

• 处理HTTP请求返回的结果，并赋值给message变量。

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

• 界面重新渲染显示新的message变量值。

2、Web组件

官方文档地址：Web组件的生命周期-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

2.1、加载本地网页

将html存放在resource/rawfile/test.html

controller: webview.WebviewController = new webview.WebviewController();

build(){
  Column(){
    Web({
      src:$rawfile('test.html'),
      controller:this.controller
    })
  }
  .height('100%')
}

运行结果：

2.2、加载在线网页

controller: webview.WebviewController = new webview.WebviewController();

build(){
  Column(){
    Web({
      src:"https://www.baidu.com",
      controller:this.controller
    })
  }
  .height('100%')
}

需要再module.json5中加入权限说明：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "reason": "$string:Use_net_reason",
    "usedScene": {
      "when": "inuse"
    }
  }
]

运行效果：

2.3、网页缩放

zoomAccess(zoomAccess: boolean) 设置是否支持手势进行缩放

Web({
  src:"https://www.baidu.com",
  controller:this.controller
})
  .zoomAccess(true)  //是否支持手势进行缩放

使用zoom(factor: number) 设置缩放大小

struct  webdemo1{

  //网页控制器
  controller: webview.WebviewController = new webview.WebviewController();
  @State zoomIndex:number = 1.5; //缩放倍数

  build(){
    Column(){
      Button('设置缩放')
        .type(ButtonType.Capsule)
        .onClick(() => {
          this.zoomIndex += 1.0;
          this.controller.zoom(this.zoomIndex)
        })
      Web({
        src:"https://www.baidu.com",
        controller:this.controller
      })
        .zoomAccess(true)  //是否支持手势进行缩放
    }
    .height('100%')
  }

运行效果

2.4、文本缩放

Web({
  src:$rawfile('test.html'),
  controller:this.controller,
})
  .textZoomRatio(500) // 文本缩放
  .zoomAccess(true)  //是否支持手势进行缩放

2.5、web组件事件以及状态说明

2.6、处理页面导航

使用浏览器浏览网页时，可以执行返回，前进，刷新等操作，web组件通过控制器也可以实现

this.controller.forward(); // 页面前进
this.controller.backward(); // 页面后退
this.controller.refresh(); //刷新页面
this.controller.clearHistory();// 清除历史