微信小程序WXML-小样儿960

WXML

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

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

 {{ message }}

Page({
  data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true,
  }
})

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：


 Hidden 

 1
 2 
 3 



   view1 
   view2 



 {{a + b}} + {{c}} + d 

{{"hello" + name}}

{{object.key}} {{array[0]}}

Page({
  data: {
    a: 1,
    b: 2,
    c: 3，
    name: 'MINA'，
    object: {
       key: 'Hello '
     },
    array: ['MINA']，
  }
})

wx:if 与 hidden的区别

因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
.....这个暂时没有用过不写。

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，使用 wx:for-index 可以自定义数组当前下标的变量名, 数组当前项的变量名默认为 item。使用 wx:for-item 可以自定义数组当前元素的变量名：


  {{index}}: {{item.product_name}}



  {{productsIndex}}: {{productsItem.product_name}}

Page({
  data: {
    products: [{
      product_name: 'book',
    }, {
      product_name: 'computer'
    }]
  }
})

wx:for也可以进行嵌套循环。九九乘法表。


  
    
      {{i}} * {{j}} = {{i * j}}

我认为的双层循环。注意添加 wx:key="key"来防止报错。



  
        {{shopgroupcart.shop_name}} >        
  
        
  
      
      
        
      
      
      
          {{shopcart.product_name}}         
          ¥ {{shopcart.promote_price}}

这里有很多循环的注意事项暂时不提及。

模板

还没有用过暂时不写。

事件

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。

 Click me!

Page({
  //事件处理函数
  tapName: function(e) {
    e.currentTarget.dataset.id ==== WeChat 
    e.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    e.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
    console.log(e)
  }
})

常用的事件是tap(手指触摸后马上离开),事件绑定的方法是bind+tap,或者catch+tap,bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

tap属于冒泡事件类型。
的submit事件，的input事件，的scroll事件属于非冒泡类型。

引用

引用是配合模板一起用的暂时没有用到。