做asp网站教程,网站的互动功能,推广普通话主题手抄报图片大全,wordpress的安装步骤面向HarmonyOS的移动应用一般采用MVVM模式#xff08;见参考文献【1】#xff09;#xff0c;其中#xff1a; M#xff08;Model层)#xff1a;模型层#xff0c;存储数据和相关逻辑的模型。它表示组件或其他相关业务逻辑之间传输的数据。Model是对原始数据的进一步处理…面向HarmonyOS的移动应用一般采用MVVM模式见参考文献【1】其中 MModel层)模型层存储数据和相关逻辑的模型。它表示组件或其他相关业务逻辑之间传输的数据。Model是对原始数据的进一步处理。 VView层视图层在ArkUI框架中通常是Components修饰组件渲染的移动应用界面的UI。 VMViewModel层视图模型层在ArkUI中ViewModel是存储在自定义组件的状态变量、LocalStorage和AppStorage中的数据。这些数据为UI提供渲染的内容同时UI界面也可以通过视图组件修改模型数据。是模型层和视图层的中介。 在创建一个移动应用中最重要的是获取数据以及对数据的处理。在这篇文章中主要讨论一下模型层中的数据来源。在HarmonyOS中获取数据的方式主要有 1.从网络中获取数据接口API。 2.从华为云数据库获取网络数据库的资源。 3.从移动终端直接获取本地的数据 从这篇文章开始将分别对以上三种情况简单介绍一下。本篇文章中简单介绍网络中获取并使用数据接口API的数据。
一、数据接口API API接口的请求方法常用的HTTP请求方法有GET、POST、PUT、DELETE等不同的请求方法对应不同的操作。 API的URL这是你的代码将发送请求的地址。 API的参数一些API可能需要参数来完成特定的操作例如你可能需要提供一个特定的ID来获取某个特定的数据。 API的返回数据你需要知道API返回的数据的格式如JSON、XML等以及数据的含义。 例如请求“https://dog.ceo/api/breeds/image/random”(关于数据api接口的更详细介绍见参考文献【2】返回的JSON数据如下 请求获取的随机JSON数据如下 { “message”:“https://images.dog.ceo/breeds/gaddi-indian/Gaddi.jpg”, “status”:“success” } 二、网络访问数据接口API
1.创建一个新的HarmonyOS项目 点击确认创建新的项目。
2.配置网络访问许可
在新项目的entry模块的module.json5配置文件中新增网络访问许可同时修改extensionAbilities的exported属性为true代码如下所示
{module: {name: entry,type: entry,description: $string:module_desc,mainElement: EntryAbility,deviceTypes: [phone,tablet,2in1],requestPermissions: [{name: ohos.permission.INTERNET}],deliveryWithInstall: true,installationFree: false,pages: $profile:main_pages,abilities: [{name: EntryAbility,srcEntry: ./ets/entryability/EntryAbility.ets,description: $string:EntryAbility_desc,icon: $media:layered_image,label: $string:EntryAbility_label,startWindowIcon: $media:startIcon,startWindowBackground: $color:start_window_background,exported: true,skills: [{entities: [entity.system.home],actions: [action.system.home]}]}],extensionAbilities: [{name: EntryBackupAbility,srcEntry: ./ets/entrybackupability/EntryBackupAbility.ets,type: backup,exported:true,metadata: [{name: ohos.extension.backup,resource: $profile:backup_config}]}]}
}3.在页面中增加获取API数据的请求
请求网络资源的可以通过request接口来实现 request接口开发步骤 从kit.NetworkKit中导入http命名空间。 调用createHttp()方法创建一个HttpRequest对象。调用该对象的on()方法订阅http响应头事件此接口会比request请求先返回。可以根据业务需要订阅此消息。调用该对象的request()方法传入http请求的url地址和可选参数发起网络请求。 按照实际业务需要解析返回结果。调用该对象的off()方法取消订阅http响应头事件。当该请求使用完毕时调用destroy()方法主动销毁。 下列的代码实现了对上述的api的访问具体内容如下 修改界面的Index.ets
//导入包
import { http } from kit.NetworkKit;
import { BusinessError } from kit.BasicServicesKit;Entry
Component
struct Index {State imageURL: string aboutToAppear(){this.doNetwork()}build() {RelativeContainer() {Text(this.imageURL).id(HelloWorld).fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: __container__, align: VerticalAlign.Center },middle: { anchor: __container__, align: HorizontalAlign.Center }})}.height(100%).width(100%)}async doNetwork(){//设置访问数据api的url链接let apiUrl https://dog.ceo/api/breeds/image/random//创建一个Http请求let httpRequest http.createHttp()//订阅http响应头事件httpRequest.on(headersReceive,(header){console.info(header: JSON.stringify(header));})//请求urlhttpRequest.request(apiUrl,{method:http.RequestMethod.GET,header:{Content-Type:application/json,},usingCache:true,connectTimeout:6000,//连接时间6sreadTimeout:6000,//读取时间6s},(err:BusinessError,response:http.HttpResponse){if(!err){console.info(响应的数据结果是:${JSON.stringify(response.result)})}else {console.error(error: JSON.stringify(err));// 取消订阅HTTP响应头事件httpRequest.off(headersReceive);// 当该请求使用完毕时调用destroy方法主动销毁httpRequest.destroy();}})}
}因为界面还未定义因此运行时可以在日志窗口中观察到获取到api数据运行结果如下所示 但是获取的JSON字符串需要得到具体的属性数据例如图片的链接地址因此需要将JSON数据转换成数据对象。
4.解析JSON数据
因为需要解析JSON字符串定义接口ReceivedData
interface ReceivedData{message,status
}然后将JSON字符串解析成ReceivedData对象代码段如下
//将获取的数据转换成JSON字符串
let result JSON.stringify(response.result)
console.info(响应的数据结果是:${result})
//解析JSON字符串转换成数据对象
let data:ReceivedData JSON.parse(result)通过这样的方式获取了特定的对象。
5.使用解析后的数据
修改Index.ets代码修改UI界面使得点击按钮不断刷新界面完整的Index.ets代码如下
//导入包
import { http } from kit.NetworkKit;
import { BusinessError } from kit.BasicServicesKit;Entry
Component
struct Index {State imageURL: string aboutToAppear(){this.doNetwork()}build() {Column() {if(this.imageURL!){Image(this.imageURL).width(100%).height(300)}Text(this.imageURL).id(HelloWorld).fontSize(12).fontWeight(FontWeight.Bold).alignRules({center: { anchor: __container__, align: VerticalAlign.Center },middle: { anchor: __container__, align: HorizontalAlign.Center }})Button(刷新).onClick((){this.doNetwork()})}.height(100%).width(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}async doNetwork(){//设置访问数据api的url链接let apiUrl https://dog.ceo/api/breeds/image/random//创建一个Http请求let httpRequest http.createHttp()//订阅http响应头事件httpRequest.on(headersReceive,(header){console.info(header: JSON.stringify(header));})//请求urlhttpRequest.request(apiUrl,{method:http.RequestMethod.GET,expectDataType: http.HttpDataType.OBJECT,//指定返回数据的类型header:{Content-Type:application/json,},usingCache:true,connectTimeout:6000,//连接时间6sreadTimeout:6000,//读取时间6s},(err:BusinessError,response:http.HttpResponse){if(!err){//将获取的数据转换成JSON字符串let result JSON.stringify(response.result)console.info(响应的数据结果是:${result})//解析JSON字符串转换成数据对象let data:ReceivedData JSON.parse(result)this.imageURL data.messageconsole.info(图片地址${data.message}-获取状态${data.status})}else {console.error(error: JSON.stringify(err));// 取消订阅HTTP响应头事件httpRequest.off(headersReceive);// 当该请求使用完毕时调用destroy方法主动销毁httpRequest.destroy();}})}
}interface ReceivedData{message,status
}最后的运行结果如下图所示 参考文献 【1】“MVVM模式” HarmonyOS Developer https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-mvvm-V5 【2】“推荐 GitHub 上的一套公开 API 接口简直不要太全” 腾讯云开发者社区 http://cloud.tencent.com/developer/article/2082773 【3】“HTTP数据请求” HarmonyOS Developer https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/http-request-V5
