小程序数据绑定、列表循环、条件渲染、样式、事件及双向绑定说明

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

wxss 样式

WXSS 具有 CSS 大部分特性，与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

尺寸单位

rpx : 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。1px = 2rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

/** common.wxss **/
.small-p {
  padding:20rpx;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15rpx;
}

内联样式

<view style="color:{{color}};" /> //style 接收动态的样式
<view class="normal_view" />

事件

这里就先介绍常用的点击事件 bindtap，其他事件请到组件里查阅

<view data-name="Weixin" bindtap="tapName"> 点击 </view>

Page({
  tapName: function(e) {
    console.log(e)
  }
})

有时需要在点击的时候，传递参数进去，那怎么处理呢

通过data- 加 你传递的参数名，如上面的data-name，可去打印结果里取 e.currentTarget.dataset.name
说明： currentTarget 事件绑定的当前组件

双向绑定

首先说一下，如何更改data里的数据

data: {
​	name: '张三'
}

想把张三改成李四，vue 中：this.name = '李四'

小程序中是通过：

this.setData ({
​	name: '李四'
})

注意点：如果你想获取name的数据，通过this.name是取不到的，需要 this.data.name

双向绑定：通过this.setData 更改数据，如果不加model，用户修改了输入框里的值，却不会同时改变 this.data.value

<input model:value="{{value}}" />