初学微信小程序 TodoList

Posted sfornt

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学微信小程序 TodoList相关的知识,希望对你有一定的参考价值。

微信小程序的学习

微信小程序的开始尝试 TodoList


微信开发者工具生成 目录如下:


.
|-- app.js
|-- app.json
|-- app.wxss
|-- pages     
|   |-- index   # 主页
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   `-- log # 日志页面
|   |   |-- log.js
|   |   |-- log.json
|   |   |-- log.wxml
|   |   `-- log.wxss
`-- utils       # 工具
    `-- util.js

大体为:
每一个page即是一个页面文件 ,每个页面有一个js/wxml/wxss/json文件 规定:描述页面的这四个文件必须具有相同的路径与文件名。

全局下同路,为公共的逻辑,样式,配置

html不同:用view text navigator 代替 div span a
官方文档

*.wxml: 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ...

好,那现在正式尝试TodoList~


开始完成wxml ,我在这里主要分成三部分
1.titleBar

<view class="titleBar">

&lt;div class="status"&gt;
    &lt;!-- wxml 是一个模板 {{数据状态}} 数据的绑定
动态的 可编译的 活的  data 是活的 setData  只要状态一变 界面立即改变 --&gt;
    &lt;text class="{{status=='1'?'active':''}}" data-status="1" bindtap="showStatus"&gt;全部&lt;/text&gt;
    &lt;!--用data- 表示数据属性--&gt;
    &lt;text class="{{status=='2'?'active':''}}" data-status="2" bindtap="showStatus"&gt;未完成&lt;/text&gt;
    &lt;text class="{{status=='3'?'active':''}}" data-status="3" bindtap="showStatus"&gt;已完成&lt;/text&gt;
&lt;/div&gt;
&lt;div class="add"&gt;
    &lt;button class="mini-btn" size="mini" type="warn" bindtap="addTodoShow"&gt;添加&lt;/button&gt;

&lt;/div&gt;

</view>

2/scoll-view scroll-y class="lists"

<scoll-view scroll-y class="lists">

    &lt;view class="item" wx:for="{{curLists}}" wx:key="index"&gt;
        &lt;div class="content"&gt;
            &lt;icon class="icon-small" bindtap="changeTodo" data-item="{{index}}" size="23" type="{{item.status ==='1'? 'success':'circle'}}"&gt;&lt;/icon&gt;
            &lt;text class="title"&gt;{{item.title}}&lt;/text&gt;
            &lt;text class="time"&gt;{{item.time}}&lt;/text&gt;
        &lt;/div&gt;
    &lt;/view&gt;

</scoll-view>

3/addForm

<view class="addForm {{addShow?‘hide‘:‘‘}}">

    &lt;view class="addForm-div"&gt;
        &lt;input type="text" placeholder="请输入任务" class="weui-input" bindinput="setInput" value="{{addText}}" /&gt;
        &lt;view class="addForm-btn"&gt;
            &lt;button type="warn" size="mini" class="weui-btn mini-btn" bindtap="addTodo"&gt;确定添加&lt;/button&gt;
            &lt;button type="default" size="mini" class="weui-btn mini-btn" bindtap="addTodoHide"&gt;取消&lt;/button&gt;
        &lt;/view&gt;
    &lt;/view&gt;
&lt;/view&gt;

</view>


wxml 是一个模板 {{数据状态}} 数据的绑定


    动态的 可编译的 活的  data 是活的 setData  只要状态一变 界面立即改变  
    我们在这里使用了data 来表示数据属性

写完了wxml 那让我们加上wxss样式看看效果把

TodoList wxss

在wxss中我们使用了弹性布局flex:1, 这种布局的方式使得我们不用计算大小了

我们当然不能只做一个切图仔啦


话不多说看看js的实现部分

数据 对应着 界面状态


 默认的status是1是全部
 setData改变 比如改成2 setData 2 已完成 3 未完成

界面状态,全部被data接管起来
当前点击条目的status要变成 success 数据 lists 跟当前条目相关的数据
将status的值 更新为 1


这样一个简单的TodoList框架就做好了















以上是关于初学微信小程序 TodoList的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序的简单应用-Todolist

微信小程序简版(todolist)实现

微信小程序简版(todolist)实现

微信小程序简版(todolist)实现

微信小程序Todolist demo

微信小程序代码片段