OpenHarmony 趣味应用：藏头诗小程序

鸣涧

OpenHarmony 趣味应用：藏头诗小程序

今天我们将做一个OpenHarmony趣味应用——OpenHarmony藏头诗应用，是通过AI接口来做。通过调用指定的AI接口来做，接口会返回藏头诗或者继续完成诗的后面几句。

我要实现的功能主要有：

• 生成藏头诗
  
• 生成整首诗
  
  

你能学到的有：

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

用到的接口

接口：

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

（左右移动查看全部内容）

请求方式：

Get

apipost请求测试

接口：

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

（左右移动查看全部内容）

apipost请求测试：

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

首先预览一下应用

注意点：

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

1. <blockquote>"deviceConfig": {

复制代码

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

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

复制代码

完整代码：

1. import http from '@ohos.net.http';
   
2. import RequestMethod from '@ohos.net.http';
   
3. import ResponseCode from '@ohos.net.http';
   
4. 
   
5. @Entry
   
6. @Component
   
7. struct Index {
   
8.   @State tibetanContent: string = "坚果的小跟班";
   
9.   @State tibetanInput: string = "跟着坚果学鸿蒙";
   
10.   @State wholeContent: string = "";
    
11.   @State wholeInput: string = "跟着坚果学鸿蒙";
    
12.   private scroller: Scroller = new Scroller()
    
13. 
    
14.   onCancel() {
    
15.     console.info('关闭')
    
16.   }
    
17. 
    
18.   build() {
    
19.     Scroll(this.scroller) {
    
20.       Column({ space: 10 }) {
    
21.         Text($r("app.string.title"))
    
22.           .fontSize(26)
    
23.           .fontWeight(FontWeight.Bold)
    
24.           .align(Alignment.Start)
    
25.           .margin({ top: 20 })
    
26. 
    
27.         TextInput({ placeholder: '请输入要生成的内容', })
    
28.           .fontSize(36)
    
29.           .enterKeyType(EnterKeyType.Go)
    
30.           .onChange((value) => {
    
31.             this.tibetanInput = value;
    
32. 
    
33.           })
    
34.           .height(80)
    
35.           .margin({
    
36.             top: 40,
    
37.             left: 16,
    
38.             right: 16
    
39.           })
    
40. 
    
41.         Button("生成藏头诗").backgroundColor(Color.Pink)
    
42.           .onClick(() => {
    
43.                         this.TibetanRequest();
    
44. 
    
45.           })
    
46.         Text(this.tibetanContent).fontSize(26).fontColor(Color.Orange)
    
47.         TextInput({ placeholder: '请输入要生成的内容', })
    
48.           .fontSize(36)
    
49.           .enterKeyType(EnterKeyType.Go)
    
50.           .onChange((value) => {
    
51.             this.wholeInput = value;
    
52. 
    
53.           })
    
54.           .height(80)
    
55.           .margin({
    
56. 
    
57.             left: 16,
    
58.             right: 16
    
59.           })
    
60.         Button("生成整首诗").backgroundColor(Color.Green)
    
61.           .onClick(() => {
    
62.             this.wholePoemRequest();
    
63.           })
    
64.         Text(this.wholeContent).fontSize(24).fontColor(Color.Orange)
    
65.       }
    
66.       .padding(10)
    
67.     }
    
68.   }
    
69.   //藏头诗接口
    
70.   private TibetanRequest() {
    
71.     let httpRequest = http.createHttp();
    
72.     httpRequest.request(
    
73.       "https://py.myie9.com/hidepoem/" + this.tibetanInput,
    
74.       {
    
75.         method: RequestMethod.RequestMethod.GET,
    
76.         readTimeout: 15000,
    
77.         connectTimeout: 15000,
    
78.       },
    
79.       (error, data) => {
    
80.         if (error) {
    
81.           console.log("error code: " + error.code + ", msg: " + error.message)
    
82.         } else {
    
83.           let code = data.responseCode
    
84.           if (ResponseCode.ResponseCode.OK == code) {
    
85.             this.tibetanContent = data.result.toString()
    
86.             let header = JSON.stringify(data.header);
    
87.             console.log("result: " + this.tibetanContent);
    
88.             console.log("header: " + header);
    
89.           } else {
    
90.             console.log("response code: " + code);
    
91.           }
    
92.         }
    
93.       }
    
94.     );
    
95.   }
    
96. 
    
97.   //整首诗接口
    
98.   private wholePoemRequest() {
    
99.     let httpRequest = http.createHttp();
    
100.     httpRequest.request(
     
101.       "https://py.myie9.com/xuxietest/" + this.wholeInput,
     
102.       {
     
103.         method: RequestMethod.RequestMethod.GET,
     
104.         readTimeout: 15000,
     
105.         connectTimeout: 15000,
     
106.       },
     
107.       (error, data) => {
     
108.         if (error) {
     
109.           console.log("error code: " + error.code + ", msg: " + error.message)
     
110.         } else {
     
111.           let code = data.responseCode
     
112.           if (ResponseCode.ResponseCode.OK == code) {
     
113.             this.wholeContent = data.result.toString();
     
114.             let header = JSON.stringify(data.header);
     
115.             console.log("result: " + this.wholeContent);
     
116.             console.log("header: " + header);
     
117.           } else {
     
118.             console.log("response code: " + code);
     
119.           }
     
120.         }
     
121.       }
     
122.     );
     
123.   }
     
124. }

复制代码

发起网络请求：

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

引入http模块

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

创建一个httpRequest

let httpRequest = http.createHttp();

发起http请求

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

1、无 RequestOptions 参数请求

1. //藏头诗接口
   
2.      private TibetanRequest() {
   
3.        let httpRequest = http.createHttp();
   
4.        httpRequest.request(
   
5.          "https://py.myie9.com/hidepoem/" + this.tibetanInput,
   
6.          {
   
7.            method: RequestMethod.RequestMethod.GET,
   
8.            readTimeout: 15000,
   
9.            connectTimeout: 15000,
   
10.          },
    
11.          (error, data) => {
    
12.            if (error) {
    
13.              console.log("error code: " + error.code + ", msg: " + error.message)
    
14.            } else {
    
15.              let code = data.responseCode
    
16.              if (ResponseCode.ResponseCode.OK == code) {
    
17.                this.tibetanContent = data.result.toString();
    
18.                let header = JSON.stringify(data.header);
    
19.                console.log("result: " + this.tibetanContent);
    
20.                console.log("header: " + header);
    
21.              } else {
    
22.                console.log("response code: " + code);
    
23.              }
    
24.            }
    
25.          }
    
26.        );
    
27.      }

复制代码

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

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

修改应用描述信息

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

修改string.json内容如下：

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

复制代码

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