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

1.应用开发目录介绍

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

components，自定义组件

pages.index，页面

app.js，入口

2.页面结构设计

页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。

文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。

可以直接调用鸿蒙 JS 封装好的组件

页面 CSS 支持 id、class、tag 选择器，建议使用 class 选择器。

页面样式系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。

鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异，这个尤其需要注意。

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

3.自定义组件

需要定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。

设置底部选项卡对应的 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值确定跳转位置

OpenHarmony JS 前端开发基础入门教程总结相关推荐

【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开效 ...
vue视频教程（Vue.js前端开发基础与项目实战）
适合人群: 适合网页设计与制作人员.网站建设开发人员.院校相关专业的学生.个人网站制作爱好者学习计划: 1.建议每天学习两小时 2.课堂代码可在附件中下载课程目标: 学习Vue前端框架,能使用Vu ...
Android开发基础入门教程
https://www.runoob.com/w3cnote/android-tutorial-android-studio.html
前端开发从入门到进阶完全指南，不用再迷茫前端要怎么学啦！
我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域.每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题. 作为程序员, ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
Python基础入门教程：Day21-30/Web前端概述
Python基础入门教程:Web前端概述说明:本文使用的部分插图来自 Jon Duckett 先生的*HTML and CSS: Design and Build Websites*一书,这是一本非 ...

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

OpenHarmony JS 前端开发基础入门教程总结相关推荐

最新文章

热门文章

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

OpenHarmony JS 前端开发 基础入门教程总结相关推荐

最新文章

热门文章

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

OpenHarmony JS 前端开发基础入门教程总结相关推荐