鴻蒙系統應用開發之JS實現一個簡單的List

HarmonyOS技術社群發表於2020-11-13
鴻蒙JS

在之前的文章鴻蒙應用開發之怎麼更好的遠端連線手錶模擬器做除錯裡我執行了一個穿戴裝置的應用，利用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

相關文章