微信小程序学习(一)

视图层

• MINA的视图层由WXML与WXSS编写。
• 将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
• WXML(WeiXin Markup language)用于描述页面的结构。
• WXSS(WeiXin Style Sheet)用于描述页面的样式。
  组件(Component)是视图的基本组成单元。

WXML

数据绑定

• WXML中的动态数据均来自对应Page的data。
• 数据绑定使用”Mustache”语法（双大括号）将变量包起来
• 支持运算
  
  • 算数运算
  • 三元运算
  • 逻辑运算
  • 字符串运算
  • 数据路径运算
• 组合
  
  • 数组
    
    • <view wx:for-items="{ {[zero, 1, 2, 3, 4]}}"> { {item}} </view>
  • 对象
    
    • <template is="objectCombine" data="{ {for: a, bar: b}}"></template>
  • …拓展运算符:将一个对象展开,复制到一个新的对象
    
    • <template is="objectCombine" data="{ {...obj1, ...obj2, e: 5}}"></template>

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

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

列表渲染

• 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
• 使用wx:for-item可以指定数组当前元素的变量名
• 使用wx:for-index可以指定数组当前下标的变量名
  
  • -后面是名
• 可以嵌套
• wx:key如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如<input/>中的输入内容，<switch/> 的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。

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