明天咱们将做一个 OpenHarmony 趣味利用——OpenHarmony 藏头诗利用,是通过 AI 接口来做。通过调用指定的 AI 接口来做,接口会返回藏头诗或者持续实现诗的前面几句。
我要实现的性能次要有:
- 生成藏头诗,
- 生成整首诗,
你能学到的有:
- 网络申请
- 可滚动组件
- 状态治理
- 罕用组件
- 罕用属性
- 批改利用名称和图标
- 在 Config.json 增加权限等
用到的接口:
接口:
https://py.myie9.com/hidepoem/ 坚果
申请形式:
Get
apipost 申请测试
接口:
https://py.myie9.com/xuxietest/ 汗滴禾下土
apipost 申请测试:
如何创立利用在这里不做解释。
首先预览一下利用
留神点:
容许 https 须要增加上面的配置
"deviceConfig": {
"default": {
"network": {"cleartextTraffic": true}
}
},
应用网络申请在 config.json 增加权限:
"reqPermissions": [
{"name": "ohos.permission.INTERNET"}
],
残缺代码:
import http from '@ohos.net.http';
import RequestMethod from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
@Entry
@Component
struct Index {
@State tibetanContent: string = "坚果的小跟班";
@State tibetanInput: string = "跟着坚果学鸿蒙";
@State wholeContent: string = "";
@State wholeInput: string = "跟着坚果学鸿蒙";
private scroller: Scroller = new Scroller()
onCancel() {console.info('敞开')
}
build() {Scroll(this.scroller) {Column({ space: 10}) {Text($r("app.string.title"))
.fontSize(26)
.fontWeight(FontWeight.Bold)
.align(Alignment.Start)
.margin({top: 20})
TextInput({placeholder: '请输出要生成的内容',})
.fontSize(36)
.enterKeyType(EnterKeyType.Go)
.onChange((value) => {this.tibetanInput = value;})
.height(80)
.margin({
top: 40,
left: 16,
right: 16
})
Button("生成藏头诗").backgroundColor(Color.Pink)
.onClick(() => {this.TibetanRequest();
})
Text(this.tibetanContent).fontSize(26).fontColor(Color.Orange)
TextInput({placeholder: '请输出要生成的内容',})
.fontSize(36)
.enterKeyType(EnterKeyType.Go)
.onChange((value) => {this.wholeInput = value;})
.height(80)
.margin({
left: 16,
right: 16
})
Button("生成整首诗").backgroundColor(Color.Green)
.onClick(() => {this.wholePoemRequest();
})
Text(this.wholeContent).fontSize(24).fontColor(Color.Orange)
}
.padding(10)
}
}
// 藏头诗接口
private TibetanRequest() {let httpRequest = http.createHttp();
httpRequest.request(
"https://py.myie9.com/hidepoem/" + this.tibetanInput,
{
method: RequestMethod.RequestMethod.GET,
readTimeout: 15000,
connectTimeout: 15000,
},
(error, data) => {if (error) {console.log("error code:" + error.code + ", msg:" + error.message)
} else {
let code = data.responseCode
if (ResponseCode.ResponseCode.OK == code) {this.tibetanContent = data.result.toString();
let header = JSON.stringify(data.header);
console.log("result:" + this.tibetanContent);
console.log("header:" + header);
} else {console.log("response code:" + code);
}
}
}
);
}
// 整首诗接口
private wholePoemRequest() {let httpRequest = http.createHttp();
httpRequest.request(
"https://py.myie9.com/xuxietest/" + this.wholeInput,
{
method: RequestMethod.RequestMethod.GET,
readTimeout: 15000,
connectTimeout: 15000,
},
(error, data) => {if (error) {console.log("error code:" + error.code + ", msg:" + error.message)
} else {
let code = data.responseCode
if (ResponseCode.ResponseCode.OK == code) {this.wholeContent = data.result.toString();
let header = JSON.stringify(data.header);
console.log("result:" + this.wholeContent);
console.log("header:" + header);
} else {console.log("response code:" + code);
}
}
}
);
}
}
发动网络申请
应用 @ohos.net.http
模块发动网络申请分为以下步骤:
引入 http 模块
import http from '@ohos.net.http';
创立一个 httpRequest
let httpRequest = http.createHttp();
发动 http 申请
httpRequest
提供了两种 request()
办法进行网络申请,别离是无 RequestOptions
参数的申请和有 RequestOptions
参数的申请。别离介绍如下:
-
无
RequestOptions
参数申请// 藏头诗接口 private TibetanRequest() {let httpRequest = http.createHttp(); httpRequest.request( "https://py.myie9.com/hidepoem/" + this.tibetanInput, { method: RequestMethod.RequestMethod.GET, readTimeout: 15000, connectTimeout: 15000, }, (error, data) => {if (error) {console.log("error code:" + error.code + ", msg:" + error.message) } else { let code = data.responseCode if (ResponseCode.ResponseCode.OK == code) {this.tibetanContent = data.result.toString(); let header = JSON.stringify(data.header); console.log("result:" + this.tibetanContent); console.log("header:" + header); } else {console.log("response code:" + code); } } } ); }
request()
办法默认采纳get
形式申请。
上述代码,重点是通过调用 HTTP 的 AI 接口,来获取生成接口返回的诗的内容,并显示在利用界面上。
批改利用形容信息
默认的利用形容信息,集中在 config.json 文件中。
批改 string.json 内容如下:
"srcLanguage": "ets",
"srcPath": "MainAbility",
"icon": "$media:icon", // 利用图标
"description": "$string:desc",
"label": "$string:title", // 利用名称
"type": "page",
"visible": true,
"launchType": "standard"
这么乏味的利用就这样实现了,比起 js 开发方式,eTS 是不是更为简略呢。