在之前的文章鸿蒙应用开发之怎么更好的远程连接手表模拟器做调试里我运行了一个穿戴设备的应用,利用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. 用composer安装captcha_src()不成功

    1,要么就是TP的框架配置有问题建议重新下载 2,要么就是下载captcha_src的语句有问题  正确的语句  composer require topthink/think-captcha 1.* ...

  2. pytest文档33-Hooks函数获取用例执行结果(pytest_runtest_makereport)

    前言 pytest提供的很多钩子(Hooks)方法方便我们对测试用例框架进行二次开发,可以根据自己的需求进行改造. 先学习下pytest_runtest_makereport这个钩子方法,可以更清晰的 ...

  3. centos8平台使用rpm管理软件包

    一,什么是rpm rpm是redhat package manager redhat的软件包管理器 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/a ...

  4. History和Screen的对象属性

    History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. 属性 说明 length 返回历史列表中的网址数 History 对象方法 方法 说明 b ...

  5. python 虚拟环境安装

    windows虚拟环境的搭建 安装 # 建议使用pip3安装到python3环境下 pip3 install virtualenv pip3 install virtualenvwrapper-win ...

  6. APP打开(一)—以亲身经历谈APP注册登录

    如果不是自己接手过这样的产品,我可能也很难相信,会有公司能够做出十四个注册页面的APP,将选站点.输账号.输密码.用户协议.用户权限等全部拆解成一个一个单独的页面来做,用户在注册的时候仿佛在攀登一座云 ...

  7. 使用Navicat远程连接阿里云ECS服务器上的MySQL数据库

    一.必须给服务器的安全组规则设置端口放行规则,在管理控制台中设置: 之后填写配置,授权对象是授权的IP,其中0.0.0.0/0为所有IP授权,之后保存; 二.Navicat使用的配置 在编辑连接处,要 ...

  8. Hbase实用技巧:全量+增量数据的迁移方法

    摘要:本文介绍了一种Hbase迁移的方法,可以在一些特定场景下运用. 背景 在Hbase使用过程中,使用的Hbase集群经常会因为某些原因需要数据迁移.大多数情况下,可以跟用户协商用离线的方式进行迁移 ...

  9. Mongodb命令 --- MongoDB基础用法(二)

    Mongodb命令 数据库操作 创建数据库 MongoDB 创建数据库的语法格式如下: use DATABASE_NAME 如果数据库不存在,则创建数据库,否则切换到指定数据库. 删除数据库 Mong ...

  10. Djano之数据库--ORM

    一.建立数据库模型类 1.在model里创建模型类.(继承models.Model) 1 class Order(models.Model): 2 TYPE_CHOICE = ( 3 (0, u&qu ...