微信小程序——基本语法

WXML语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

1. 数据绑定

  <!--数据绑定使用 Mustache 语法（双大括号）将变量包起来-->
  <view> {
  { message }} </view>
  <view id="item-{
    {id}}"> </view>
  <view wx:if="{
    {condition}}"> </view>
  <checkbox checked="{
    {false}}"> </checkbox>
  <!-- WXML 中的动态数据均来自对应 Page 的 data-->
  Page({
    data: {
      message: 'Hello 微信小程序!',
  	id:0,
  	condition:false
    }
  })

注意事项: 小程序中为单项数据流 model —> view
修改数据： this.setData({message: ‘修改之后的数据’}, callback)

2. 列表渲染

   <!--使用 wx:for 绑定一个数组，即可使用数组中各项的数据重复渲染该组件-->
   <!--默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item-->
   <view wx:for="{
    {array}}">
     {
  {index}}: {
  {item.name}}
   </view>
   <!--
   	自定义
   	1.使用 wx:for-item 可以指定数组当前元素的变量名
   	2.使用 wx:for-index 可以指定数组当前下标的变量名
   -->
   <view wx:for="{
    {array}}" wx:for-index="id" wx:for-item="itemName">
     {
  {id}}: {
  {itemName.name}}
   </view>
   
   Page({
     data: {
       array: [{
         name: '微信',
       }, {
         name: '小程序'
       }]
     }
   })

wx:for 也可以嵌套

   <view wx:for="{
    {[1, 2, 3, 4, 5, 6, 7, 8, 9]}}