鸿蒙系统开发笔记 (一)

1.安装开发工具

2.安装node.js

3.创建工程

4.页面结构设计

    待办事项    
 8点产品需求会议  删除    
    
 9点开始开发工作  删除    
    
 18点  删除    
    
 您还有 2 件事情待办，加油！    
    
  添加待办    

5.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;}

6.json数据源

export default [    { info: '给老王打个电话', status: true    },    { info: '输出工作计划', status: false    },    { info: '和小王对接需求', status: true    },    { info: '整理客户资料', status: false    },    { info: '和朋友一起聚餐', status: false    }]