#DAYU200体验官#OpenHarmony藏头诗应用原创精华

早起睡不够

发布于 2022-7-11 11:18

浏览

2收藏

已被收录在 2 个专栏，

我要实现的功能主要有：

生成藏头诗，
生成整首诗，

你能学到的有：

网络请求
可滚动组件
状态管理
常用组件
常用属性
修改应用名称和图标
在Config.json添加权限等

用到的接口：

接口：

https://py.myie9.com/hidepoem/坚果
1.

请求方式：

Get

apipost请求测试

#DAYU200体验官#OpenHarmony藏头诗应用-鸿蒙开发者社区

接口：

https://py.myie9.com/xuxietest/汗滴禾下土
1.

apipost请求测试：

#DAYU200体验官#OpenHarmony藏头诗应用-鸿蒙开发者社区

如何创建应用在这里不做解释。

首先预览一下应用

#DAYU200体验官#OpenHarmony藏头诗应用-鸿蒙开发者社区

注意点：

允许https需要添加下面的配置

  "deviceConfig": {
    "default": {
      "network": {
        "cleartextTraffic": true
      }
    }
  },
1.
2.
3.
4.
5.
6.
7.

使用网络请求在config.json添加权限：

 "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
1.
2.
3.
4.
5.

完整代码：

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


@Entry
@Component
struct Index {
  @State tibetanContent: string = "坚果的小跟班";
  @State tibetanInput: string = "跟着坚果的小跟班学鸿蒙";
  @State wholeContent: string = "";
  @State wholeInput: string = "跟着坚果的小跟班学鸿蒙";
  private scroller: Scroller = new Scroller()



  onCancel() {
    console.info('关闭')
  }



  build() {
    Scroll(this.scroller) {
      Column({ space: 10 }) {
        Text($r("app.string.title"))
          .fontSize(26)
          .fontWeight(FontWeight.Bold)
          .align(Alignment.Start)
          .margin({ top: 20 })

        TextInput({ placeholder: '请输入要生成的内容', })
          .fontSize(36)
          .enterKeyType(EnterKeyType.Go)
          .onChange((value) => {
            this.tibetanInput = value;

          })
          .height(80)
          .margin({
            top: 40,
            left: 16,
            right: 16
          })

        Button("生成藏头诗").backgroundColor(Color.Pink)
          .onClick(() => {
                        this.TibetanRequest();

          })
        Text(this.tibetanContent).fontSize(26).fontColor(Color.Orange)
        TextInput({ placeholder: '请输入要生成的内容', })
          .fontSize(36)
          .enterKeyType(EnterKeyType.Go)
          .onChange((value) => {
            this.wholeInput = value;

          })
          .height(80)
          .margin({

            left: 16,
            right: 16
          })
        Button("生成整首诗").backgroundColor(Color.Green)
          .onClick(() => {
            this.wholePoemRequest();
          })
        Text(this.wholeContent).fontSize(24).fontColor(Color.Orange)
      }
      .padding(10)
    }

  }
  //藏头诗接口
  private TibetanRequest() {
    let httpRequest = http.createHttp();
    httpRequest.request(
      "https://py.myie9.com/hidepoem/" + this.tibetanInput,
      {
        method: RequestMethod.RequestMethod.GET,
        readTimeout: 15000,
        connectTimeout: 15000,
      },
      (error, data) => {
        if (error) {
          console.log("error code: " + error.code + ", msg: " + error.message)
        } else {
          let code = data.responseCode
          if (ResponseCode.ResponseCode.OK == code) {
            this.tibetanContent = data.result.toString();

            let header = JSON.stringify(data.header);
            console.log("result: " + this.tibetanContent);
            console.log("header: " + header);
          } else {
            console.log("response code: " + code);
          }

        }
      }

    );
  }

  //整首诗接口
  private wholePoemRequest() {
    let httpRequest = http.createHttp();
    httpRequest.request(
      "https://py.myie9.com/xuxietest/" + this.wholeInput,
      {
        method: RequestMethod.RequestMethod.GET,
        readTimeout: 15000,
        connectTimeout: 15000,
      },
      (error, data) => {
        if (error) {
          console.log("error code: " + error.code + ", msg: " + error.message)
        } else {
          let code = data.responseCode
          if (ResponseCode.ResponseCode.OK == code) {
            this.wholeContent = data.result.toString();
            let header = JSON.stringify(data.header);
            console.log("result: " + this.wholeContent);
            console.log("header: " + header);
          } else {
            console.log("response code: " + code);
          }
        }
      }
    );
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.

发起网络请求

使用 @ohos.net.http 模块发起网络请求分为以下步骤：

引入http模块

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

创建一个httpRequest

let httpRequest = http.createHttp();
1.

发起http请求

httpRequest 提供了两种 request() 方法进行网络请求，分别是无 RequestOptions 参数的请求和有 RequestOptions 参数的请求。分别介绍如下：

无 RequestOptions 参数请求

  //藏头诗接口
  private TibetanRequest() {
    let httpRequest = http.createHttp();
    httpRequest.request(
      "https://py.myie9.com/hidepoem/" + this.tibetanInput,
      {
        method: RequestMethod.RequestMethod.GET,
        readTimeout: 15000,
        connectTimeout: 15000,
      },
      (error, data) => {
        if (error) {
          console.log("error code: " + error.code + ", msg: " + error.message)
        } else {
          let code = data.responseCode
          if (ResponseCode.ResponseCode.OK == code) {
            this.tibetanContent = data.result.toString();

            let header = JSON.stringify(data.header);
            console.log("result: " + this.tibetanContent);
            console.log("header: " + header);
          } else {
            console.log("response code: " + code);
          }

        }
      }

    );
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

request() 方法默认采用 get 方式请求。

上述代码，重点是通过调用HTTP的AI接口，来获取生成接口返回的诗的内容，并显示在应用界面上。

修改应用描述信息

默认的应用描述信息，集中在config.json文件中。

![image-20220711111409744](…/…/…/…/Library/Application Support/typora-user-images/image-20220711111409744.png)

修改string.json内容如下：

   "srcLanguage": "ets",
        "srcPath": "MainAbility",
        "icon": "$media:icon", //应用图标
        "description": "$string:desc",
        "label": "$string:title", //应用名称
        "type": "page",
        "visible": true,
        "launchType": "standard"
1.
2.
3.
4.
5.
6.
7.
8.

这么有趣的应用就这样完成了，比起js开发方式，eTS是不是更为简单呢。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签