微信小程序模板语法和事件

在Vue 中我们要实现动态数据，一般会把数据定义到data 属性上，在模板中使用双大括号进行引用。在微信小程序中同样如此，来看个简单案例：

一、简单的模板数据渲染和更新

数据定义： index.js

js 复制代码

Page({
    data: {
        msg: 'hello world'
    }
})

在模板中使用： index.wxml

html 复制代码

Page({
    data: {
        msg: 'hello world'
    }
})

在vue 开发中要修改数据，直接通过this.msg = '新的值' ，模板中的就会随之改变，而微信小程序中不能这样，微信小程序中要修改data中的数据使得模板跟着更新，需要使用setData 来看下具体的使用：

index.js

js 复制代码

Page({
    data: {
        msg: 'hello world'
    },
    onLoad () {
        setTimeout(() => {
            this.setData({
                msg: '世界你好'
            })
        }, 2000)
    }
})

在上述代码中你会看到刚开始页面显示hello world, 过了两秒钟后变成了世界你好

二、点击事件

1、无参数例子

在vue 中点击事件使用v-on:click 或者使用简写的@click, 而在微信小程序中使用bindtap, 并且方法定义在js 对象的第一层，不用写到methods中，注意是页面的才是不用写到methods中，如果是组件，也是需要写到methods中的。来看一个页面中点击事件处理

index.wxml

html 复制代码

<view>{{ msg }}</view>
<button bindtap="updateMsg" type="primary">更新msg</button>

index.js

js 复制代码

// index.js
Page({
    data: {
        msg: 'hello world'
    },
    updateMsg () {
        this.setData({
            msg: '世界你好'
        })
    }
})

运行效果

2、事件传参

在Vue 中事件传参非常简单，直接@click="updateMsg(参数)" ，在函数中接收即可，而在微信小程序中则是需要先在元素上添加属性，然后通过事件对现象的target.dataset来获取到。使用方式如下： index.wxml

html 复制代码

<view>{{ msg }}</view>
<button 
    bindtap="updateMsg"
    type="primary"
    data-info="我是小程序开发者"
>更新msg</button>

index.js

js 复制代码

// index.js
Page({
    data: {
        msg: 'hello world'
    },
    updateMsg (e) {
        console.log(e.target)
        this.setData({
            msg: '世界你好' + e.target.dataset.info
        })
    }
})

运行效果

三、列表渲染

在Vue 中使用v-for, 而在微信小程序中使用wx: for, 来看个例子：

index.js

js 复制代码

Page({
    data: {
        list: [
            '列表1',
            '列表2',
            '列表3',
            '列表4',
            '列表5'
        ]
    }
})

index.wxml

html 复制代码

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

运行效果：

在vue 你必须显示的定义循环的项和index, 而在微信小程序中，你可以不用显示定义，也可以显示定义，微信小程序有默认值，如果你不显示定义，默认使用item 作为遍历的项， index 作为索引。如果你不喜欢这个名称也可以通过wx:for-item 和wx:for-index 进行修改，使用方式如下：

html 复制代码

<view 
    wx:for="{{ list }}"
    wx:key="i"
    wx:for-index="i"
    wx:for-item="data"
>{{data}}</view>

四、条件渲染

在Vue 中使用v-if 和v-show来实现条件渲染，而在微信小程序中使用wx:if 和hidden 来实现条件渲染，使用方式如下：

1. wx:if

index.js

js 复制代码

// index.js
Page({
    data: {
        lang: 'en'
    },
    updateLang () {
        const lang = this.data.lang === 'cn' ? 'en': 'cn'
        this.setData({
            lang: lang
        })
    }
})

index.wxml

html 复制代码

<view wx:if="{{ lang === 'en'}}">hello world</view>
<view wx:else>世界你好</view>
<button type="primary" bindtap="updateLang">更改语言</button>

运行效果

2. hidden

只需要修改下上述的index.wxml结构即可

html 复制代码

<view hidden="{{ lang === 'en'}}">hello world</view>
<view hidden="{{ lang === 'cn'}}">世界你好</view>
<button type="primary" bindtap="updateLang">更改语言</button>

效果和上面一样，这里就不演示了。

3. wx:if 和hidden 的区别

wx:if 和hidden 的区别其实和Vue中的v-if 和v-show 差不多，一个是通过判断是否创建对应的结构来实现条件显示，一个是通过样式的display属性来实现条件显示。wx:if 适用于只在初始情况下的判断，hidden适用于频繁切换的情况