全网仿站服务商

仿站网站二次开发,低至500元,最快24小时内上线

咨询热线:18096623820

小程序的视图层

框架的视图层由WXML (WeiXin Markup Language)和wxsS (WeiXin Style Sheet)编写,由组件进行展示。WXML用于描述页面的结构,WXSS用于描述页面的样式,组件(Component)是视图的基本组成单元。WXML和WXSS可以类比为Web开发中使用的HTML和CSs,它们负责将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。


1 WXML


WXML是MINA框架设计的一套标签语言,结合基础组件、事件系统,可以构建页面的结构。组件是MINA框架中一些预置的标签,同时也是视图的基本组成单元。大部分标签将在第7章组件中介绍。其中,作为组件的大部分标签在MINA中有预制样式,在使用时需要注意样式和目标样式的冲突。


下面将分别介绍WXML的数据绑定、列表渲染、条件渲染、模板、事件等能力。


1.数据绑定
在WXML中,文档中的顶层对象是page(类比于HTML文档中的body),而最常用的容器元素是view(类比于HTML文档中的div)。除渲染成不同文档的组件之外,WXML同时定义了用于控制的、不会进行渲染的block标签。


WXML通过数据绑定的方法和逻辑层交换数据。数据绑定是指,在双大括号表达式“份”中插入的表达式,可以将逻辑层Page对象中data对象的键作为变量使用,插入到WXML中。


数据绑定使用双大括号将变量包起来,双大括号中的内容可以是变量、关键字,或者逻辑表达式、条件表达式、算数和字符串运算,以及对象
和数组的索引操作。相比于其他模板语言如PHP,这里的双大括号表达式只能插入标签的属性和内容,不能改变视图层文档的结构,即插入或删除新的视图层组件。


简单的数据绑定可以作用于以下几个方面。


·内容
若逻辑层文件内容为


Page({
  data: {
     message: 'Hello MINA!'
   }
})
则视图层中语句为
<view> {f message }} </view>


将会在页面上显示“Hello MINA!”。·组件属性(需要在双引号之内)若逻辑层文件内容为


Page({


data: {
id: 0
}


})


则视图层语句为


<view id= " item-tfid} " > </view>可设置view组件id属性值为0。·关键字(需要在双引号之内)


关键字主要是true和false,均为boolean类型,分别代表真值和假值。例如:


<checkbox checked= " {false} " ></checkbox>表示组件checkbox的状态为未选中。


注意


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


·控制属性(需要在双引号内)若逻辑层文件内容为


Page({
 data: {
    condition: true
  }
})


则视图层语句为


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


表示逻辑判断的条件为真,此时view组件中的内容将会显示在页面上。


WXML还支持在{内进行简单运算,主要包括以下几个方面。


·三元运算


({})内支持进行三元运算,例如:


<view hidden=" flag ? true : false} " > Hidden </view>


算术运算
若在逻辑层有如下代码:


Page({
  data: {
         a: 1,
         b: 2,
         c: 3
  }
})
则语句:
<view> {fa + b}+ {c}+ d </view>


运行后,有view中的内容为3+ 3+d,{fa+b}}在这里进行了算术加法运算,结果为3,{{c}}为逻辑层的变量,值为3,d是普通字符串,直接输出。




表示根据flag的值判断view组件hidden属性的状态为隐藏还是显小。


·逻辑判断


使用wx:if可以进行逻辑判断,例如:


<view wx:if= " {length > 5}}" > </view>


可以根据length的值和5的比较结果选择是否显示该view组件。


字符串运算


若逻辑层文件内容为


Page({
 
 data:{
    name: 'MINA'
 }
})


则视图层中语句为<view>{{" hello " + name}}</view>表示view组件中的内容为“hello MINA”。


·数据路径运算


若逻辑层文件内容为


Page({


    data: {
object: {key : 'Hello '
    },
   array: ['MINA','!']


  }
})
则语句
<view>{fobject.key {{array[o]l}</view>将会在页面上显示Hello MINA。












您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。