微信小程序通过form展示数据
时间: 2023-09-10 16:06:54 浏览: 312
微信小程序可以通过form组件展示数据。form组件是一个表单组件,可以用来收集和提交用户信息。
首先,在wxml文件中添加form组件:
```
<form bindsubmit="onSubmit">
<view>
<input name="name" placeholder="请输入姓名"></input>
<input name="age" type="number" placeholder="请输入年龄"></input>
<button formType="submit">提交</button>
</view>
</form>
```
其中,bindsubmit绑定了一个onSubmit方法,当用户提交表单时,会调用该方法。
在js文件中,实现onSubmit方法:
```
Page({
onSubmit: function(e) {
var formData = e.detail.value;
console.log('form发生了submit事件,携带数据为:', formData);
}
})
```
在onSubmit方法中,通过e.detail.value获取用户提交的表单数据。可以将数据保存到后台服务器,或者在页面上展示出来。
例如,将数据展示在一个text组件中:
```
<text>姓名:{{name}}</text>
<text>年龄:{{age}}</text>
```
在js文件中,将表单数据赋值给name和age变量:
```
Page({
onSubmit: function(e) {
var formData = e.detail.value;
this.setData({
name: formData.name,
age: formData.age
})
}
})
```
这样,当用户提交表单后,页面上就会展示出用户输入的姓名和年龄。
阅读全文