在之前的文章鸿蒙应用开发之怎么更好的远程连接手表模拟器做调试里我运行了一个穿戴设备的应用,利用JS UI实现了一个最简单的HelloWorld。

今天我打算在智慧屏设备上利用豆瓣音乐的接口数据实现一个简单的List界面。

说起来这是一个很简单的功能实现,不过其中也有不少的坑。

首先要说明的是,鸿蒙应用开发里有Java UI框架和JS UI框架,如果要谈界面实现的简单方便,当然是选用JS UI框架了。

大概的浏览了一下JS API的文档,

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791

我发现鸿蒙应用开发里面的JS限制还是比较多的,和原生的JS差别也很大,不过毕竟是在别人的地盘下开发,还是要入乡随俗。

鸿蒙应用的JS UI框架已经有了很多的组件,满足一般的开发是没问题的,也提供了自定义组件。

当然也提供了底层接口,可以获取硬件信息,地理位置等等。

在今天的开发里,我最关心的就是List组件和数据获取的方式。

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496

按照文档里提供的范例,我把index.html改成了如下代码

<!-- index.hml -->
<div class="container">
<list>
<list-item for="{{data.items}}">
<text class="item">{{$item.name}}</text>
</list-item>
</list>
</div>

在index.js里我把data部分改成了如下:

data: {
data:{
items:[
{ name:"a" },
{ name:"b" }
]
},
},

运行以后的效果如下:

那么现在的问题就是如何获取数据了。

在官方文档里我查到了fetch方法:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-data-request-0000000000626077

根据文档的说法,我们首先要在index.js里导入fecth:

import fetch from '@system.fetch';

然后文档里说了这个方法需要ohos.permission.INTERNET权限,于是我就去config.json里增加了权限。

在\DevEcoStudioProjects\MyApplication1\entry\src\main\config.json里找到module,在这个属性下面增加:

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

这个权限声明部分其实还有很多需要增加的属性,可以参考:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/security-permissions-guidelines-0000000000029886

这个其实跟安卓开发差不多。

不过这个fetch方法跟原生JS的fetch不太一样

fetch.fetch({
url:"https://www.douban.com/j/app/radio/channels",
responseType: 'json',
success: function(response) {
console.info('response data:' + response.data);
console.info('response data:' + JSON.parse(response.data).channels);
},
fail: function(data, code) {
console.info('fail callback');
},
})

这个responseType据说设置成json就会返回对象,不过我测试下来并不会。

虽然你看我写出来一副了然于胸的样子,其实权限部分和这个fetch方法我一开始并不知道。

本来我以为可以直接用fetch,结果发现并不可以,后来突然想起来官方文档里号称用的是ES6语法,我就试了试import,误打误撞才发现原来需要自己导入fetch。

这时候我才去文档里找到了相关的说明,才知道居然是fetch.fetch。

一开始也还是无法返回数据,我还以为华为的远端调试不支持访问外网,再看文档才注意到权限。

设置了权限也无法访问,又会去看文档才注意到默认用https,要用http还需要另外设置。

这些都修改好了,就非常顺利地返回了数据。

接下来的问题就是如何把数据渲染到界面上。

我把index.js里的onInit做了如下修改:

onInit() {
let me = this;
fetch.fetch({
url:"https://www.douban.com/j/app/radio/channels",
responseType: 'json',
success: function(response) {
console.info('response data:' + response.data);
me.data.items = JSON.parse(response.data).channels;
},
fail: function(data, code) {
console.info('fail callback');
},
})
}

重新运行之后(如果本地调试,是可以热更新的,远程调试需要重新运行):

所以说,直接修改data里的数据是可以导致重新渲染界面的。

作者:WebCodingTech

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com#bky

鸿蒙系统应用开发之JS实现一个简单的List的更多相关文章

  1. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  2. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  4. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  5. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

  6. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  7. 学习用node.js建立一个简单的web服务器

    一.建立简单的Web服务器涉及到Node.js的一些基本知识点: 1.请求模块 在Node.js中,系统提供了许多有用的模块(当然你也可以用JavaScript编写自己的模块,以后的章节我们将详细讲解 ...

  8. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  9. Three.js构造一个简单的房间

    主要研究three.js在3D场景中基本使用:画一个简单的房子.房子上画门和玻璃.房间内放一个床.定义鼠标事件可以移动场景.动画的使用等. 1.Three.js画的一个简单的房子,模拟地板以及四堵墙 ...

随机推荐

  1. Gearman实战第一弹:异步处理结算单

    昨天梦回jm,醒来之后看着窗外万里晴空,想大声喊一句:爷青回! 我想起之前使用gearman的岁月.不知不觉也过了快5年,想总结一篇关于gearman的技术文章算是一种对青春的祭奠,再不写的话更少有p ...

  2. ansible-的修改配置文件

    1. ansible的配置文件 1 [root@1-230 python-2.7.5]# tree /etc/ansible/ 2 /etc/ansible/ 3 ├── ansible.cfg 4 ...

  3. ZooKeeper伪分布式集群安装及使用

    ZooKeeper伪分布式集群安装及使用 让Hadoop跑在云端系列文章,介绍了如何整合虚拟化和Hadoop,让Hadoop集群跑在VPS虚拟主机上,通过云向用户提供存储和计算的服务. 现在硬件越来越 ...

  4. JVM(五):JVM模型与GC

    确定垃圾 引用计数(存在循环引用问题) 根可达算法 常见的垃圾回收算法 标记清除算法-位置不连续,产生碎片 拷贝算法- 没有碎片,浪费空间 标记压缩-没有碎片,效率偏低(多线程需要进行线程同步,单线程 ...

  5. 关于ptype_all和pypte_base中的pt_prev的说明[转]

    不知道原帖,我是从这里看到了,解决了迷惑我很久的疑问,抄过来. 看见noble_shi兄弟"关于net_rx_action函数的若干问题"贴中关于pt_prev的问题, 本来想在论 ...

  6. JVM系列【2】Class文件结构

    JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 如何查看class字节码文件 在idea中可以通过插件BinEd来查看二进 ...

  7. day52 Pyhton 前端03

    内容回顾 块级标签: div p h 列表:ol;ul;dl 表格:table 行内标签: span a i/em b/strong u/del 行内块: input textarea img 其他: ...

  8. 闭嘴,给你一个数!1分钟,学完C语言指针,不扎手只扎心的针!

    序言 指针是C语言学习者绕不过的一道坎,也是C语言学习者不得绕过的一道坎.辨别一个人C语言学的好赖就看他对指针的理解怎么样.指针内容也是工作面试经常问到的问题.本文将带你重新认识那个绊倒你的指针,以解 ...

  9. C语言-入门级编程语言--编程小白首选

    我们都知道计算机很厉害,利用计算机可以高效地处理和加工信息,随着计算机技术的发展,计算机的功能越来越强大,不但能够处理数值信息,而且还能处理各种文字.图形.图像.动画.声音等非数值信息.   在199 ...

  10. docker启动服务---------------nginx+php

    环境 首先安装Docker,无论你是Windows还是Linux.MocOS都可以.安装Docker自行百度. Docker镜像源 访问https://hub.docker.com即可,它是镜像大仓库 ...