6-微信小程序 表单获取数据
案例：表单获取数据
微信小程序获取表单数据的意义：
- 收集用户信息：表单是收集用户信息的重要工具。通过表单，用户可以输入和提交个人信息、意见、需求等，以便小程序开发者进行处理和响应。
- 实现交互功能：微信小程序的表单可以增强用户与开发者之间的交互性。用户在表单中输入信息后，开发者可以获取到这些信息，从而更好地满足用户的需求，增加用户的满意度。
- 数据统计和分析：开发者可以通过获取到的用户填写的表单数据，进行数据统计和分析。这有助于开发者了解用户的需求和行为，以便对小程序进行优化和改进。
- 提高转化率：在某些情况下，表单的填写可能意味着用户对某项服务的意向或购买意愿。通过获取表单信息，开发者可以更好地了解用户的购买决策过程，从而提高转化率。
- 改进产品和服务：通过获取和分析用户填写的表单数据，开发者可以对产品和服务进行改进和优化，以满足用户的需求和提高竞争力。
因此，获取微信小程序表单信息对于提高用户体验和开发者的效益都具有重要的意义。
知识点：点击事件、表单获取数据、定时器、if 条件判断、列表索引渲染
wxml：
<view class="dd" bindtap="dd">点击输入</view>
<!-- hidden隐藏 -->
<view class="search" hidden="{{go}}">
<!-- 把所有的表单组件放入form,bindsubmit="submit"绑定事件，name获取button提交的信息，点击按钮后提交信息到submit函数中 -->
<form bindsubmit="submit">
<view>请输入数据</view>
<input type="text" name="info" />
<!-- from-type="submit"把提交设置为提交按钮 -->
<button type="primary" size="mini" form-type="submit">提交</button>
<button type="primary" size="mini" bindtap="out">取消</button>
</form>
</view>
wxss:
.search{
width: 400rpx;
height: 400rpx;
border: 2rpx solid black;
margin: 100rpx auto;
}
.search input{
border:2rpx solid blue;
margin:100rpx 10rpx;
}
.search button{
margin-left: 60rpx;
}
.dd{
width: 200rpx;
height: 100rpx;
background-color: aqua;
margin: 100rpx auto;
text-align: center;
line-height: 100rpx;
}
wx.js:
page({
data:{
go:true
},
//表单提交的内容在e中
submit(e){
console.log(e.detail.value.info);
},
//设置点击显示输入框
dd(){
this.setData({
go:false
})
},
//设置点击取消输入框
out(){
this.setData({
go:true
})
}
})