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

WebCodingTech
发布于 2020-11-12 16:29
浏览
1收藏

在之前的文章鸿蒙应用开发之怎么更好的远程连接手表模拟器做调试里我运行了一个穿戴设备的应用,利用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"           }   
        ]
    },
},

 

运行以后的效果如下:

鸿蒙系统应用开发之JS实现一个简单的List-鸿蒙开发者社区  
那么现在的问题就是如何获取数据了。

在官方文档里我查到了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');
        },
    })
}

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

  鸿蒙系统应用开发之JS实现一个简单的List-鸿蒙开发者社区
所以说,直接修改data里的数据是可以导致重新渲染界面的。

分类
已于2020-11-12 16:29:55修改
1
收藏 1
回复
举报
7条回复
按时间正序
/
按时间倒序
六合李欣
六合李欣

你好,网络访问权限,和http协议都设置了,服务器接收不到鸿蒙的fetch请求?请指教

fetch.fetch({
    url:"http://192.168.0.102:8355/users/query",
    responseType: 'json',
    success: function(response) {

        me.title = JSON.parse(response.data).channels;

    },
    fail: function(data, code) {
        console.info('fail callback');
    },
})

回复
2020-11-28 22:43:01
WebCodingTech
WebCodingTech

 

默认支持https,如果要支持http,需要在config.json里增加network标签,属性标识 "cleartextTraffic": true。即:

回复
2020-11-29 18:45:37
WebCodingTech
WebCodingTech

在官方文档里有写,我的文章也提到了,同学,你没有认真听讲啊

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

 

回复
2020-11-29 18:46:37
wx5fdb10bcdb53c
wx5fdb10bcdb53c 回复了 六合李欣
你好,网络访问权限,和http协议都设置了,服务器接收不到鸿蒙的fetch请求?请指教 fetch.fetch({ url:"http://192.168.0.102:8355/users/query", responseType: 'json', success: function(response) { me.title = JSON.parse(response.data).channels; }, fail: function(data, code) { console.info('fail callback'); },})

你请求返回的数据中有channels数据吗?尝试console.info(response.data)先打印出来试试

回复
2020-12-17 16:04:23
wx60c071692b977
wx60c071692b977

文档读了三遍,都设置上了。调用时仍然报错:[pc Preview]: no internet

回复
2021-6-9 18:52:02
黑板报呀
黑板报呀 回复了 wx60c071692b977
文档读了三遍,都设置上了。调用时仍然报错:[pc Preview]: no internet

网络权限没有设置,在config.json中配置一下。

 

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

回复
2021-6-10 08:38:10
阿木木lin2
阿木木lin2 回复了 wx60c071692b977
文档读了三遍,都设置上了。调用时仍然报错:[pc Preview]: no internet

别用预览器,用模拟器调试或真机调试,这个坑我踩过了

已于2021-6-10 16:13:42修改
1
回复
2021-6-10 16:12:59
回复
    相关推荐