谷动谷力

标题: OpenHarmony 趣味应用：藏头诗小程序 [打印本页]
作者: 鸣涧    时间: 2022-7-15 09:46
标题: OpenHarmony 趣味应用：藏头诗小程序
OpenHarmony 趣味应用：藏头诗小程序


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

我要实现的功能主要有：

你能学到的有：

用到的接口
接口：
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';

  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()

  14.   onCancel() {
  15.     console.info('关闭')
  16.   }

  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 })

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

  33.           })
  34.           .height(80)
  35.           .margin({
  36.             top: 40,
  37.             left: 16,
  38.             right: 16
  39.           })

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

  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;

  53.           })
  54.           .height(80)
  55.           .margin({

  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.   }

  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是不是更为简单呢。







欢迎光临 谷动谷力 (http://bbs.sunsili.com/) Powered by Discuz! X3.2