小程序学习二：小程序开发语法基础

古城微笑少年丶 2021-09-07 06:19 510阅读 0赞

### 小程序开发语法基础 ###

*  一、数据绑定
 *  二、动态绑定属性
 *  三、调试
 *  四、事件
 *   *  1.常用事件
     *  2.事件对象
     *  3.bindtap事件绑定语法
     *  4.事件获取data里的数据
     *  5.事件动态修改data里的数据
     *  6.事件传参
     *  7.bindinput的语法格式
     *  8.文本框和data直接的数据同步
     *  9.target和currentTarget的区别
 *  五、小程序语句
 *   *  1.if语句
     *  2.结合block标签使用if
     *  3.hidden属性
     *  4.if和hidden的区别
     *  5.wx:for循环语句

# 一、数据绑定 #

和vue用法类似  
1.在jsdata里定义数据

Page({ 
         data:{ 
        info:你好'
    }
    })

2.在wxml里使用数据  
Mustache语法，也可以叫插值表达式

# 二、动态绑定属性 #

和vue有所不同  
vue是

小程序是

没有v-bind,而且变量要使用插值表达式

# 三、调试 #

APPData可以查看js里data的数据。

# 四、事件 #

事件是渲染成到逻辑层的通讯方式，通过事件可以让渲染层产生的行为，反馈到逻辑层进行业务处理。

## 1.常用事件 ##

<table> 
 <thead> 
  <tr> 
   <th>事件类型</th> 
   <th>绑定方式</th> 
   <th>事件描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tap</td> 
   <td>bindtap或bind:tap</td> 
   <td>手指触摸后马上离开，类似于html的click事件</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>bindinput或bind:input</td> 
   <td>文本框的输入事件</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>bindchange或bind:change</td> 
   <td>状态改变时触发</td> 
  </tr> 
 </tbody> 
</table>

## 2.事件对象 ##

事件对象的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>事件类型</td> 
  </tr> 
  <tr> 
   <td>timeStamp</td> 
   <td>integer</td> 
   <td>页面打开到触发事件所经过的毫秒数</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>Object</td> 
   <td>触发事件的组件的一些属性的集合</td> 
  </tr> 
  <tr> 
   <td>currentTarget</td> 
   <td>Object</td> 
   <td>当前组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td>detail</td> 
   <td>Object</td> 
   <td>额外的信息</td> 
  </tr> 
  <tr> 
   <td>touches</td> 
   <td>Array</td> 
   <td>触摸事件，当前停留在屏幕中的触摸点信息的数组，几个手指</td> 
  </tr> 
  <tr> 
   <td>changedTouches</td> 
   <td>Array</td> 
   <td>触摸事件，当前变化的触摸点信息的数组 ，手指的变化</td> 
  </tr> 
 </tbody> 
</table>

## 3.bindtap事件绑定语法 ##

<button type='primary' bindtap='demo'>按钮</button>
    //demo就是bindTap事件，即触摸事件绑定的函数

Page({ 
       demo(e){ 
       console.log(e)
    }
    
    })

## 4.事件获取data里的数据 ##

Page({ 
    data:{ 
           count :0
    },
       demo(e){ 
       //获取数据，也能通过这种方式修改值
       //但这不会重新刷新页面的值，所以需要setData方法修改，这样才能同时刷新页面的值
       console.log(this.data.count)
       this.data.count = this.data.count + 1 
    }
    
    })

## 5.事件动态修改data里的数据 ##

需要使用this.setData()方法，这种修改能修改逻辑层和渲染层，  
而this.data只会修改逻辑层，虽然数据变了，但不会修改页面的值。  
this.setData()是将数据从逻辑层发到渲染层，是异步的。

Page({ 
          data:{ 
           count :0
    },
    demo(){ 
      this.setData({ 
      //给哪个值修改就写那个值
          count:this.data.count + 1
    })
    }
    
    
    })

## 6.事件传参 ##

不能和vue一样，在绑定事件的同时把参数传过去。

不能这么做，这相当于调用了一个demo(10)名字的函数。而是demo函数，传递参数。  
要写成

<button type='primary' bindtap='demo' data-params="{ {2}}">按钮</button>
    //直接写2表示是字符串，写{ {2}}表示是数字

data-\*的形式，\*代表参数的名字。  
然后事件要拿取这个参数的值

Page({ 
          data:{ 
           count :0
    },
    demo(e){ 
    e.target.dataset
    //dataset是一个对象，包含了所有通过data-*形式传递过来的参数
    e.target.dataset.params
    //这种形式可以得到具体传过来的值，根据上面的按钮，可以知道params的值是2
    })
    }
    
    
    })

## 7.bindinput的语法格式 ##

在小程序种，bindinput事件是来响应文本框的输入事件

Page({ 
       inpuHandler(e){ 
       console.log( e.detail.value) 
         // e.detail.value文本框最新输入的值
    }
    
    })

## 8.文本框和data直接的数据同步 ##

Page({ 
    data:{ 
          msg:"请输入"
    },
       inpuHandler(e){ 
       console.log( e.detail.value) 
         // e.detail.value文本框最新输入的值
    }
    
    })

## 9.target和currentTarget的区别 ##

target是触发该事件的源头，而currentTarget则是当前事件所绑定的组件。

点击了按钮时，点击事件会以冒泡的形式向外扩散，也会触发外层view的tap事件处理函数。  
而对于vie来说，e.target指向的是触发事件的源头，即按钮  
而currentTarget则是view自己，因为是它绑定的事件。

# 五、小程序语句 #

## 1.if语句 ##

根据绑定的值为rue来确定是否渲染这个组件。

## 2.结合block标签使用if ##

一次性控制多个组件的展示和隐藏， 可以使用标签将多个组件包裹起来，并在block标签上使用wx:if来控制

block不会渲染成任何组件，只是起包裹作用。  
不用view包裹，是因为最外层的view也会渲染出来，能在元素里找到。

## 3.hidden属性 ##

也能进行元素的隐藏和显示

值为true为隐藏，false就显示和if相反。

## 4.if和hidden的区别 ##

if是动态创建和移除元素  
hidden是切换样式的display：none/block来显示和隐藏元素的。  
频繁切换用hidden  
较少切换用wx:if

## 5.wx:for循环语句 ##

Page({ 
    data:{ 
          array:[{ 
                id:1,
                age:12
    },
             { 
               id:2,
               age:13
    }
    ]
    },
       
    
    })

绑定key直接写数字元素的唯一属性即可，不要加上\{ \{\}\},绑定之后可以提高渲染效率。  
wx:for-index可以为索引重新绑定指定的变量,不写默认index变量表示所有，用也只能用index  
wx:for-item可以为默认的item绑定指定的变量，不重新指定，默认是item是数组元素。用只能用item