原生微信小程序

小程序三剑客（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]
        })
      },
      
    })