HarmonyOS 鸿蒙Next 基于HarmonyOS的AI作诗应用开发练习

基于HarmonyOS的AI作诗应用开发练习

一、前言

一看到《HarmonyOS零基础JS开发之AI作诗》直播课程的标题就特别感兴趣，听完老师的课程试着自己动手实践，最终呈现的互动感觉特别好玩。

二、效果演示

三、项目结构

四、开发过程

1、页面设计

在布局上，我将应用页面主要分为上下两个部分，上半部分是操作区，除了常规的暗语文本输入框和生成按钮，我加了个模式切换按钮，下半部分则是诗的显示区域。

<div class="container">
    <div class="set_line">
        <text class="title">{{ aiMode }}</text>
        <button class="btn" type="capsule" onclick="modeChange">切换模式</button>
    </div>
    <div class="set_line">
        <input class="argot_input" type="text" value="{{ argot }}" onchange="argotChange">
        <button class="btn" type="capsule" onclick="writeStart">生成</button>
    </div>
    <div class="paper">
        <text class="each_line" for="{{ rawPoetry }}">{{ $item }}</text>
    </div>
</div>

2、模式切换

将藏头诗和续写诗的模式切换整合到一个按钮上，用户可以通过点击按钮切换AI作诗的模式。

// 切换 藏头诗 或者 续写诗 模式
modeChange () {
    if (this.aiMode === '藏头诗') {
        this.aiMode = '续写诗';
        this.seekUrl = 'https://py.myie9.com/xuxietest/';
    } else {
        this.aiMode = '藏头诗';
        this.seekUrl = 'https://py.myie9.com/cangtoutest/';
    }
},

3、网址拼接

先前通过输入框修改当前诗中暗语的值，点击生成按钮，将模式的接口网址与暗语进行拼接，获取对应的藏头诗或是续写诗。

// 拼接AI作诗的地址
let mySeekUrl = this.seekUrl + this.argot;

4、诗句排版

通过split()方法去掉逗号和句号，将原诗拆成一个一个单句。其中由于续写诗的篇幅比较长，考虑到显示区域空间有限，我就截取了前面的几句显示。

let originData = res.data;
console.log('获取的原诗为——' + originData);
// 将原诗进行格式化
that.rawPoetry = originData.split(/，|。/);
if (that.aiMode === '藏头诗') {
    that.rawPoetry = that.rawPoetry.slice(0, that.argot.length);
} else {
    that.rawPoetry = that.rawPoetry.slice(0, 8);
}

5、其它细节

在预览器里已经可以正常运行了，但要想在模拟器或真机上运行，还要注意这几点：

• 首先是添加网络权限，允许使用网络socket，在config.json文件添加如下代码：

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

• 为了应用页面的美观，一般我们会去掉应用上方的标题栏，让应用全屏显示，在config.json文件添加如下代码：

"metaData": {
  "customizeData": [
    {
      "name": "hwc-theme",
      "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
      "extra": ""
    }
  ]
}

• 另外，在config.json文件中，"icon"是应用图标的引用路径，"label"则是应用名，有兴趣的同学可以自己设计个好看的图标，或是有意思的应用名

五、结语

在开发过程中稍稍有些遗憾，原本是想加个动画效果，让诗上下滚动显示的，但marquee组件的direction属性只支持left、right两种滚动方向。所以就干脆将就使用普通文本显示。

六、代码仓库

项目源码 https://github.com/myie9/hwcode/tree/main/WritePoetry