> 文档中心 > OpenHarmony JS 前端开发 基础入门教程总结

OpenHarmony JS 前端开发 基础入门教程总结

1.应用开发目录介绍

common,公共文件主要存放图片,json等基础数据

components,自定义组件

pages.index,页面

app.js,入口

2.页面结构设计

  • 页面结构使用 HTML 相同的标签进行嵌套,最外层是 div 容器。
  • 文本内容放在标签中才能呈现,否则不会呈现文本内容。
  • 可以直接调用 鸿蒙 JS 封装好的 组件
  • 页面 CSS 支持 id、class、tag 选择器,建议使用 class 选择器。
  • 页面样式系统基于 flex 弹性布局进行设置,默认就是 flex 弹性布局,需要注意,弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
  • 鸿蒙封装的 JS 组件,有一个专门的样式说明,这个和我们传统的 CSS 写法有很大的差异,这个尤其需要注意。

第三方 JSON 数据导入,注意使用相对路径

3.自定义组件

  1. 需要定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css,需要注意的是:3个文件的文件名必须保持一致,不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
  2. 设置底部选项卡对应的 json 数据源,用来保存 icon 图片、标题,以及点击选中后的 icon 图片。

4.父组件向子组件传值

  • Props 自定义组件可以通过 props 声明属性,父组件通过设置属性向子组件传递参数,camelCase(驼峰命名法)的 prop 名,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名)形式,即当属性compProp 在父组件引用时需要转换为 comp-prop。

  • 添加默认值,子组件可以通过固定值 default 设置默认值,当父组件没有设置该属性时,将使用其默认值。此情况下 props 属性必须为对象形式,不能用数组形式。

  • 数据单向性,父子组件之间数据的传递是单向的,只能从父组件传递给子组件,子组件不能直接修改父组件传递下来的值,可以将 props 传入的值用 data 接收后作为默认值,再对 data 的值进行修改

5.页面

switch(index){  case 0:      router.push({   uri:"pages/index/index",   params:{info:"111"   }      });      break;

通过不同页面设置的case值确定跳转位置