小程序的学习（3）网页渲染

小程序和vue有点类似呢。

数据绑定

要绑定数据，要先在wxml里写下：

<view> {{ message }} </view>
这里的<view>就相当于<div>

Page({
  data: {
    message: '我是一条信息!'
  }
})
在js文件里就写下这些

这样页面就会出现“我是一条信息！”，这是因为我们在wxml里的这句{{ message }} 渲染出来的。 当我们要渲染data里面的某个值做什么的时候，记得要用{{}}包起来。

也可以绑定ID

Page({
  data: {
    id: 0
  }
})

在vue中，条件渲染判断一般用v-if,v-for，v-else。微信也差不多，wx:if,wx:else

Page({
  data: {
    condition: true
  }
})

当condition为true，则是显示的，为false则不显示，或用if，else来控制显示。

还有一个是有关隐藏的：hidden，它相当于overflow：hidden，它不显示，但却存在于页面上

列表渲染

wx:for，wx:for-index，wx:for-item，wx:key这四个组合一般一起使用。

<view wx:for="{{arr}}" wx:for-index="xx" wx:for-item="xxx" wx:key="xxx.id">
  {{xx}}: 我是id：{{xxx.id}},我是text：{{xxx.text}}
</view>

Page({
  data: {
   arr:[{
     id:1,
     text:1
   },
  {
    id:2,
    text:2
  },
  {
    id:3,
    text:3
  }
]
  }
}

它有一个初始值index，xx就是左边红圈内容，相当于key，然后是id，和内容。

< block>
它看上去像一个标签，但它其实也可以不算标签，因为它不会显示在页面上，但却会存在，是个像浮层一样的套，套住其他标签。 假设我们的代码是这样：

<block> wx:for="{{arr}}" wx:for-index="xx" wx:for-item="xxx" wx:key="xxx.id">
  {{xx}}: 我是id：{{xxx.id}},我是text：{{xxx.text}}
<block>

在浏览器中，我们可以看到，这个标签以纯文本方式存在于页面上。它没有显示任何标签。