3微信小程序基础语法

1.小程序语法 – wxml

<!-- 1.view相当于div标签 -->
<view>111</view>

<!-- 2.text相当于span标签 -->
<text>222</text>

<!-- 3.view中可以写模板语法，支持表达式 -->
<view>
  {{ 10+20 }} --> 30
</view>

<!-- 4.支持三目 -->
<view>
  {{ 10 > 20 ? '大于' : '不大于' }} --> 不大于
</view>

<!-- 5.支持变量 -->
<view>
  {{ mytext }} --> 支持变量
</view>

<!-- 6.bind绑定事件，不支持加()，不加size属性占满整个宽度 -->
<button size="mini" bindtap="handleTap">点击按钮</button>

2.小程序语法 – js

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

3.todolist

wxml

<!-- 1.input，默认无边框 -->
<view class="todolist">
<!-- 2.bindinput-获取输入框value值 -->
  <input value="{{ mytext }}" bindinput="handleInput"></input>
  <button size="mini" bindtap="handleAdd">添加</button>
</view>

<!-- 3.遍历数组，item和index是固定的 -->
<!-- 4.如果不要item这个名字， wx:for-item="mxfItem" -->
<!-- 5.如果要访问全局变量item，数组遍历是就要修改item名字了 -->
<view wx:for="{{ list }}" wx:key="item">
  {{ item }}-{{ index }}
  <!-- 6.删除 -->
  <!-- 7.传参：不支持()写法，data是固定的，mxfindex是随便写的 -->
  <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

<view 
  wx:for="{{ list }}" 
  bindtap="handleLightTap"
  data-index="{{ index }}"
  wx:key="index"
  class="{{ currentIndex === index ? 'active' : '' }}"
>
    <text>{{ item }}</text>
</view>

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
<!-- 1.动态创建、删除 -->
<button bindtap="handleCreated">创建/删除</button>
<view wx:if="{{ isCreated }}">我是动态创建和删除的</view>

<!-- 2.动态隐藏、显示 -->
<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
    })
  }

})

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4563.html