1. <view> 标签
<view> 标签是小程序中最常用的标签之一,用于组织和布局页面上的内容,类似于HTML中的 <div> 标签。
<view class="container">
<view class="header">Header</view>
<view class="content">
<text>Hello, World!</text>
</view>
<view class="footer">Footer</view>
</view>
说明:
<view> 标签可以嵌套,用来划分页面结构。
class 属性用于添加样式类,可以通过 WXSS(微信小程序的样式表)来定义这些类的样式。
2. <text> 标签
<text> 标签用于显示文本内容,类似于 HTML 中的 <span> 标签,但是在微信小程序中,<text> 标签对性能更友好,适合用于显示少量的文本。
<view>
<text>Hello, World!</text>
</view>
说明:
<text> 标签内只能包含文本节点或者 <text>、<span> 等行内元素。
可以使用 selectable 属性来控制文本是否可以被用户选中。
3. <image> 标签
<image> 标签用于显示图片,类似于 HTML 中的 <img> 标签。
用法示例:
<view>
<image src="/images/logo.png" mode="aspectFit" />
</view>
说明:
src 属性指定图片的路径,支持本地路径和远程路径。
mode 属性控制图片的显示模式,常用的值包括 aspectFit(保持宽高比缩放图片,使图片的长边能完全显示出来)、aspectFill(保持宽高比缩放图片,使图片的短边能完全显示出来)、widthFix(宽度不变,高度自动变化,保持原图宽高比不变)等。
4. <button> 标签
<button> 标签用于创建一个按钮,用户可以点击按钮执行相应的操作。
用法示例:
<button bindtap="onButtonClick">Click me</button>
说明:
bindtap 属性指定按钮点击事件的处理函数。
<button> 标签内可以包含文本或者其他组件。
5. <input> 标签
<input> 标签用于接收用户输入的内容,类似于 HTML 中的 <input> 标签。
用法示例:
<view>
<input type="text" placeholder="请输入内容" bindinput="onInput" />
</view>
说明:
type 属性指定输入框的类型,如 text、number、password 等。
placeholder 属性设置输入框的占位提示文本。
bindinput 属性绑定输入框输入事件的处理函数。