zoukankan      html  css  js  c++  java
  • 初学微信小程序 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框架就做好了

  • 相关阅读:
    .NET Interop 工具集
    关于正弦波的算法
    Windows Phone 系列 本地数据存储
    Xaml cannot create an instance of “X”
    Windows Phone 系列 使用 MVVM绑定时无法获取当前值
    Windows Phone 系列 应用程序图标无法显示
    Windows Phone 系列 WPConnect无法上网的问题
    Windows Phone 系列 使用 Windows Phone 保存铃声任务
    WP7.5提交应用
    Windows Phone 系列 动态删除ObservableCollection
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9911240.html
Copyright © 2011-2022 走看看