微信小程序TodoList使用教程

小程序TodoList實(shí)戰(zhàn)教程，看完官方的文檔介紹后，就想找個(gè)簡(jiǎn)單的例子來(lái)驗(yàn)證實(shí)現(xiàn)一下，TodoList MVC就很好了，簡(jiǎn)單容易。

之前都用JQ、Backbone、vue簡(jiǎn)單擼過(guò)，大概功能如下：

添加todo
儲(chǔ)存在應(yīng)用緩存
列表展示
區(qū)分狀態(tài)顯示：全部、未完成、已完成
改變todo狀態(tài)
刪除todo

 

1小程序手指縮放圖片開(kāi)發(fā)過(guò)程

下載小程序開(kāi)發(fā)工具：開(kāi)發(fā)者工具下載

安裝完成后，使用微信掃一掃登錄，選好文件夾后創(chuàng)建即可，開(kāi)發(fā)工具會(huì)自動(dòng)生成以下目錄：

pages/

app.js

app.json

app.wxss

文錄結(jié)構(gòu)和具體配置查看官方文檔：mp.weixin.qq.com/debug/wxado…

2基本配置

由于平時(shí)開(kāi)發(fā)習(xí)慣用Less，如果在直接使用小程序的wxss來(lái)編寫(xiě)的話，就恢復(fù)原生編寫(xiě)方式，大大的不便，所以直接使用了gulp來(lái)實(shí)時(shí)編譯Less，和修改文件名為wxss。小程序開(kāi)發(fā)工具是不支持Less，直接用vscode來(lái)開(kāi)發(fā)，小程序開(kāi)發(fā)工具是用實(shí)時(shí)預(yù)覽和調(diào)試即可，vscode也有豐富的插件支待小程序語(yǔ)法提示。

// gulpfile.js
var gulp = require('gulp')
var less = require('gulp-less')
var plumber = require('gulp-plumber')
var rename = require('gulp-rename')

gulp.task('less', function () {
  return gulp.src('./app.less')
    .pipe(plumber())  // 錯(cuò)誤處理
    .pipe(less()) // 編譯less
    .pipe(rename((path) => path.extname = '.wxss')) // 編譯后生成文件修改后綴為.wxss
    .pipe(gulp.dest('./'));
});
gulp.watch('./app.less', ['less']); // 實(shí)時(shí)監(jiān)控app.less文件變化，運(yùn)行任務(wù)

UI組件也直接引用了小程序支持的weui-wxss

@import "./weui.wxss";

在app.json定義好小程序頁(yè)面路由和配色：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ca2100",
    "navigationBarTitleText": "TodoList",
    "navigationBarTextStyle":"white"
  }
}

3頁(yè)面開(kāi)發(fā)

頁(yè)面文件都存放在pages/目錄下，每個(gè)功能頁(yè)面都會(huì)創(chuàng)建一個(gè)文件夾，TodoList現(xiàn)只需一個(gè)頁(yè)面完成即可

數(shù)據(jù)綁定使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)

{{userInfo.nickName}}

全部

添加todo

使用字段addShow來(lái)判斷添加輸入層顯示隱藏即可

input輸出框這里不是雙向綁定，所以這里添加一個(gè)事件bindinput="setInput"來(lái)賦值實(shí)時(shí)變化

<view class="addForm {{addShow?'':'hide'}}">
    <view class="addForm-p">
      <input bindinput="setInput" class="weui-input" focus="{{focus}}" placeholder="請(qǐng)輸入todo" value="{{addText}}" />
      <view class="addForm-btn"><button bindtap="addTodo" class="weui-btn mini-btn" size="mini" type="warn">確定添加</button><button bindtap="addTodoHide" class="weui-btn mini-btn" size="mini" type="default">取消</button>
      </view>
    </view>
  </view>

實(shí)時(shí)賦值事件處理

setInput: function (e) {
    this.setData({
      addText: e.detail.value
    })
}

取消時(shí)，需要清空input的值，input里需要綁定value="{{addText}}"

Page({
 data:{
     //...
 }, 
 //...
 addTodoHide: function () {
    this.setData({
      addShow: false, // 控制添加輸入面板隱藏
      focus: false, // 失去焦點(diǎn)
      addText: '' // 清空值
    })
 }
 //...
})

添加todo

Page({
 data:{
     //...
 }, 
 //...
 addTodo: function () {
    // 檢查有沒(méi)有輸入
    if (!this.data.addText.trim()) {
      return
    }
    var temp = this.data.lists // 取出lists
    var addT = {
      id: new Date().getTime(), // 取當(dāng)前時(shí)間
      title: this.data.addText,
      status: '0'
    }
    temp.push(addT) // 添加新的todo
    this.showCur(temp) // 處理當(dāng)前狀態(tài)的方法
    this.addTodoHide() // 添加成功后，隱藏添加面板方法
    wx.setStorage({ // 小程序異步緩存
      key:"lists",
      data: temp
    })
    wx.showToast({ // weui toast組件
      title: '添加成功!',
      icon: 'success',
      duration: 1000
    });
 }
 //...
})

列表部分

scroll-view內(nèi)滾動(dòng)

列表渲染，事件觸發(fā)，利用data傳參，bind綁定事件

    
    
      暫無(wú)數(shù)據(jù)
    
    
    
      
      
        
        
        {{item.title}}
        
        {{api.formatTime(item.id)}}
      
      
      刪除
    
  

滑動(dòng)刪除

效果：當(dāng)向左滑動(dòng)時(shí)，content跟隨手指像左移動(dòng)，同時(shí)右側(cè)出現(xiàn)del按鈕;當(dāng)滑動(dòng)距離大于按鈕寬度一半松開(kāi)手指時(shí)自動(dòng)滑動(dòng)到左側(cè)顯示出按鈕，小于一半時(shí)自動(dòng)回到原來(lái)的位置，隱藏按鈕。

實(shí)現(xiàn)思路：content和del按鈕分別是絕對(duì)定位，利用z-index層來(lái)控制讓content來(lái)蓋住del，當(dāng)content向左滑動(dòng)時(shí)，del按鈕就會(huì)露出來(lái)。

微信小程序api提供的touch對(duì)象和3個(gè)有關(guān)手指觸摸的函數(shù)（touchstart，touchmove，touchend）來(lái)實(shí)現(xiàn)content隨手指移動(dòng)

 

 

詳細(xì)api說(shuō)明，請(qǐng)查看：mp.weixin.qq.com/debug/wxado…

列表的content已綁定這個(gè)三個(gè)事件：bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"

實(shí)現(xiàn)方法：

注意txtStyle，在content在綁定這個(gè)屬性的，實(shí)現(xiàn)跟隨手指移動(dòng)的

delBtnWidth為了del按鈕的寬度，這里以rpx為單位

Page({
 data:{
     //...
 }, 
 //...
  touchS: function (e) {
    // console.log('開(kāi)始：' + JSON.stringify(e))
    // 是否只有一個(gè)觸摸點(diǎn)
    if(e.touches.length === 1){
      this.setData({
        // 觸摸起始的X坐標(biāo)
        startX: e.touches[0].clientX
      })
    }
  },
  touchM: function (e) {
    // console.log('移動(dòng)：' + JSON.stringify(e))
    var _this = this
    if(e.touches.length === 1){
     // 觸摸點(diǎn)的X坐標(biāo)
      var moveX = e.touches[0].clientX
      // 計(jì)算手指起始點(diǎn)的X坐標(biāo)與當(dāng)前觸摸點(diǎn)的X坐標(biāo)的差值
      var disX = _this.data.startX - moveX
     // delBtnWidth 為右側(cè)按鈕區(qū)域的寬度
      var delBtnWidth = _this.data.delBtnWidth
      var txtStyle = ''
      if (disX == 0 || disX < 0){ // 如果移動(dòng)距離小于等于0，文本層位置不變
        txtStyle = 'left:0'
      } else if (disX > 0 ){ // 移動(dòng)距離大于0，文本層left值等于手指移動(dòng)距離
        txtStyle = 'left:-' + disX + 'rpx'
        if(disX >= delBtnWidth){
          // 控制手指移動(dòng)距離最大值為刪除按鈕的寬度
          txtStyle = 'left:-' + delBtnWidth + 'rpx'
        }
      }
      // 獲取手指觸摸的是哪一個(gè)item
      var index = e.currentTarget.dataset.index;
      var list = _this.data.curLists
      // 將拼接好的樣式設(shè)置到當(dāng)前item中
      list[index].txtStyle = txtStyle
      // 更新列表的狀態(tài)
      this.setData({
        curLists: list
      });
    }
  },
  touchE: function (e) {
    // console.log('停止：' + JSON.stringify(e))
    var _this = this
    if(e.changedTouches.length === 1){
      // 手指移動(dòng)結(jié)束后觸摸點(diǎn)位置的X坐標(biāo)
      var endX = e.changedTouches[0].clientX
      // 觸摸開(kāi)始與結(jié)束，手指移動(dòng)的距離
      var disX = _this.data.startX - endX
      var delBtnWidth = _this.data.delBtnWidth
      // 如果距離小于刪除按鈕的1/2，不顯示刪除按鈕
      var txtStyle = disX > delBtnWidth/2 ? 'left:-' + delBtnWidth + 'rpx' : 'left:0'
      // 獲取手指觸摸的是哪一項(xiàng)
      var index = e.currentTarget.dataset.index
      var list = _this.data.curLists
      list[index].txtStyle = txtStyle
      // 更新列表的狀態(tài)
      _this.setData({
        curLists: list
      });
    }
  }
  //...
})

 

至此已完成，TodoList實(shí)踐例子，功能簡(jiǎn)單，入門好例子。

原碼下載：github.com/CH563/TodoL…