微信小程序我的界面代码
时间: 2023-08-24 21:04:02 浏览: 72
以下是一个简单的微信小程序“我的”界面代码示例,你可以参考一下:
```
<view class="container">
<view class="header">
<image class="avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<view class="nickname">{{userInfo.nickName}}</view>
</view>
<view class="info">
<view class="item">
<text class="label">手机号码</text>
<text class="value">{{phone}}</text>
</view>
<view class="item">
<text class="label">邮箱地址</text>
<text class="value">{{email}}</text>
</view>
</view>
<button class="logout-btn" bindtap="logout">退出登录</button>
</view>
```
你可以通过微信小程序开发工具创建一个新的“我的”页面,然后将上述代码复制到对应的 wxml 文件中,再在对应的 wxss 文件中添加样式即可。需要注意的是,该代码仅作为参考,具体的实现方式需要根据你的需求进行调整。
相关问题
微信小程序注册界面代码
以下是一个简单的微信小程序注册界面代码示例:
```
<view class="container">
<form class="form" bindsubmit="register">
<view class="form-item">
<input name="username" type="text" placeholder="用户名" />
</view>
<view class="form-item">
<input name="password" type="password" placeholder="密码" />
</view>
<view class="form-item">
<input name="confirmPassword" type="password" placeholder="确认密码" />
</view>
<button form-type="submit">注册</button>
</form>
</view>
```
其中,`.container` 是整个页面的容器,`.form` 是注册表单,`.form-item` 是每个表单项,`bindsubmit` 是表单提交事件处理函数。你可以根据自己的需求进行修改和扩展。
微信小程序登录界面代码
以下是微信小程序登录界面代码示例:
1. wxml 文件
```html
<view class="container">
<view class="logo"></view>
<form class="form" bindsubmit="login">
<input class="input" type="text" placeholder="请输入用户名" name="username" />
<input class="input" type="password" placeholder="请输入密码" name="password" />
<button class="button" formType="submit">登录</button>
</form>
</view>
```
2. wxss 文件
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
width: 80px;
height: 80px;
background-image: url('/images/logo.png');
background-size: cover;
margin-bottom: 20px;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80%;
}
.input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
width: 100%;
}
.button {
background-color: #007aff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
width: 100%;
}
```
3. js 文件
```javascript
Page({
login(e) {
const { username, password } = e.detail.value;
// 发送登录请求
},
});
```
在实际开发中,需要根据具体需求进行相应的修改和优化。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)