HarmonyOS创建一个page并实现界面跳转(JavaScript)

2023-12-13 03:49:01

上文 HarmonyOS创建JavaScript(类 Web开发模式)项目中 我们接触了这咋类Web开发模式
并创建了一个项目
之前 我们 ArkTS 开发模式的项目 resources目录 下的 base目录下的 profile目录下的 main_pages.json中存放了 我们page目录的配置
但是 我们javaScript模式 下 好像没有哦
在这里插入图片描述
我们项目 main目录下有一个 config.json
里面就有page的相关配置
在这里插入图片描述
这里 我们的操作依旧是 在pages目录下 右键 选择 new一个page
在这里插入图片描述
我们输入一下page名称 然后 点击 Finish 创建
在这里插入图片描述
这样 我们就创建完成了
在这里插入图片描述
这里 我们将 pages目录下的 index下的 index.hml 代码改写如下

<div class="container">
    <text class="title">
        首界面 index
    </text>
    <button class = "button">去第二个界面</button>
</div>

这里 我们将原本的响应式数据 换成了文字 首界面 index 看着方便
然后下面放了一个 button 按钮 class名改为button
然后 css中这样写
在这里插入图片描述
这里 我们给 class名为button 添加了 高宽 字体大小的样式 这些 学过css的人自然都很容易看懂

这样我们预览界面效果就是这样的
在这里插入图片描述
然后 我们将index的js更改如下

import router from '@ohos.router';
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    goTowPage() {
        router.pushUrl({
            url: "pages/two/two"
        })
    }
}

这里 我们导入了 router模块 然后 定义了一个叫goTowPage的函数 跳转向 "pages/two/two"路由
这里 可以看到 router跳转的方式和ArkTS模式的项目还是一样的

然后 我们click绑定给 button一个点击事件 点击触发goTowPage函数
在这里插入图片描述
但是点击后 你会发现跳转不了

我们将 js中 router.pushUrl 改成 router.push 就OK了
但是 官方编辑器 明确提示 push 函数是将被淘汰的 不推荐使用语法
但是 你推荐的不能跳转 不推荐的可以跳转 真的就很离谱

也希望鸿蒙官方工程师能够早日注意到这个问题

总归换了之后点击就可以正常跳转了
在这里插入图片描述
调回上一个界面 就 router.back() 就可以了

文章来源:https://blog.csdn.net/weixin_45966674/article/details/134896886
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。