微信小程序之个人界面编写
时间: 2024-06-08 15:06:48 浏览: 57
微信小程序的个人界面通常包括用户头像、用户名、个人信息展示、设置等内容。下面是一个简单的个人界面编写示例:
1. 创建一个新页面,命名为“mine”,并在 app.json 中添加该页面的路径:
```
{
"pages": [
"pages/index/index",
"pages/mine/mine"
],
"window": {
"navigationBarTitleText": "小程序"
}
}
```
2. 在 mine.wxml 中编写页面结构,例如:
```
<view class="container">
<image src="{{avatarUrl}}" class="avatar"></image>
<text class="username">{{nickName}}</text>
<view class="info">
<text>性别:{{gender}}</text>
<text>年龄:{{age}}</text>
</view>
<view class="setting" bindtap="goToSetting">
<text>设置</text>
</view>
</view>
```
3. 在 mine.js 中添加页面数据和事件处理逻辑,例如:
```
Page({
data: {
avatarUrl: '',
nickName: '',
gender: '',
age: ''
},
onLoad: function () {
// 获取用户信息
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName,
gender: res.userInfo.gender === 1 ? '男' : '女',
age: 18 // 假设用户年龄为18岁
})
}
})
},
goToSetting: function () {
// 跳转到设置页面
wx.navigateTo({
url: '../setting/setting'
})
}
})
```
4. 在 mine.wxss 中添加页面样式:
```
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
.username {
margin-top: 10px;
font-size: 20px;
}
.info {
margin-top: 20px;
}
.setting {
margin-top: 30px;
padding: 10px 20px;
color: #fff;
background-color: #007aff;
border-radius: 5px;
}
```
以上就是一个简单的微信小程序个人界面的编写示例,你可以根据自己的需求进行修改和完善。