微信小程序案例TODO備忘錄

微信小程序案例TODO備忘錄

本節展示一個制作todo備忘錄的案例講解

代碼：https://github.com/Harryjun/WeChatPrj/tree/master/TODOPrj

 

 

1.1 頁面布局

頁面布局也就是wxml文件，我們給上述界面做一個划分，大致分為三個部分，第一部分為最上方日期顯示；第二部分為第二欄的輸入框，第三部分為下面的信息框。

 在整體上我們用一個大的view，定義為類container

<view class = "container">



</view>

container我們定義其類屬性為

.container{
  background-color: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

　　背景色設置為白色，寬度100%，彈性布局，豎直排列子項。column代表垂直。

1.1.1 第一層

在第一層我們用一個view框住一個text，里面顯示today日期，利用數據綁定綁定主js中的數據（雙大括號代表數據綁定的意思，也就是里面是變量名，他會同步js中的數據，例如這里綁定today，則我們再js代碼中可以改變today的值，這里會不斷更新數據。）

<view class = "container">
  <view class = "today">
    <text>{{Today}}</text>
  </view>
</view>

 對應的wxss代碼如下：

.today{
  font-size: 10px;
}

　　將其字體設置好即可

 

1.1.2 第二層

 第二層我們用一個view包含兩個控件，

一個是image，image需要綁定圖片源。

另一個是input輸入框，輸入框需要綁定兩個函數1）輸入信息觸發bindinput='AddInput'此時輸入一個字符，我們應該更新以下輸入框的內容2）確定觸發函數bindconfirm='AddConfirm'此函數應該觸發保存信息，並創建一個新的備忘。輸入框的value我們數據綁定到js中的input數據。placeholder代表數據為空時顯示的字符，也就是提示。

 <view class = "additem">
    <view class = "add">
      <image class = 'plus' src = '../../images/plus.png' />
      <input value = "{{input}}" auto-focus  class = "InputAdd" placeholder='再次輸入一個新計划' bindinput='AddInput' bindconfirm='AddConfirm'/>
    </view>  
  </view>

 

對應的wxss代碼：

.additem{
  width: 100%;
}
.add{
  display: flex;
  flex-direction: row;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  box-shadow: 0 0 5rpx #e0e0e0;
  margin-bottom: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: 30rpx;
  padding: 20rpx;
}
.plus{
  width: 41rpx;
  height: 41rpx;
  padding-right: 20rpx;
}
.InputAdd{
  padding-left: 20rpx;
  font-size: 28rpx;

}

　　

1.1.3 第三層

第三層我們用一個view包括所有的信息，然后再用循環把所有的信息遍歷，每一條信息橫排，包括復選框（代表是否完成）、信息（反應備忘的內容）、刪除圖標（刪除信息內容）

1）其中我們再wx:for中需要回饋id我們讓id等於index的值，這樣在點擊事件函數中就能獲取到id信息就知道時數組的第幾條信息了。，然后為他綁定點擊函數toggleTodoHandle，如果點擊某一條信息我們就讓其變為完成狀態。；

2）復選框的類型  type屬性我們用了一個問號表達式item.completed ? 'success' : 'circle'代表如果？前面的表達式為true則其值為冒號前的表達式或者字符如果未false則未冒號后面的字符。所以此處的意思時如果已經完成我們就將icon類型設置為成功，如果未完成則設置未圓圈。

<view class = "todo-today1">
    <view class = "todo-today">
      <view class = "today-item" wx:for = "{{TodayList}}" wx:key="{{ index }}" bindtap="toggleTodoHandle" id = "{{index}}"   >
        <icon class = "itemcheckbox"   type = "{{item.completed ? 'success' : 'circle'}}"   color="white"/>
        <text class = "{{item.completed ? 'itemdescriptiontcompleted':'itemdescriptiont'}}" >{{item.description}}</text>
        <icon class = 'itemremove' type = 'clear' size = '20' color = "white" bindtap="removeTodoHandle" id = '{{index}}' />
     </view>
   </view>
 </view>

　　

其wxss代碼如下：

.todo-today{
  font-size: 15px;
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  vertical-align: center;
  margin: 2px;
}
.todo-today1{
  width: 100%;
}
.today-item{
  display: flex;
  flex-direction: row;
  padding: 20rpx;
  background-color: #00a2ea;
  border: 10rpx solid white;
  border-radius: 20rpx;
}
.itemdescriptiont{
  flex: 1;
  font-size: 40rpx;
  color: white;
}
.itemdescriptiontcompleted{
  flex: 1;
  text-decoration: line-through;
  font-size: 40rpx;
  color: white;
}
.itemremove{
  cursor: pointer;
  padding-top: 7rpx;
}
.itemcheckbox{
  margin-right: 20rpx;
}

　　

1.2 JAVAScript代碼端

此部分代碼主要設計幾個函數

1、onLoad函數（初始化數據）2、刪除數據3、增添數據4、輸入框輸入數據觸發

5、保存數據到本地    6、調取本地數據

 

1.2.1 數據

在page-data中定義了全局數據

總共三個數據   ：備忘錄列表、日期、輸入框信息

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    TodayList:[],
    Today:"",
    input:""
  },
}）

　　

1.2.2數據保存到本地與獲取本地數據

 

  /**
   * 存儲列表數據函數
   */
  save:function(){
    wx.setStorageSync('TodayList', this.data.TodayList);
  },

  loadData:function(){
    var todo = wx.getStorageSync('TodayList');
    if(todo){
      this.setData({
        TodayList: todo
      });
    }

  },

　　

1.2.3 數據增加

利用數組的push函數。

/**
   * 增加一條記錄
   */
  AddConfirm:function(e){
    var that = this;
    var todo = this.data.TodayList;
    todo.push({description:this.data.input,completed:false})
    //更新數據
    that.setData({TodayList:todo,input:''});
    //輸出日志信息
    console.log(this.data.TodayList)
    //保存記錄到本地
    this.save();
  },

　　

1.2.4 刪除數據

利用數組的splice方法。

/**
   * 清除一條記錄
   */
  removeTodoHandle:function(e){
    var todo = this.data.TodayList;
    var index = e.currentTarget.id;
    //刪除數據
    todo.splice(index,1);
    console.log(todo);
    //設置數據
    this.setData({
      TodayList:todo
    });
    this.save();
  },

　　

1.2.5 更改任務狀態

 

  /**
   * 更改任務狀態
   * */
  toggleTodoHandle: function (e) {
    var todo = this.data.TodayList;
    //獲取e傳輸的id
    var index = e.currentTarget.id;
    //改變complete狀態
    todo[index].completed = !todo[index].completed;
    //更改數據
    this.setData({
      TodayList:todo
    });
    this.save();
  },

　　

 

 

1.2.6 生命周期函數

此函數主要用來更新時間，可以看一下date類型

然后獲取本地數據。

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    //計算日期
    var that = this;
    var date1 = new Date;
    var date2 = new Array("星期日","星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var Today;
    Today = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + '   ' + (date2[date1.getDay()]);
    var TodayStorage = wx.getStorageSync("Today");
    if (TodayStorage != Today){
      wx.setStorageSync("Today", Today);
    }
    that.setData({
      Today:Today
    });

    //獲取本地存儲日志
    this.loadData();

    


  },

　　

js代碼相對簡單。