鴻蒙應用開發踩坑記之路由跳轉

本來打算先搞地圖方面的開發，但是遇到一些，已經在官方論壇發帖求助了：
關於JS UI開發的一些問題

大家如果對鴻蒙應用開發有興趣，也去幫我催催官方吧。
這兩天Mac OS發布了最新的版本，鴻蒙的開發工具也發布了mac版本，這兩件事稍許沖淡了我在鴻蒙應用開發中遇到的不快。
今天就來繼續做一下路由跳轉。
這個功能就在之前的項目基礎上做，請參考我之前的文章：

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

要做路由，首先要在config.json中加上page：

"js": [
  {
    "pages": [
      "pages/index/index",
      "pages/music/index" //新增的頁面
    ],
    "name": "default",
    "window": {
      "designWidth": 720,
      "autoDesignWidth": false
    }
  }
]

js是在config的module中，js UI項目生成的時候會已經有了。
接下來就在js/page文件夾下增加這個music文件夾，需要新建的文件和index下一致。

然后我們就可開始改造之前的index部分。

<text class="item" onclick="goto">{{$item.name}}</text>

這個時候出現了問題，我要怎么把頻道id傳給這個函數呢？
翻了下文檔，我發現官方並沒有明確說明箭頭函數或者bind方法能不能用。
那我就姑且當作可以吧。
嘗試之后，兩個都不行……
這個onclick里面只能放函數名……
好吧，於是我修改了一下：

<text  class="item" onclick="goto" id="{{$item.channel_id}}">{{$item.name}}</text>

然后在index.js里面增加goto方法：

goto(e){
    router.push({
        uri:'pages/music/index',
        params:{
            channelId: e.target.attr.id
        }
    })
}

這個事件響應總是要傳一個event對象的，從event對象上拿到target，就可以拿到這個id了。
哦，別忘記在index.js引入router：
import router from ‘@system.router’;

然后用push方法跳轉到相應的頁面，可以把參數帶過去，params下的channelId會直接放在music/index的data里面。

import fetch from '@system.fetch';
export default {
    data: {
        title: "",
        data:{
            items:[

            ]
        },
    },

    onInit() {
        let me = this;
        fetch.fetch({
            url:"https://douban.fm/j/v2/playlist?channel=“+this.channelId+“&kbps=192&client=s%3Amainsite%7Cy%3A3.0&app_name=radio_website&version=100&type=n",
            responseType: 'json',
            success: function(response) {
                console.info('response data:' + JSON.stringify(JSON.parse(response.data).song));
                me.data.items = JSON.parse(response.data).song;
            },
            fail: function(data, code) {
                console.info('fail callback');
            },
        })
    }
}

哦，大家注意到沒有，使用的接口變了，獲取頻道的接口用https://douban.fm/j/v2/channels，獲取音樂的接口用了https://douban.fm/j/v2/playlist。
這個我在log里面打印了一下結果，發現song是空數組，如果是相同的鏈接放在瀏覽器里，是可以獲取到song的。
所以我就修改了一下header：

fetch.fetch({
    url:"https://douban.fm/j/v2/playlist?channel="+this.channelId+"&kbps=192&client=s%3Amainsite%7Cy%3A3.0&app_name=radio_website&version=100&type=n",
    responseType: 'json',
    header:{
        Cookie: 'flag="ok"; bid=yG56A3KHR9A; dbcl2="224225133:WtwFP8gIv98"; ck=ctOj',
        UserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36'

    },
    success: function(response) {
        //console.info('response data:' + response.data);
        console.info('response data:' + JSON.stringify(JSON.parse(response.data).song));
        me.data.items = JSON.parse(response.data).song;
    },
    fail: function(data, code) {
        console.info('fail callback');
    },
})

果然帶上cookie和UA之后，順利拿到了song。
接下來就是在music/index .hml里展現出來了。

<div class="container">
    <list>
        <list-item for="{{data.items}}" class="list_item">
            <image src="{{$item.picture}}" class="image"></image>
            <text  class="item"  id="{{$item.s_id}}">{{$item.title}}</text>
        </list-item>

    </list>
</div>

頁面的結構沒有問題，不過樣式我調整了半天。
這里最主要的問題就是image標簽，這是hml里面自帶的組件，根據使用下來的感受，這個image組件跟原生的img標簽可是完全不一樣的：

.image{
    height: 50px;
    width: 50px;
    object-fit: contain; /*設置圖片的縮放形式*/
}

最好是強行設置寬高，目前我還沒太搞清楚這里面的樣式問題。
最后的結果就是：

因為遠程調試，也沒有辦法播放音樂，所以就不做播放功能了，先去嘗試一下其他組件吧。

作者：WebCodingTech
想了解更多內容，請訪問：
51CTO和華為官方戰略合作共建的鴻蒙技術社區
https://harmonyos.51cto.com#bky