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

HarmonyOS 鸿蒙Next 基于HarmonyOS的AI作诗应用开发 前言
观看了《HarmonyOS零基础JS开发之AI作诗》直播课后，根据课程进行了实战开发，实现了基于HarmonyOS的AI作诗应用开发。

概述
实现效果如下：

| | |

代码
demo源码仓的pyl_poem文件

正文
一、开发准备
1. 下载安装好DevEco Studio
2. 新建一个空白项目

| |

二、开发步骤
1. 添加权限
直播课程中给出了AI作诗的接口
因此本项目会需要用到网络管理模块，需要添加权限“允许程序打开网络套接字，进行网络连接”。在config.json文件下添加代码:

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

2. 界面布局
index.hml

<div class="container">
    <div class="container1">
        <text class="title">藏头诗</text>
        <input class="input" type="text" onchange="get_cangtou" placeholder="例：我爱祖国">
        <button class="create" onclick="create_cangtou" value="生成藏头诗"></button>
        <divider class="divide"></divider>
        <text class="title">输入第一句诗</text>
        <div class="container2">
            <input class="input" type="text" onchange="get_xuxie" placeholder="例：本来无一物">
        </div>
        <button class="create" onclick="create_xuxie" value="AI生成整首诗"></button>
        <dialog id="cangtouDialog">
            <div class="dialog-div1">
                <text class="txt">藏头诗生成成功</text>
                <text style="width : 100%; height : 180px; font-size : 16px; text-align : start; margin : 10px;">
                    {{ result_tou }}
                </text>
                <button class="close" onclick="close_tou" value="关闭"></button>
            </div>
        </dialog>
        <dialog id="xuxieDialog">
            <div class="dialog-div2">
                <text class="txt">整首诗生成成功</text>
                <text class="text">{{ result_xu }}</text>
                <button class="close" onclick="close_xu" value="关闭"></button>
            </div>
        </dialog>
    </div>
</div>

3. 初始化数据
index.js

   data: {
        content_tou:"我爱祖国",
        content_xu:"本来无一物",
        result_tou:'',
        result_xu:''
    },

4. 获取输入内容
index.js

    get_cangtou(e){
        this.content_tou=e.value
    },

    get_xuxie(e){
        this.content_xu=e.value
    },

5. 通过网络接口生成诗
点击按钮时相应事件，同时弹窗显示结果内容

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

    create_cangtou(){
        console.info('pyl-Input:'+this.content_tou);
        let httpRequest = http.createHttp();
        httpRequest.request(
            "https://py.myie9.com/cangtoutest/"+this.content_tou,
            {
                method:http.RequestMethod.GET,
                header: {
                    'Content-Type': 'text/plain'
                },
                connectTimeout: 60000,
                readTimeout: 60000,
            }, (err, data) => {
            if (!err) {
                console.info('pyl-Result:' + data.result);
                this.result_tou = data.result;
                this.$element('cangtouDialog').show();
            } else {
                console.info('pyl-error:' + JSON.stringify(err));
            }
        })
    },

    create_xuxie(){
        console.info('pyl-Input:'+this.content_xu);
        let httpRequest = http.createHttp();
        httpRequest.request(
            "https://py.myie9.com/xuxietest/"+this.content_xu,
            {
                method:http.RequestMethod.GET,
                header: {
                    'Content-Type': 'text/plain'
                },
                connectTimeout: 60000,
                readTimeout: 60000,
            }, (err, data) => {
            if (!err) {
                console.info('pyl-Result:' + data.result);
                this.result_xu = data.result;
                this.$element('xuxieDialog').show();
            } else {
                console.info('pyl-error:' + JSON.stringify(err));
            }
        })
    },

结语
以上就是本次的小分享啦❀❀，详情代码以可以去demo仓代码里去查看哦。