界面结构设计

通过对微信小程序的学习，我们简单通过所学的知识设计一个TODOS案例，整个TODOS包括添加事件功能，标记功能，删除事件功能，标记所有功能，剩余事件提醒功能以及清除所有事件功能。

本片微博将分为14篇对本案例过程进行详细介绍。

下面开始第一部分：界面结构设计。

首先在pages中新建todos页面以及内容

在app.json中注册主页面以及导航栏的标题

{
    "pages": [
        "pages/todos/todos"
        
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "TODOS",
        "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json"
}

接下来，我们根据界面图先设计好框架

整个界面可分为上中下三部分：

第一部分包括添加事件按钮，input输入框

第二部分包括事件完成勾选icon，事件展示text，以及事件清除icon

第三部分为底部事件提醒以及功能按钮

<view class="container">
    <view class="search">
        <image src="../../images/plus.png" ></image>
        <input type='text' placeholder='Anything here ...'></input>
    </view>
    <view class="todos">
        <view class='item'>
            <icon type='success'></icon>
            <text>Learning HTML</text>
            <icon type='clear'></icon>
        </view>
        <view class='item'>
            <icon type='circle'></icon>
            <text>Learning CSS</text>
            <icon type='clear'></icon>
        </view>
        <view class='item'>
            <icon type='success'></icon>
            <text>Learning JS</text>
            <icon type='clear'></icon></view>
    </view>
    <view class="footer">
        <text>Toggle ALL</text>
        <text>0 item left</text>
        <text>Clear</text>
    </view>

</view>

代码中的text文档暂时用文字代表，之后通过事件绑定进行渲染

整个框架搭建完成后如图所示