js跳转页面时添加header_鸿蒙应用开发踩坑记之路由跳转

本来打算先搞地图方面的开发，但是遇到一些，已经在官方论坛发帖求助了：

关于JS UI开发的一些问题developer.huawei.com

大家如果对鸿蒙应用开发有兴趣，也去帮我催催官方吧。

这两天Mac OS发布了最新的版本，鸿蒙的开发工具也发布了mac版本，这两件事稍许冲淡了我在鸿蒙应用开发中遇到的不快。

今天就来继续做一下路由跳转。

这个功能就在之前的项目基础上做，请参考我之前的文章：

James：鸿蒙系统应用开发之JS实现一个简单的Listzhuanlan.zhihu.com

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

"js"

js是在config的module中，js UI项目生成的时候会已经有了。

接下来就在js/page文件夹下增加这个music文件夹，需要新建的文件和index下一致。

然后我们就可开始改造之前的index部分。

这个时候出现了问题，我要怎么把频道id传给这个函数呢？

翻了下文档，我发现官方并没有明确说明箭头函数或者bind方法能不能用。

那我就姑且当作可以吧。

尝试之后，两个都不行……

这个onclick里面只能放函数名……

好吧，于是我修改了一下：

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

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

goto

这个事件响应总是要传一个event对象的，从event对象上拿到target，就可以拿到这个id了。

哦，别忘记在index.js引入router：

import

然后用push方法跳转到相应的页面，可以把参数带过去，params下的channelId会直接放在music/index的data里面。

import

哦，大家注意到没有，使用的接口变了，获取频道的接口用https://douban.fm/j/v2/channels，获取音乐的接口用了https://douban.fm/j/v2/playlist。

这个我在log里面打印了一下结果，发现song是空数组，如果是相同的链接放在浏览器里，是可以获取到song的。

所以我就修改了一下header：

fetch

果然带上cookie和UA之后，顺利拿到了song。

接下来就是在music/index .hml里展现出来了。

页面的结构没有问题，不过样式我调整了半天。

这里最主要的问题就是image标签，这是hml里面自带的组件，根据使用下来的感受，这个image组件跟原生的img标签可是完全不一样的：

最好是强行设置宽高，目前我还没太搞清楚这里面的样式问题。

最后的结果就是：

因为远程调试，也没有办法播放音乐，所以就不做播放功能了，先去尝试一下其他组件吧。

js跳转页面时添加header_鸿蒙应用开发踩坑记之路由跳转相关推荐

微信小程序跳转页面后onload中获取到的参数值和跳转页面时传的参数不一样
channel是一个从后端获取的被加密的一个字符串且已经被encode,我不对其进行修改,只在页面中跳转时带上这个参数,有接口需要传给后端这个参数时,传给他decodeURIComponent(cha ...
微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记移动端的样式问题「1. 安卓 font-weight:700;以上才被认为是加粗.」「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
Android基础知识（二十）：Notification、提醒式通知（横幅）踩坑与通知界面设置跳转
Android基础知识(二十):Notification.提醒式通知(横幅)踩坑与通知界面设置跳转一.Notification通知与基本用法通知Notification是Android系统中比较有 ...
梅科尔工作室-寒假培训-鸿蒙第四课-官方API、路由跳转、数据请求、弹窗、事件。
一.官方API:官方的一些接口,可以在官网查看,然后给界面增加更多功能. 可以在官网的接口参考里查看:点击事件-通用事件-组件通用信息-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参 ...
c++ 跳转到上级目录_Windows漏洞利用开发第4部分：使用跳转定位Shellcode 模块
概观在第2和第3部分中,我们构建并改进了ASX To MP3转换器的一个漏洞利用.尽管它存在缺陷,但就漏洞而言,它非常简单直接-- 直接利用指向我们shellcode的寄存器从而直接跳转到EIP覆盖 ...
使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮和显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...
thymeleaf 使用页面报错_SpringBoot 使用thymeleaf 跳转页面时，总是提示404找不到页面...
Thymeleaf的使用和版本关系很大,如果路径配置正确却一直无法正常返回,可能就是版本错误导致. 想构建简单页面跳转,正常跳转index.html,404和500跳转到专门的页面,配置正确,路径也正 ...
html中加页眉,在打印HTML页面时添加页眉/页脚
你需要用你的整个内容的表里面,像功率: HTML ...并添加以下CSS: @media print { thead { display: table-header-group; } tfoot { ...

js跳转页面时添加header_鸿蒙应用开发踩坑记之路由跳转

js跳转页面时添加header_鸿蒙应用开发踩坑记之路由跳转相关推荐

最新文章

热门文章