WXML（WeiXin Markup Language）：
1. 标签和属性：
- WXML 使用类似 HTML 的标签和属性来构建页面结构。
- 支持常见的标签如 view、text、image 等。
<!-- 示例：WXML 页面结构 -->
<view>
<text>Hello, Mini Program!</text>
<image src="/images/logo.png" />
</view>
2. 数据绑定：
- 使用双花括号 {{}} 进行数据绑定，将逻辑层的数据同步到视图层。
<!-- 示例：数据绑定 -->
<view>{{message}}</view>
WXSS（WeiXin Style Sheets）：
3. 样式定义：
- WXSS 使用类似 CSS 的语法来定义样式。
- 支持选择器、样式属性、单位等。
/* 示例：WXSS 样式定义 */
view {
color: #333;
font-size: 16px;
}
小程序组件：
4. 基础组件：
- 微信小程序提供了一系列基础组件，如 view、text、image、button 等，用于构建页面。
<!-- 示例：基础组件 -->
<view>这是一个视图组件</view>
<text>这是一个文本组件</text>
<image src="/images/picture.png" />
<button bindtap="onTap">点击按钮</button>
5. 自定义组件：
- 使用 Component() 构造函数创建自定义组件，提高代码复用性。
// 示例：自定义组件定义
Component({
properties: {
title: String
},
data: {
// 组件内部数据
},
methods: {
// 组件方法
}
})
<!-- 示例：使用自定义组件 -->
<custom-component title="自定义组件标题"></custom-component>
事件处理：
6. 绑定事件：
- 使用 bind 和 catch 关键字绑定事件处理函数。
<!-- 示例：绑定点击事件 -->
<button bindtap="onTap">点击按钮</button>
// 示例：点击事件处理函数
onTap: function(event) {
console.log('按钮被点击了', event)
}
数据渲染：
7. 条件渲染：
- 使用 wx:if、wx:else 和 wx:elif 进行条件渲染。
<!-- 示例：条件渲染 -->
<view wx:if="{{condition}}">条件为真</view>
<view wx:else>条件为假</view>
8. 列表渲染：
- 使用 wx:for 进行列表渲染。
<!-- 示例：列表渲染 -->
<view wx:for="{{items}}" wx:for-item="item" wx:for-index="index">
{{index + 1}}. {{item}}
</view>
以上是关于微信小程序视图层的一些基本概念和用法。在微信小程序开发中，视图层负责用户界面的展示，而逻辑层则处理用户的交互和业务逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/767/微信小程序