哎嘿！我实现了页面跳转功能！ - HarmonyOS技术社区 - 电子技术william hill官网 - 广受欢迎的专业电子william hill官网 - 威廉希尔官方网站
分享 收藏 返回

玩硬件的女孩纸 关注 私信
[文章]

哎嘿！我实现了页面跳转功能！

好久不见，我又回来啦~今天学习了 Hello HarmonyOS系列课第四期：Hello Ability从页面跳转开始。以上视频就是我的学习成果啦~

以一个“过来人”的身份保证，只要跟着老师一步一步学，实现这个页面跳转真的不难！偷偷告诉你们，以1.5倍速学习，只要半个小时就能学会（此处以小白为衡量标准，如果稍微有点代码基础的，估计10分钟左右即可学会）

现在我把一些重要的步骤分享给大家，供大家学习参考：

hml：写一些控件，进行一个布局设计
css：对每个控件做一个样式的控制
js：用来写逻辑部分

第一步：创建一个button

对样式进行调整
  1. .btn{
  2.     font-size: 20px;
  3.     width: 300px;
  4.     height: 50px;
  5.     color:#000000 ;
  6.     background-color: cadetblue;
  7.     margin: 10px;
  8. }

逻辑部分，首先需要加载一下
  1. import router from '@system.router';

然后写函数
  1. toPage2(){
  2.     router.push({
  3.     uri:'pages/page2/page2'
  4.     })

new一个page，就可以实现跳转啦~

如果想实现带参数跳转，可以这样操作：

还是建一个button

逻辑部分
  1. toPage2withParams(){
  2. router.push({
  3. uri:'pages/page2/page2',
  4. params:{
  5.        title: 'Huawei'
  6. }

现在就成功的把参数值传到了第二个页面并进行显示。有感兴趣的伙伴儿们可以前往华为开发者课堂搜索《Hello HarmonyOS系列课》或点击链接华为开发者学堂-【Hello系列直播课】第4期：从页面跳转开始 (huawei.com)进行学习。

就酱，有空再更新……

回帖（2）

a317753901

2022-6-20 11:18:07
阿大声道sad阿萨德阿萨德阿萨德按时

shijinqi

2022-8-3 17:33:29
大神，  我在index.js中加入一行代码“import router from '@system.router';”，  然后运行就白屏了。   知道是什么原因吗？

更多回帖

我也要说两句 回帖

相关经验

×
发帖