好久不见,我又回来啦~今天学习了 Hello HarmonyOS系列课第四期:Hello Ability从页面跳转开始。以上视频就是我的学习成果啦~
以一个“过来人”的身份保证,只要跟着老师一步一步学,实现这个页面跳转真的不难!偷偷告诉你们,以1.5倍速学习,只要半个小时就能学会(此处以小白为衡量标准,如果稍微有点代码基础的,估计10分钟左右即可学会)
现在我把一些重要的步骤分享给大家,供大家学习参考:
hml:写一些控件,进行一个布局设计
css:对每个控件做一个样式的控制
js:用来写逻辑部分
第一步:创建一个button
- <button class="btn" value="To Page2" onclick="toPage2"></button>
复制代码
对样式进行调整
- .btn{
- font-size: 20px;
- width: 300px;
- height: 50px;
- color:#000000 ;
- background-color: cadetblue;
- margin: 10px;
- }
复制代码
逻辑部分,首先需要加载一下
- import router from '@system.router';
复制代码
然后写函数
- toPage2(){
- router.push({
- uri:'pages/page2/page2'
- })
复制代码
new一个page,就可以实现跳转啦~
如果想实现带参数跳转,可以这样操作:
还是建一个button
- <button class="btn" value="To Page2 with Params" onclick="toPage2withParams"></button>
复制代码
逻辑部分
- toPage2withParams(){
- router.push({
- uri:'pages/page2/page2',
- params:{
- title: 'Huawei'
- }
复制代码
就酱,有空再更新……