微信小程序开发3——页面结构文件

微信小程序开发3——页面结构文件

​ 微信小程序的页面结构通过WXML语言编写，WXML是一门用于框架设计的标记语言，用于渲染界面。WXML中的标签都是微信小程序定义的标签，不可以自定义标签，虽然微信小程序依然能解析一些HTML的标签，但并不是完全支持。

​ WXML具有以下功能：数据绑定，列表渲染，条件渲染，模板，事件等能力。

一、数据绑定：

​ WXML文件可以同对应的JavaScript文件中的Page方法的参数data中的数据绑定，在页面中可以直接使用data的属性，绑定方法包括：

（1）简单绑定

Page中添加content和showContent参数

Page({
	date:{
		content:'内容',
		showContent:true,
        num1:1,
	}，
    //其他方法、属性略
})

可以通过组件view打印

<view>{{content}}</view>
<view>{{num}}</view>
<view wx:if="{{showContent}}">作为属性渲染</view>
<view>{{2}}</view>

效果如下：（少女粉调节参考框架主体文件，，，，忘改了，HexColor可通过百度查询）

（2）运算

​ 在{{ }}内可以进行一些简单的运算，包括算数运算、逻辑运算、字符串运算。

​ data增加：

Page({
	date:{
		content:'内容',
		showContent:true,
         num1:1,
         num2:2,
         num3:3,
         name：'weixin'
	}，
    //其他方法、属性略
})

​ 运算代码示例：

<view>{{showContent?'显示文本':'不显示文本'}}</view>
<view>{{num1+num2}}+1+{{num3}}</view>
<view>{{"name:"+name}}</view>

​ 效果如下：

二、条件渲染

上文使用的wx:if即条件渲染，相当于条件判断语句if

此外还有wx:elif,相当于条件判断语句else if

wx:else相当于else

使用:

<view wx:if="{{false}}">内容一</view>
<view wx:elif="{{false}}">内容二</view>
<view wx:esle>内容三</view>

对一段代码的判断需要用到block wx:if,使用方法如下：

<block wx:if="{{true}}">
	<view>内容四</view>
	<view>内容五</view>
</block>

上两端代码合并后效果：

三、列表渲染

​ 组件的wx:for控制组件遍历数组。

​ 在data中添加数组

Page({
	date:{
		arr:[1,2,3]
	}，
    //其他方法、属性略
})

​ 添加组件如下：

<view wx:for="{{arr}}">渲染</view>

​ 三次渲染效果如下

四、模板

​ 当相同结构在不同位置使用时，可以通过在内定义代码段，特别注意要定义模板属性name，即模板的名字。

​ 定义方式如下：

<template name="myTemplate">
	<view>内容一</view>
    <view>内容二</view>
    <view>内容三</view>
    <view>{{content}}</view>
</template>

​ 使用方式如下：

<template is="myTemplate" data="{{content:'内容四'}}"></template>

​ 合并上述代码,渲染效果如下：

​