微信小程序的学习

微信小程序的开始尝试 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">

    
    
         
     
      全部
         
         
     
      未完成
         
     
      已完成
     
    
    
    
     添加
    

</view>

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

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

            
     
            
                  
      
       {
   {item.title}}
                  
      
       {
   {item.time}}
              
     
    
    

</scoll-view>

3/addForm

<view class="addForm {

{addShow?'hide':''}}">

            
             
                 
      确定添加            
      取消        
         
    

</view>

---

wxml 是一个模板 {

{数据状态}} 数据的绑定

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

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

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

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

---

话不多说

数据 对应着 界面状态

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

界面状态,全部被data接管起来

当前点击条目的status要变成 success 数据 lists 跟当前条目相关的数据 将status的值 更新为 1

---

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