微信小程序 - 核心组件
微信小程序提供了丰富的内置组件，用于构建用户界面和实现交互功能。
常用组件
view
类似于div，容器组件
text
文本组件，类似于span
image
图片组件，支持多种格式
button
按钮组件，支持多种样式
组件示例
<!-- WXML 示例 -->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo}}"
open-type="getUserInfo"
bindgetuserinfo="onGetUserInfo">
获取头像昵称
</button>
<block wx:else>
<image class="userinfo-avatar"
src="{{userInfo.avatarUrl}}"
background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<!-- 列表渲染 -->
<view wx:for="{{array}}"
wx:key="index"
class="list-item">
<text>{{index}}: {{item.message}}</text>
</view>
<!-- 条件渲染 -->
<view wx:if="{{view == 'WEBVIEW'}}">
WEBVIEW
</view>
<view wx:elif="{{view == 'APP'}}">
APP
</view>
<view wx:else>
OTHER
</view>
</view>
<!-- WXSS 示例 -->
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
/* rpx 单位可根据屏幕宽度自适应 */
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}