在之前的文章鴻蒙應用開發之怎么更好的遠程連接手表模擬器做調試里我運行了一個穿戴設備的應用，利用JS UI實現了一個最簡單的HelloWorld。
今天我打算在智慧屏設備上利用豆瓣音樂的接口數據實現一個簡單的List界面。
說起來這是一個很簡單的功能實現，不過其中也有不少的坑。
首先要說明的是，鴻蒙應用開發里有Java UI框架和JS UI框架，如果要談界面實現的簡單方便，當然是選用JS UI框架了。
大概的瀏覽了一下JS API的文檔，
我發現鴻蒙應用開發里面的JS限制還是比較多的，和原生的JS差別也很大，不過畢竟是在別人的地盤下開發，還是要入鄉隨俗。
鴻蒙應用的JS UI框架已經有了很多的組件，滿足一般的開發是沒問題的，也提供了自定義組件。
當然也提供了底層接口，可以獲取硬件信息，地理位置等等。
在今天的開發里，我最關心的就是List組件和數據獲取的方式。
按照文檔里提供的范例，我把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方法：
根據文檔的說法，我們首先要在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" }],
這個權限聲明部分其實還有很多需要增加的屬性，可以參考：
這個其實跟安卓開發差不多。
不過這個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