鸿蒙系统应用开发之JS实现一个简单的List 精华

在之前的文章鸿蒙应用开发之怎么更好的远程连接手表模拟器做调试里我运行了一个穿戴设备的应用，利用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里的数据是可以导致重新渲染界面的。