能帮我写一段微信小程序的代码示例吗
时间: 2024-01-11 18:04:40 浏览: 25
当然可以,以下是一个简单的微信小程序代码示例:
```
<!--index.wxml-->
<view class="container">
<view class="title">欢迎使用微信小程序</view>
<view class="content">
<text>姓名:</text>
<input placeholder="请输入姓名" bindinput="inputName"/>
<text>年龄:</text>
<input placeholder="请输入年龄" bindinput="inputAge"/>
<button bindtap="submit">提交</button>
</view>
</view>
//index.js
Page({
data: {
name: '',
age: ''
},
inputName(event) {
this.setData({
name: event.detail.value
})
},
inputAge(event) {
this.setData({
age: event.detail.value
})
},
submit() {
wx.showToast({
title: '提交成功',
icon: 'success',
duration: 2000
})
}
})
//index.wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
.content {
display: flex;
align-items: center;
justify-content: center;
}
.text {
font-size: 14px;
margin-right: 10px;
}
input {
height: 30px;
width: 120px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
margin-right: 10px;
}
button {
height: 30px;
width: 60px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
}
```
这个微信小程序包括一个页面,其中包含姓名和年龄的输入框以及一个提交按钮。当用户点击提交按钮时,会显示一个提交成功的toast提示框。