原生微信小程式

小程式三劍客（wxml，wxss，js）

• wxml 功能類似html，描述節點，但小程式的用的標籤是 view, button, text 等等。官網元件
• wxss 功能類似css，頁面樣式，不能巢狀選擇器，建議使用rpx。
  • px就是Pixel的縮寫，就是指畫素
  • rpx單位是微信小程式中css的尺寸單位，rpx可以根據螢幕寬度進行自適應。
• js 功能函式的存放地點，邏輯的編寫。
• json 功能頁面配置檔案，配置頁面文字，配置下拉重新整理等。

寫一個todoList

• wxml

  • <!--pages/todoList/todoList.wxml-->
    <view>
      <view class="top-warp">
        <input type="text" placeholder="輸入新增事項" bindinput="changeInput" value="{{inputValue}}"/>
        <button bindtap="addlist">新增</button>
      </view>
      <view class="top-warp">
        <button bindtap="tabsList" data-type="全部">全部</button>
        <button bindtap="tabsList" data-type="已完成">已完成</button>
        <button  bindtap="tabsList" data-type="未完成">未完成</button>
      </view>
      <view>
        <view wx:for="{{list}}" key="{{item.id}}">
          <view wx:if="{{type==='全部'}}">
            <text bindtap="changeBool" data-id='{{item.id}}'>{{item.title}}</text>
            <button bindtap="delectList" data-id='{{item.id}}' >刪除</button>
          </view>
          <view wx:if="{{type==='已完成' && item.isBool}}">
            <text bindtap="changeBool" data-id='{{item.id}}'>{{item.title}}</text>
            <button bindtap="delectList" data-id='{{item.id}}' >刪除</button>
          </view>
          <view wx:if="{{type==='未完成' && !item.isBool}}">
            <text bindtap="changeBool" data-id='{{item.id}}'>{{item.title}}</text>
            <button bindtap="delectList" data-id='{{item.id}}' >刪除</button>
          </view>
        </view>
      </view>
    </view>
    
     
    

• wxss

  • /* pages/todoList/todoList.wxss */
    .top-warp{
      display: flex;
      justify-content: center;
    }
    

• js

  • // pages/todoList/todoList.js
    Page({
    
      /**
       * 頁面的初始資料
       */
      data: {
        list:[
          {id:1,title:'事件一',isBool:true},
          {id:2,title:'事件二',isBool:true},
        ],
        inputValue:'',
        number:'3',
        type:'全部',
      },
    
      changeInput(e){
        // console.log(e.detail.value);
        this.setData({
          inputValue:e.detail.value
        })
      },
    
      addlist(){
        if(this.data.inputValue){
          this.data.list.push({id:this.data.number++,title:this.data.inputValue,isBool:true});
          this.setData({
            list:this.data.list,
            inputValue:'',
            number:this.data.number,
          })
        }
      },
    
      delectList(e){
        console.log(e.currentTarget.dataset.id);
        const id = e.currentTarget.dataset.id;
        const newList = this.data.list.filter(res => res.id !== id );
        this.setData({
          list:newList,
        })
      },
    
      tabsList(e){
        const type = e.currentTarget.dataset.type;
       this.setData({
         type,
       })
      },
    
      changeBool(e){
        const id = e.currentTarget.dataset.id;
        this.data.list.forEach(item => {
          if(item.id === id){
            item.isBool = !item.isBool;
          }
        })
        this.setData({
          list: [...this.data.list]
        })
      },
      
    })