OpenHarmony 藏头诗应用

作者：坚果

2022 年 7 月 11 日
本文字数：3036 字
阅读完需：约 10 分钟

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

我要实现的功能主要有：

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

你能学到的有：

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

用到的接口：

接口：

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

复制代码

请求方式：

Get

apipost 请求测试

接口：

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

复制代码

apipost 请求测试：

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

首先预览一下应用

注意点：

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

  "deviceConfig": {    "default": {      "network": {        "cleartextTraffic": true      }    }  },

复制代码

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

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

复制代码

完整代码：

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

@Entry@Componentstruct 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);          }        }      }    );  }}

复制代码

发起网络请求

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

引入 http 模块

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

复制代码

创建一个 httpRequest

let httpRequest = http.createHttp();

复制代码

发起 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);             }              }         }          );     }

复制代码

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

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

修改应用描述信息

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

修改 string.json 内容如下：

   "srcLanguage": "ets",        "srcPath": "MainAbility",        "icon": "$media:icon", //应用图标        "description": "$string:desc",        "label": "$string:title", //应用名称        "type": "page",        "visible": true,        "launchType": "standard"

复制代码

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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/6e3adb758bb0ed85d27120827】。文章转载请联系作者。

坚果

关注

此间若无火炬，我便是唯一的光 2020.10.25 加入

公众号：“大前端之旅”，华为云享专家，InfoQ签约作者，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

发布

暂无评论

创作场景

OpenHarmony 藏头诗应用

我要实现的功能主要有：

你能学到的有：

用到的接口：

注意点：

完整代码：

发起网络请求

修改应用描述信息

坚果

评论