WXML（WeiXin Markup Language）：
WXML 类似于 HTML，但是具有一些微信小程序特有的语法和标签。主要用于描述页面的结构、组件和数据绑定。以下是一些常见的 WXML 语法：
- 数据绑定： 使用 {{}} 进行数据绑定，可以将数据动态展示在页面上。
<!-- 在 WXML 中使用数据绑定 -->
<view>{{ message }}</view>
- 条件渲染： 使用 wx:if 和 wx:else 进行条件渲染。
<!-- 条件渲染示例 -->
<view wx:if="{{ condition }}">条件为真</view>
<view wx:else>条件为假</view>
- 列表渲染： 使用 wx:for 进行列表渲染。
<!-- 列表渲染示例 -->
<view wx:for="{{ items }}" wx:for-item="item" wx:for-index="index">
{{ index }}: {{ item }}
</view>
WXSS（WeiXin Style Sheets）：
WXSS 类似于 CSS，用于定义页面的样式。但是，WXSS 有一些微信小程序特有的样式规则和单位。以下是一些常见的 WXSS 语法：
- 样式导入： 使用 @import 导入外部样式文件。
/* 导入外部样式文件 */
@import 'styles/common.wxss';
- 单位： 支持 rpx 单位，可以根据屏幕宽度进行自适应布局。
/* 使用 rpx 单位 */
.container {
width: 100rpx;
height: 200rpx;
}
- 样式继承： 使用 @extend 进行样式继承。
/* 样式继承示例 */
.base {
color: #333;
}
.extended {
@extend .base;
font-size: 16rpx;
}
综合来说，视图层是用户直接与小程序交互的部分，开发者通过编写 WXML 和 WXSS 来实现页面的结构和样式。与此同时，视图层与逻辑层通过数据绑定和事件绑定进行交互，完成页面的渲染和用户交互。
转载请注明出处：http://www.zyzy.cn/article/detail/608/微信小程序