基于HarmonyOS 鸿蒙Next JS开发AI作诗APP

基于HarmonyOS 鸿蒙Next JS开发AI作诗APP 参加了《【集成赢好礼】零基础开发AI作诗》的活动，发现确实还比较简单，但是有不少的坑，先上整个流程：

一、安装Deveco Studio
到官网下载后按照步骤安装即可，主要是目前该工具对于npm和nodejs都有版本要求，所以根据要求来调整吧，我在安装的过程中还把nodejs给降低了版本。
下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio/

二、新建项目
最新版本的Deveco Studio的创建项目界面和教程里的不太一样，但不影响开发：

点击下一步

选择SDK，这里选择version 6，也可以选择最新的8，但是在后续模拟机测试的时候对机型会有影响，具体见下图：

继续下一步，创建好项目后可以查看项目结构：

红框部分为核心代码区域

三、编码
直接上核心代码：

1）index.html

<div class="container">    
    <div class="containerA">
        <text class="title">藏头诗</text>
        <input class="input" type="text" onchange="textChangeKey" placeholder="{{placeHolder_keyword}}">
        {{keyword}}
        <button class="itemBtn" onclick="genHeadPoem" value="{{keywordButton}}"></button>
        <divider class="hr"></divider>
        <text class="title">输入第一句诗</text>
        <div class="containerB">
            <input class="input" type="text" onchange="textChangeHead" placeholder="{{placeHolder_headPoem}}">
            {{headPoem}}
        </div>
        <button class="itemBtn" onclick="genPoem" value="{{headPoemButton}}"></button>
    </div>
</div>

2）index.css

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url(/common/images/background.png);
}
.containerA{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    width: 95%;
    height: 95%;
}
.title {
    font-size: 35px;
    text-align: center;
    width: 100%;
    height: 50px;
    margin: 10px;
}
.input {
    font-size: 24px;
    text-align: start;
    width: 100%;
    height: 70px;
    margin: 10px;
    border-radius: 0;
}
.itemBtn{
    font-size: 24px;
    text-align: center;
    width: 200px;
    height: 50px;
    margin: 15px;
}
.hr{
    margin: 10px;
    color: gray;
    stroke-width: 3px;
    margin: 10px;
}
.containerB {
    font-size: 20px;
    text-align: start;
    width: 100%;
    height: 230px;
    margin: 10px;
    border-color: gray;
    border-width: 2px;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}
@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

3）index.js

import fetch from '@system.fetch';
import prompt from '@system.prompt';

export default {
    data: {
        keyword: "我爱鸿蒙",
        headPoem: "李白乘舟将欲行",
        keywordButton: "AI生成藏头诗",
        headPoemButton: "AI生成整首诗",
        placeHolder_keyword: "请输入4个不重复的汉字",
        placeHolder_headPoem: "请输入一两句诗词，逗号分隔"
    },
    onInit() {},
    textChangeKey(e) {
        this.keyword = e.text;
    },
    textChangeHead(e) {
        this.headPoem = e.text;
    },
    genHeadPoem() {
        console.log(this.keyword);
        this.keyword = this.keyword.replace(/[\s]+/g, "").replace(/\n/g, "").replace(/\r/g,"")
        console.log(this.keyword);
        if(this.keyword === "") {
            this.showDialog("请输入4个不同的汉字", "藏头诗生成失败");
            return;
        }
        let url = 'https://py.myie9.com/hidepoem/' + this.keyword;
        let that = this;
        fetch.fetch({
            url: url,
            method: 'GET',
            responseType: 'text',
            success: function (ret) {
                console.log(JSON.stringify(ret));
                if (ret.code == 500) {
                    that.showDialog("您太有才我不行，换一个吧", "藏头诗生成失败");
                    return;
                }
                let data = ret.data;
                console.log(data.toString());
                that.showDialog(data.toString(), "藏头诗生成成功！");
            },
            fail:function(data, code) {
                if(data.code == 500) {
                    that.showDialog("您太有才我不行，换一个吧", "藏头诗生成失败");
                } else {
                    that.showDialog("发生错误，请重试！错误码为：" + code + "," + JSON.stringify(data), "AI错误");
                }
            }
        })
    },
    genPoem() {
        console.log(this.headPoem);
        this.headPoem = this.headPoem.replace(/[\s]+/g, "").replace(/\n/g, "").replace(/\r/g,"")
        console.log(this.headPoem);
        if(this.headPoem === "") {
            this.showDialog("请输入一两句诗", "整首诗生成失败");
            return;
        }
        let url = 'https://py.myie9.com/xuxietest/' + this.headPoem;
        let that = this;
        fetch.fetch({
            url: url,
            method: 'GET',
            responseType: 'text',
            success: function (ret) {
                console.log(JSON.stringify(ret));
                if (ret.code == 500) {
                    that.showDialog("您太有才我不行，换一个吧", "整首诗生成失败");
                    return;
                }
                let data = ret.data;
                console.log(data.toString());
                that.showDialog(data.toString(), "整首诗生成成功！");
            },
            fail:function(data, code) {
                if(data.code == 500) {
                    that.showDialog("您太有才我不行，换一个吧", "整首诗生成失败");
                } else {
                    that.showDialog("发生错误，请重试！错误码为：" + code + "," + JSON.stringify(data), "AI错误");
                }
            }
        })
    },
    showDialog(msg, title= '提示') {
        let that = this;
        prompt.showDialog(
            {
                title: title,
                message: msg,
                buttons: [{
                    text: '关闭',
                    color: '#33dd44'
                }],
                success: function(data) {
                    console.log(JSON.stringify(data));
                    console.log("用户点击关闭按钮");
                },
                cancel: function() {
                    console.log("用户点击按钮，code = ");
                }
            }
        )
    }
};

四、预览和运行
点击studio右侧Previewer可以进行预览，如下图：

开发过程中可以随时进行预览，并且进行样式调整

点击Tools-Device Manager可以选择模拟机进行模拟测试：

选择Remote Emulator，选择P40进行运行

运行后点击Studio右上方的运行
即可进行效果模拟：

五、运行效果
见附件

注意：
在模拟器运行的时候可能会出现网络权限问题，需要修改配置文件config.json

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