3.微信小程序基础语法

灰太狼 2023-02-17 11:07 1阅读 0赞

#### 1.小程序语法 – wxml ####

<view>111</view>
    
    
    <text>222</text>
    
    
    <view>
      {
       { 10+20 }} --> 30
    </view>
    
    
    <view>
      {
       { 10 > 20 ? '大于' : '不大于' }} --> 不大于
    </view>
    
    
    <view>
      {
       { mytext }} --> 支持变量
    </view>
    
    
    <button size="mini" bindtap="handleTap">点击按钮</button>

#### 2.小程序语法 – js ####

// 1.每一个页面(js)都必须注册页面初始化页面，必须是Page()
    Page({ 
      data: { 
        mytext: '支持变量/状态'
      },
      // 2.定义一个事件处理函数
      handleTap () { 
        // 3.修改状态
        this.setData({ 
          mytext: '修改状态'
        })
      }
    })

#### 3.todolist ####

##### wxml #####

<view class="todolist">
    
      <input value="{ { mytext }}" bindinput="handleInput"></input>
      <button size="mini" bindtap="handleAdd">添加</button>
    </view>
    
    
    
    
    <view wx:for="{ { list }}" wx:key="item">
      {
       { item }}-{
       { index }}
      
      
      <button size="mini" bindtap="handleDel" data-mxfindex="{ { index }}">删除</button>
    </view>

##### js #####

Page({ 
      data: { 
        mytext: '',
        list: ['111', '222', '333'],
        // 3.如果要访问全局变量item，数组遍历是就要修改item的名字了
        item: 'default-item'
      },
    
      // 1.获取输入框value值
      handleInput (e) { 
        // 2. e.detail.value 拿到输入框value值
        this.setData({ 
          // 3.修改状态
          mytext: e.detail.value
        })
      },
    
      // 4.添加
      handleAdd () { 
        // 5.获取value值
        console.log(this.data.mytext)
        this.setData({ 
          // 6.插入
          list: [...this.data.list, this.data.mytext],
          // 7.清空输入框
          mytext: ''
        })
      },
    
      // 8.删除
      handleDel (e) { 
        // 9.拿到索引值 - e.target.dataset.index
        // 10.删除，深复制
        var newList = [...this.data.list]
        newList.splice(e.target.dataset.index, 1)
        this.setData({ 
          list: newList
        })
      }
    })

##### wxss #####

/* todolist */
    .todolist { 
      display: flex;
      padding: 20px;
    }
    input { 
      flex: 8;
      border: 1px solid #ccc;
      margin-right: 5px;
      height: 20px;
    }
    button { 
      flex: 1;
      height: 26px;
      line-height: 26px;
    }

#### 4.点击变色 ####

##### wxml #####

##### js #####

Page({ 
      data: { 
        list: ['111', '222', '333'],
        currentIndex: 0
      },
    
      // 点击变色
      handleLightTap (e) { 
        // e.target - 事件源，是<text>{ { item }}</text>
        // e.currentTarget - 当前绑定了事件的DOM节点，这样就算这个DOM节点里面嵌套再多的DOM节点，也能拿到index值
        this.setData({ 
          currentIndex: e.currentTarget.dataset.index
        })
      }
    })

##### wxss #####

.active { 
      background-color: #f40;
    }

#### 5.动态创建、删除、隐藏、显示 ####

wxml
    
    <button bindtap="handleCreated">创建/删除</button>
    <view wx:if="{
       { isCreated }}">我是动态创建和删除的</view>
    
    
    <button bindtap="handleShow">显示/隐藏</button>
    <view hidden="{
       { isShow }}">我是动态隐藏和显示的</view>
    
    js
    Page({
      data: {
        isCreated: true,
        isShow: false
      },
    
      handleCreated () {
        this.setData({
          isCreated: !this.data.isCreated
        })
      },
    
      handleShow () {
        this.setData({
          isShow: !this.data.isShow
        })
      }
    
    })