jshan
jshan

微信小程序开发-基础

wxml

wxml(WeiXin Markup Language)作为小程序前端的结构语言，和html类似，但是有以下几项需要注意：

  • 属性是大小写区分的；
  • 标签必须是严格闭合，否则编译报错；
  • 属性值可以动态改变，使用 {{name}} 表示，但是该变量也是大小写区分的，并且必须用双引号括起来；
  • 没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中；
  • 如果一个组件需要控制渲染多个 view 时可以用一个 block 来囊括，相当于html中的 template；

赋值

js文件里 Page 实例中修改data的时候，方法如下：

this.data.nameArray = [];
this.setData({
    nameArray: this.data.nameArray
})

之所以要使用 setData 方法，是为了达到将数据从逻辑层传递到渲染层，在对比JS对象的前后差异，把差异应用到Dom树上，渲染出新的UI界面。
setData 方法是Page实例的原型函数，该操作是一个异步操作，第二个参数是一个callback回调，是这次 setData 对界面渲染完成后触发的回调函数。

逻辑语法

{{}} 该括号中，除了可以直接填写变量名之后，还可以使用三元运算符，或者是简单的数字运算，或者是字符串的拼接等操作。

条件逻辑

wx:if / wx:elif / wx:else 组成了条件判断的使用情况，具体例子如下：


     view1 
     view2 


    view 3


    view 4

列表渲染

wx:for / wx:for-index / wx:for-item / wx:key 组成了列表渲染的组件，默认数组的当前项的下标变量名默认为 index ，数组当前项的变量名默认为 item，并且 wx:for-index 可以重命名当前循环的下标名(index)，wx:for-item 可以重命名当前循环的元素(item)，具体例子如下：


    {{indexNewName}}: {{itemNewName}}

如果列表数据有新增或减少，或者是列表里元素的数据有变化时，为了达到动态渲染的效果，这时候可以使用 wx:key 来标识每一个渲染。wx:key 有两种形式提供：

  • 字符串： 代表在for循环中的 array 的某个 property ，该属性需要保证是列表中唯一的字符串或数字，且不能动态改变；
  • this： 保留关键字this代表在for循环中的item本身，这种表示需要保证item是一个唯一的字符串或者数字
    举例如下:

 {{item.uniqueProperty}}: {{item.otherProperty}} 


 {{item}}

模版

在wxml中可以使用 template 来定义模版，并用 name 属性来表示模版名字，在真正需要使用并渲染该模版的时候，就用 is 来表示使用的是哪一个模版，并且使用 data 来表示传入到该模版的渲染数据，具体例子如下：