梅科尔工作室-HarmonyOS应用开发第三次培训(实现主页面)

目录

1.准备工作

1.1.要设计的页面与什么有关

1.2.这个页面有什么东西

1.3.准备好相关数据

1.4.创建页面各部分文件夹

2.页面设计

2.1.主页面代码

2.2.轮播图

2.3.热门分类

2.4.精品推荐

2.5.各个部分样式的设计

3.逻辑的设计

3.1.在各个子部件的js中直接导入

3.2.通过父组件向子组件传参的性质将父组件的数据传入到子组件中

3.2.1.父组件接收数据

3.2.2.子组件接收


 

 

1.准备工作

1.1.要设计的页面与什么有关

        设计一个有关食品推荐的主页面

1.2.这个页面有什么东西

(1)标题“美食大全”

(2)轮播图播放一些菜品

(3)热门分类

(4)精品好菜(展示各个菜品受欢迎程度,多少浏览,多少收藏)

1.3.准备好相关数据(可以采用json格式)

4148e40594af4458b2d1c7530062bb17.png

f3e2fd38d3294576ac69b85954838f53.png

1.4.创建页面各部分文件夹(将他们视为部件)(轮播图,热门分类,精品推荐)

7d3739399dec49aca181e1efede54425.png

2.页面设计

各个部件的使用可以参考官网

通用属性-通用-组件-基于JS扩展的类Web开发范式-手机、平板、智慧屏和智能穿戴开发-JS API参考-HarmonyOS应用开发

2.1.主页面代码

7caf6cf741914aa386125b180d6355f6.png

2.2.轮播图

2e3eb28e3d734a1bbc1481894d93a499.png​ 

2.3.热门分类

a32a8b5f056140c09878dcb3f76c8ff3.png​ 

2.4.精品推荐

b010ef8782bd4691a14b2c0892e6a546.png​ 

2.5.各个部分样式的设计

这个可以根据自己的需要进行设计, 这个样式的设计同样影响着页面代码的设计。

3.逻辑的设计

最重要的就是如何将数据传到相应的部件

3.1.在各个部件的js中直接导入

950ae1c0ef2047c1b1916f66b3805e7b.png

        从其他文件导入的list在onready时赋值给this.list也就是data中的list,然后就可以在这个部件的页面(hml)文件中通过{{list}}进行使用,内部值要{{$item.名称}}引用,可以通过slice进行分割(左闭右开)

3.2.在页面js中导入,再通过父组件向子组件传参的性质将父组件的数据传入到子组件中

        多用于多个组件用同一个文件夹数据时

3.2.1.父组件接收数据(在主页面js文件中导入)

6947335a5bb04ed3b0256bb9dc319dae.png

c06f467bf8104f16ae7d9033cc15585f.png​ 

3.2.2.子组件接收

接收后的list可以直接在子组件页面使用

4ba4743c5a274691ac6e3d0395a16204.png

 

 

 

 

 

 

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

星如雪_梭如月

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值