#HarmonyOS NEXT体验官#藏头诗应用 原创

藏头诗应用

目前支持的功能

1. 输入主题和关键词：用户可以输入特定的主题，如爱情、友情、生日等，以及相关的关键词，以便生成更贴合需求的藏头诗。

2. 选择诗体和格律：提供多种诗体选项，如五言绝句、七言律诗等，并能遵循相应的格律规则生成。

3. 押韵模式选择：让用户决定是押平声韵、仄声韵还是通押。

4. 风格设定：例如古典风格、现代风格、幽默风格、深情风格等。

5. 自定义藏头内容：不仅能藏头词语，还能藏头句子或名字。

6. 诗句解释：对生成的藏头诗中的每一句进行详细的解释，帮助用户理解诗意。

7. 分享和保存：支持将生成的藏头诗分享到社交媒体，或者保存为图片、文档等格式。

8. 灵感提示：在用户创作藏头内容遇到困难时，提供一些灵感和示例。

9. 诗词修改建议：如果用户对生成的诗不满意，给出修改的方向和建议。

10. 历史记录：保存用户生成过的藏头诗，方便回顾和再次编辑。

效果

接下来，我们一起来看一下，如何实现的。

创建项目

添加网络权限

因为数据来自于我们的后台，所以需要网络权限。

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

发起网络请求

接口

请求方法: [ “GET”, “POST” ]

请求参数：

返回参数:

返回状态码 code 描述参照

返回参数

{
  "code": 200,
  "msg": "success",
  "data": {
    "keyword": "夏天我错了",
    "poem": "夏云生此日，天庭玉帛陈。我忧长于生，错落北斗星。了与世事绝，日暮微风起。",
    "list": [
      "夏云生此日",
      "天庭玉帛陈",
      "我忧长于生",
      "错落北斗星",
      "了与世事绝",
      "日暮微风起"
    ]
  },
  "time": 1721998111,
  "usage": 0,
  "log_id": "675442796677423104"
}

Axios请求

Axios ，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。本库基于Axios 原库v1.3.4版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

• http 请求
• Promise API
• request 和 response 拦截器
• 转换 request 和 response 的 data 数据
• 自动转换 JSON data 数据

请求数据

getData(num: number, type: number, rhyme: number) {

  interface Post {
    keyword: string,
    num: number
    type: number
    rhyme: number
    token: string
  }

  axios.post<string, AxiosResponse<string>, Post>('你的url', {
    keyword: this.keyword,
    num: num,
    type: type,
    rhyme: rhyme,
    token: "你的token"
  })
    .then((response: AxiosResponse<string>) => {
      console.info(JSON.stringify(response));

      this.msg = JSON.stringify(response.data)

      let PoemInfoModel: PoemInfoModel = JSON.parse(JSON.stringify(response.data))
      let poemInfo = PoemInfoModel.data


      router.pushUrl({
        url: "pages/DetailsPage"
      ,
        params: poemInfo
      })
    })
    .catch((error: AxiosError) => {
      console.info(JSON.stringify(error));
    });


}

数据渲染

build() {
  Column() {
    // Text(this.msg)
    Text("藏头诗").fontSize(30)

    Text("一诗一世界") .fontSize(20). fontColor(Color.Orange).textShadow({
      radius: 10,
      color: Color.Orange,
      offsetX: 0,
      offsetY: 0
    })
    Text("一意一乾坤").fontSize(20) .fontColor(Color.Orange)
      .textShadow({
      radius: 10,
      color: Color.Orange,
      offsetX: 0,
      offsetY: 0
    })
    TextInput({

      placeholder: "请输出"
    ,
      text: this.keyword
    }).onChange((e: string) => {
      this.keyword = e


    })
      .width("80%")

    Text("格式")

    Row() {

      overBuilder(5, "五言", "checknum", (type: number) => {

        this.num = 5

      })
      overBuilder(7, "七言", "checknum", (type: number) => {

        this.num = 7

      })
      CheckBox({
        value: 7,
        title: "七言",
        groupname: "checknum",
        changeFactory: (type: number) => {

          this.num = 7

        }
      })
    }

    Text("位置")
    Flex({
      justifyContent: FlexAlign.Start,
      wrap: FlexWrap.Wrap
    }) {

      overBuilder(1, "藏头", "checktype", (type: number) => {

        this.type = 3

      })
      CheckBox({
        value: 1,
        title: "藏头",
        groupname: "checktype"
      ,
        changeFactory: (type: number) => {

          this.type = 1

        }
      })
      CheckBox({
        value: 2,
        title: "藏尾",
        groupname: "checktype"
      ,
        changeFactory: (type: number) => {

          this.type = 2

        }

      })
      CheckBox({
        value: 3,
        title: "藏中",
        groupname: "checktype",
        changeFactory: (type: number) => {

          this.type = 3

        }
      })
      CheckBox({
        value: 4,
        title: "递增",
        groupname: "checktype",
        changeFactory: (type: number) => {

          this.type = type

        }
      })

      CheckBox({
        value: 5,
        title: "递减",
        groupname: "checktype",
        changeFactory: (type: number) => {
          this.type = type

        }
      })
    }

    Text("押韵")
    Row() {
      CheckBox({
        value: 1,
        title: "双句一押",
        groupname: "checkrhyme"
      ,
        changeFactory: (type: number) => {
          this.rhyme = type

        }

      })
      CheckBox({
        value: 2,

        title: "双句押韵 ",
        groupname: "checkrhyme"
      ,
        changeFactory: (type: number) => {
          this.rhyme = type

        }

      })
      CheckBox({
        value: 3,
        title: "一三四押",
        groupname: "checkrhyme",
        changeFactory: (type: number) => {
          this.rhyme = type

        }
      })


    }

    Text("开始作诗").fontSize(32)
      .onClick(() => {
        this.getData(this.num, this.type, this.rhyme)
      })
  }
  .height('100%')
  .width('100%').backgroundImage($r("app.media.img_1")).backgroundImageSize({
    width: "100%",
    height: "100%"
  })
}

这里我们还可以自定义组件

@ComponentV2
export struct CheckBox {
  @Param value: number = 0
  @Param title: string = ""
  @Param groupname: string = ""
  @Param changeFactory: (x: number) => void = (x: number) => {
  };

  build() {
    Row() {
      Radio({ value: this.value.toString(), group: this.groupname })
        .onChange((value: boolean) => {
          console.info('Checkbox1 change is' + value)
        })
        .width(30)
        .height(30)
      Text(this.title).fontSize(20)
    }.onClick(() => {
      this.changeFactory(this.value)
    })
  }
}

编译运行

开发完成，就可以编译运行啦。