小程序の基础语法

插值语法

1. 初识微信小程序插值语法
   定义: 类似于vue的插值语法,也采用{{ }}进行值的动态绑定
   值的注意:

    (1) 无法像vue语法中可以进行函数调用
    (2) 传递布尔值值必须使用{{}}传递,不使用{{}}默认都是字符串,false就会被编译成字符串false,显示为true
   

   <view>{{ name }}</view> --> 页面显示: Nano
   <view>{{change(name)}}</view> --> 页面无法显示
   
   Page({
     data:{
       name : 'Nano'
     },
     change(){}
   })

2. 动态值的绑定
   定义: 用于在样式、微信指令和传参时值的动态绑定

   1) 样式的绑定
      class:
         <view class="bg-color {{ isShow ?'ft-color':'' }}"></view>
      style:
         <view style="padding-top:{{ pdTop }}px"></view>  
       
       Page({
         data:{
           isShow : true ,
           pdTop :36
         }
       })
   
   2) 微信指令的参数绑定
       wx:if/wx:elif/wx:else/wx:for :
         <view wx:if="{{ item === 1}}">1</view>
         <view wx:elif="{{ item === 2}}">2</view>
         <view wx:else>3</view>
         <view wx:for="{{arr}}" :key="ind" wx:for-item="itm" wx:for-index="ind">{{ itm }}</view>
   
         Page({
           data:{
             item : 1 ,
             arr : [1, 2, 3]
           }
         })
   
   3) 组件动态传参
      父组件:
       <Child item="{{ type }}"></Child>
   
       Page({
         data:{
           type : 1
         }
       })
   
      json文件:
         "usingComponents" : {
           "Child" : 路径
         }
   
      子组件:
       <view> {{ type }} </view>
   
       Component({
         properties:{
           type: Number,
           value: 0
         }
       })
   
   4) 配合方法传参:
      前言: 配合方法动态传参一般在wx:for循环时出现比较多
      <block wx:for="{{ row }}" wx:key="index" wx:for-item="item">
         <button catchtap="handlePassRow" data-row="{{item}}">打印数据</button>
      </block>
   
      Page({
        data:{
          row:[
            { index:1 }
          ]
        },
        handlePassRow(e){
          // 小程序固定语法,从e.currentTarget.dataset 获取
          const { row } = e.currentTarget.dataset
          console.log( row )  --> { index: 1 }
        }
      })

事件绑定语法

1. 小程序的方法绑定分为 bind 和catch
   1. 区别:
      前言: 在小程序中,不支持通过js原生的e.stopProgaration进行阻止事件冒泡
      bind无法阻止事件冒泡,而catch可以
   2. 绑定示例:

      // bind/catch:tap 和 bind/catchtap 性质是一样的  
      <button bind:tap="tapClick"> bind点击事件 <button>
      <button catch:tap="catchClick"> catch点击事件 <button>
      
      // 用于子组件与父组件通信使用
      <button bindselfAtion="selfAction"> 绑定自定义事件点击 <button>
      
      // 在page页面和component中方法存放的位置略有不同
      
      page: 与data平级
        data:{},
        tapClick(e){}
      
      component: 存放在methods中
        data:{}
        methods:{
          tapClick(e){}
        }

事件event参数和setData()

1. 小程序通过bind/catch绑定的语法都通过event参数获取需要事件信息,类似于原生事件的event参数

   1. 如何获取传递的参数?
      表单元素获取

      <input bindinput="onInput" />
      Page({
        // 表单元素获取是在e.currentTarget.detail中获取,固定key值为value
      
        onInput(e){
           const { value } = e.currentTarget.detail
        }
      })

      非表单元素获取

      <view bindtap="onClick" data-item="1"></view>
      Page({
        // 表单元素获取是在e.currentTarget.dataset中获取,固定key值为data-后面绑定的key值
        onClick(e){
           const { item } = e.currentTarget.dataset --> 1
        }
      })

      值的注意:
      当子组件与父组件进行传参通信时,是通过e.currentTarget.detail获取的参数,也就是说dataset存储的一般都是自定义绑定的参数值,而detail里传递的参数是表单值或者子组件通信传递来的值

2. e.currentTarget和e.target的区别
   e.currentTarget 指向的是触发事件监听的对象
   e.target 指向的是添加（注册）监听事件的对象
   如果没有发生元素嵌套,那么 e.currentTarget和e.target是一样的
   一般我们在小程序里,一般都采用e.currentTarget防止不可控的错误发生

3. setData()
   定义: setData()是用来响应式更新页面绑定的data中的值的内置共用方法
   执行时机:
   在执行赋值操作时是同步的
   在执行页面渲染时是异步的

   <view> {{ num }} </view>
   <button catchtap="onAdd"> add </button>
   
   Page({
     data:{
       num:0
     },
     onAdd(e){
       let num = this.data.num++
       this.setData({
         num
       })
     }
   })