梅科尔工作室-HarmonyOS应用开发

小小程序猿scz

已于 2022-07-13 20:13:57 修改

阅读量317

点赞数 1

文章标签： harmonyos 华为

于 2022-06-11 23:49:57 首次发布

本文链接：https://blog.csdn.net/qq_59332194/article/details/125239493

版权

1.安装配置

安装教程

(17条消息) 鸿蒙应用开发：安装DevEco Studio及环境配置_czx鑫的博客-CSDN博客_deveco

开发文档
。工具简介-HUAWEI DevEco Studio For HarmonyOS使用指南-工具-HarmonyOS应用开发

学习视频

鸿蒙2.x系统应用开发前端基础入门教程-12集全完结_哔哩哔哩_bilibili

技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发基础入门教程-完结 (jspang.com)

应用开发目录简介

文件使用规程

引用代码文件，需使用相对路径，比如：../common/utils.js。
引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。
公共代码文件和资源文件推荐放在 common 下，通过以上两条规则进行访问。
如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。

组件

pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。
配置路由，在 config.json 这个文件里面。
预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。
出现预览错误修改后，刷新无效，必须重新启动预览器才能正常显示，点击右侧收起再展开即可。

模拟器模拟

chart组件

调整 chart 组件的相关参数，需要注意 xAxis 的 axisTick 参数设置过小，会出现数据丢失情况。

image-animator 组件

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

创建一个新的 Ablity ，新起一个抽象能力的应用服务，不同的 Ablity 之间可以通过 PA 进行调用。

Ablity 是应用所具备能力的抽象，也是应用程序的重要组成部分。Ablity 由一个或多个 FA（Feature Ability）或 PA（Particle Ability）组成。其中，FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象。

配置 Ability 对应的基础参数

打开 pages.index.index.hml 启动预览器，对页面进行预览，输出基础 "你好世界" 页面。
在阿里图标库内下载 5 张心形图片，5 张图片需要注意对应不同的大小。
在 index.hml 文件中导入官方文档中示例中对应的页面结构代码
导入官方文档中示例中css 样式文件
设置图片文件 data model 并 export 出来 common.datas.imgs.js，在 index.js 文件中导入图片模块，并写入相应逻辑，需要注意的是使用 $ref 获取到当前动画的节点对象。然后调用其对应的方法。
图片无法正常显示，相对路径无法查找到文件位置，是因为 index.js 引入模块后，相对路径发生了变化，修改对应的路径。
图片动画并未出现，为什么呢？因为图片的渲染机制是直接更改到对应的大小，所以，我们需要保证心形在图片中占有的位置，使用截图工具截图后，终于出现了心形跳动的结果

todolist应用构建

（1）页面结构设计注意事项

页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。
文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。
可以直接调用鸿蒙 JS 封装好的组件，这里我们使用的是 switch 组件。

<div class="container">
    <text class="title">待办事项</text>
    <div class="item">
        <text class="todo">8点产品需求会议</text>
        <switch showtext="true" checked="true"
                texton="完成" textoff="待办"
                class="switch"></switch>
        <button class="remove" onclick="remove($idx)">删除</button>
    </div>
    <div class="item">
        <text class="todo">9点开始开发工作</text>
        <switch showtext="true" checked="false"
                texton="完成" textoff="待办"
                class="switch"></switch>
        <button class="remove" onclick="remove($idx)">删除</button>
    </div>
    <div class="item">
        <text class="todo">18点</text>
        <switch showtext="true" checked="false"
                texton="完成" textoff="待办"
                class="switch"></switch>
        <button class="remove" onclick="remove($idx)">删除</button>
    </div>
    <div class="info">
        <text class="info-text">您还有</text>
        <text class="info-num">2</text>
        <text class="info-text">件事情待办，加油！</text>
    </div>
    <div class="add-todo">
        <input class="plan-input" type="text"></input>
        <button class="plan-btn" onclick="addTodo">添加待办</button>
    </div>
</div>

（2）页面样式设计注意事项

页面 CSS 支持 id、class、tag 选择器，建议使用 class 选择器。
页面样式系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异，这个尤其需要注意。

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 100px;
}
.title {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
        font-size: 28px;
}
.item{
    width: 325px;
    padding: 10px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
}
.todo{
    color: #000;
    width: 180px;
    font-size: 18px;
}
.switch{
    font-size: 12px;
    texton-color: green;
    textoff-color:red;
    text-padding: 5px;
    width: 100px;
    height: 24px;
    allow-scale: false;
}
.remove {
    font-size: 12px;
    margin-left: 10px;
    width: 50px;
    height: 22px;
    color: #fff;
    background-color: red;
}
.info{
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}
.info-text {
    font-size: 18px;
    color: #AD7A1B;
}
.info-num{
    color: orangered;
    margin-left: 10px;
    margin-right: 10px;
}
.add-todo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #ddd;
}

.plan-input {
    width: 240px;
    height: 40px;
    background-color: #fff;
}
.plan-btn {
    width: 90px;
    height: 35px;
    font-size: 15px;
}

（3）数据渲染与事件绑定

第三方 JSON 数据导入，注意使用相对路径
export default [
    {
        info: '给老王打个电话',
        status: true
    },
    {
        info: '输出工作计划',
        status: false
    },
    {
        info: '和小王对接需求',
        status: true
    },
    {
        info: '整理客户资料',
        status: false
    },
    {
        info: '和朋友一起聚餐',
        status: false
    }
]
import todoList from "../../common/datas/todoList.js"
数据绑定

与vue用法类似

hml {{ 变量名 }}

js 变量放在 data 中
export default{
    data:{
        变量名： value
    }
}
列表渲染（for)

tid 属性指定数组中每个元素的唯一标识，默认值为 id，用于加速for循环的重渲染。

写法1（都不指定）：<div for="{{array}}" tid='id'></div> ,$idx代表元素索引，$item代表数组元素

写法2（指定元素名称）：<div for="{{value in array}}" tid='id'></div>，$idx 代表元素索引，value 代表数组元素

写法3（指定索引和元素名称）：<div for="{{(index,value) in array}}" tid='id'></div> ，index代表元素索引，value代表数组元素。

事件绑定

类似 v-on，在 js 中绑定的函数和 data 同级

hml：<div onclick="clickfunc"></div> 或 <div @click="clickfunc"></div>

js：放在 data 后:
export default{
    data:{
    },
    clickfunc: function(){
        ......
    }
}
使用计算属性 computed 和 Vue 中的用法一样，依赖 data 中的数据进行计算，return 返回计算的结果。
import todoList from "../../common/datas/todoList.js"
export default {
    data: {
        // 待办事件列表
        todoList,
        inputTodo: "IDE无法调用输入"
    },
    computed: {
        needTodoNum(){
            let num = 0;
            this.todoList.forEach(item => {
                if(!item.status){
                    num++;
                }
            });
            return num;
        }
    },
    remove(index){
        console.log(index)
        this.todoList.splice(index,1)
    },
    addTodo() {
        console.log("在这里设置一个新值");
        this.todoList.push({
            info:'键盘输入',
            status: false
        })
    },
    checkStatus(index){
        console.log(index);
        this.todoList[index].status = !this.todoList[index].status;
    }
}