了解更多请访问:鸿蒙科技社区https://harmonyos.51cto.com/#zz与华为官网共同打造。本文的项目是通过远程调用聚合数据做一个新闻页面。首先,必须明确以下几点Points:1.页面加载时,用户点击加载,浏览加载的任何服务器。如果一次性全部加载,不仅页面布局不堪重负,服务器的负载也会很重,造成服务器资源的浪费。2.思路过程(以制作首页为例):onInit首先加载并获取首页数据;用户单击该菜单以加载该菜单的数据。项目流程如下:1.导入鸿蒙的网络请求模块fetch(上一篇也有提到)这里,需要注意的是:一定要去config.json看看有没有二级域名配置的名称,否则您将看不到数据。比如这里是v.juhe.cn。如下图:2.由于鸿蒙没有可视化窗口,我们可以做一个调试可视化窗口。调试完成后将其移除。这个窗口的目的只是让自己通过可视化窗口清楚的看到数据是否成功获取,以便我们更好的跟踪调试。(点击事件changemenu跳转到js将当前点击的菜单项赋值给currentIndex创建调试窗口)具体代码和注解下面会详细给出。显示如下:模拟器中的单词来自聚合数据给出的样式:js业务逻辑层:importfetchfrom'@system.fetch';exportdefault{data:{title:'',currentIndex:0,type:"",bookdatas:[],//声明一个数组menus:["首页","新闻","视频","音乐","天气","生活","体育","电竞","娱乐","美食"]},onInit(){fetch.fetch({url:"http://v.juhe.cn/toutiao/index?type=top&key=401162c3e198047abc4d73d6f95aabbe",//v.juhe.cn必须去config.json看看有没有配置二级域名nameresponseType:"json",success:(resp)=>{letdatas=JSON.parse(resp.data);//转换为json数据格式this.title=datas.reason;this.bookdatas=datas.result.data;}})},changemenu(event){letclickindex=event.index;this.currentIndex=clickindex;//当前点击的菜单项赋值给currentIndexthis.type=typeofclickindex;if(clickindex==0){}elseif(clickindex==1){}}}页面渲染:
