微信小程序基本语法应用

微信小程序基本语法应用

for循环

dataObj循环对象，key最好带上，for-item后面是属性值也是属性值的别名，for-index后面的是属性名也是索引别名

<view wx:for="{{dataObj}}" wx:for-item="value" wx:for-index="key" wx:key="index">
 {{value}}
 {{key}}
</view>

简单的for循环

<view wx:for="{{dataObj}}" wx:key="index">
 {{item}}
 {{index}}
</view>

block标签

相当于占位符 编译的时候这个标签不显示在页面上

if，hidden

if,else就不过多讲解，ifelse还可以缩写成elif， hidden也可以用来做显示隐藏，使用场景频繁的切换

<view wx:if="{{true}}">
  显示
</view>
<view wx:else>
  隐藏
</view>
<view hidden="{{true}}">
  11
</view>

事件

所有的事件都需要使用bind,页面的事件函数写在data同层级下面，组件必须写在methods里面

input框事件

记住修改数据跟react一样 需要在setData中修改 ,数据在detail中

bindinput

<input type="text" bindinput="haninput" />
<text>{{num}}</text>

js

  haninput(e) { 
    console.log(e.detail.value);
    this.setData({
      num: e.detail.value
    })
  },

点击事件（bindtap）

现在这里面讲下自定义事件，在节点里面使用data-属性名去定义，获取使用e.currentTarget.dataset.属性名

另外重要的事情讲三遍 修改值只能通过setData修改，千万不要直接修改，跟React一样，这个关系到异步渲染更新的生命周期，有兴趣的可以去了解下react的生命周期,如果直接修改造成的结果就是实现不了实时渲染，在缓存中数值已经改变但是在页面上他是做不了实时渲染的

<button bindtap="changeadd" data-change="{{1}}">点击+1</button>//bindtap是小程序的点击事件，data-自定义事件
  changeadd(e) {
    console.log(e.currentTarget); //当前触发的元素
    const sum = e.currentTarget.dataset.change //获取当前自定义的属性
    this.setData({
      dataNum: this.data.dataNum += sum //修改数据
    })
  },

bindchange change事件

微信小程序组件传值

这里跟vue差不多我就稍微讲解一下就行

首先父传子

父组件引用子组件

子组件

子传父组件

父组件


子组件