微信小程序学习笔记1 ---小程序初体验

小程序初体验

1、小程序的数据绑定

• 与 Vue 不同，小程序它没办法在改变数据的同时令界面刷新，不能做到数据发生变化，界面随之改变
• 必须使用 this.setData() 函数改变 data 中的数据，界面才会发生刷新

2、小程序的数据展示

小程序的数据展示其实和 Vue 差不多，都是用 Mustache 语法（双大括号）来展示的，具体如下：

<view>我的名字是：{{ name }}</view> 

其中的 name 就是 data 中定义的数据

3、小程序的列表渲染（wx:for）

3.1、基础用法：

<--  item 为微信内部自动生成，代表 list 列表数据中的个体 -->
<view wx:for="{{ list }}">{{ item }}</view> 

<-- 1、当绑定的值是一个数字时，代表循环的次数，此时的 item 的值为下标值
   （注：绑定数字也要记得加 {{}} 否则会被解析成字符串） -->
<view wx:for=" {{ 4 }} ">{{ item }}</view> 

<-- 2、当绑定的值是一个字符串时，会将字符串解析成字符串数组 -->
<view wx:for=" list ">{{ item }}</view>  等价于 <view wx:for=" {{['l','i','s','t']}} ">{{ item }}</view>

3.2、wx:key 唯一标识符

• 每一次循环时，都要给循环的对象添加一个唯一的标识符，以提升性能
• 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率
• key 的值以两种形式提供：
  1、字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2、保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

<-- 注：wx:key 绑定值不需要加 {{}} 语法 -->
<view wx:for="{{ list }}" wx:key = "list.iid">{{ item }}</view> 

3.3、嵌套循环

我们在处理数据时，经常用到嵌套循环，小程序又不能和 Vue 的 v-for 一样直接定义当前项的变量名。只能使用小程序自带的当前项变量民 item，如此一来嵌套的层级一旦过多，就会造成数据的混乱。于是小程序提出我们可以使用 wx:for-item 来指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。如下：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

3.4、注意事项

• 循环时一般会在外层嵌套一个 block 元素，将循环逻辑添加在它的身上，block元素是不会被渲染在页面上的
• 花括号和引号之间如果有空格，将最终被解析成为字符串！！！

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于：

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

4、事件监听基础流程

1. 在元素身上绑定 事件名（事件监听一般写成 bindtap，也可以写成 bind:tap）

<button bind:tap="clickMe"></button>
<view>{{ counter }}</view>

2. 在 js 文件中书写监听函数，实现想要的操作

Page({
  data: {
      counter: 0  // 在 data 中定义变量
  },
  clickMe() {
      // 与 Vue 不同，小程序没办法在直接改变数据的同时更改界面，不能令界面随数据的改变而改变
      // 必须使用 this.setData() 函数
      this.setData({
          counter: this.counter + 1  // 
      })
      console.log('你再点一下试试')
  }
})

这里有一个注意点就是一开始提到的小程序想要数据改变的同时界面也随之刷新，就一定要使用 setData() 函数，在setData() 中去修改 data 中定义的数据。