微信小程序-入门篇(app.wxml及app.wxss)

app.wxml相当于我们的app中的xml文件内容，看了大半天的界面代码感觉还是不太适应这种js风格的东西，不过以后了解多了估计就好些了。
我们首先介绍.wxml内容
有句文档上的话很重要 WXML 中的动态数据均来自对应 Page 的 data。因此我们如果想给页面填充data则需要在wxml中定义数据的内容。
这里我们拿文档上的例子来说
我们首先定义一个xml上的空间如下（注意这里面可是两个花括号）

<view> {{ message }} </view>

然后定义界面上元素取得内容这就需要在我们的js文件中添加如下代码

Page({
  data: {
    message: 'Hello MINA!'
  }
})

即我们只需要在data节点上添加我们需要呈现的界面内容即可是不是很简单
我们也可以在里面指定view的其他内容（如果要调用我们的data里面的内容调用原则跟里面内容一致都是两个花括号）

<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> </view>

有个其他要求比如checkBox控制默认选中状态

关键字(需要在双引号之内)
<checkbox checked="{{false}}"></checkbox>
而不是
<checkbox checked="false"></checkbox>

微信给我们提供了一个强大的功能就是在设置内容里面能进行计算
如

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
里面的结果就变成了3+3+d

是不是很厉害后续的计算可以查看文档在这里我就不做过多介绍了

在这里我们再介绍下微信小程序的循环语句

wx:for
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
这样的话我们就能循环绘制列表内容了

下面再来个更牛的99乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>