两个输入框分别为input与textarea,然后用form表单包裹两个输入框所输入的数据,再上传到服务器,效果图:

post.wxml
<form bindsubmit="formSubmit" bindreset="formReset"> <view style='position: fixed; width: 100%;'> <input name="input" placeholder="添加标题" class='inp' value='{{form_info}}'/> <textarea class="detailText" value="{{details}}" textarea fixed="true" placeholder="添加内容..." name="inp2" value='{{form_info}}'> </textarea> <view class='an1'> <button form-type="submit" class='an'>发布</button> </view> </view> </form>post.js
Page({ data: { img_arr: [], }, //判断是否填完整,并将input中的数据上传到服务器 formSubmit: function (e) { var that = this; console.log('form发生了submit事件,携带数据为:', e.detail.value) console.log(that.data.img_arr) var that = this; var formData = e.detail.value; if (e.detail.value.input == '' || e.detail.value.inp2 == '') { wx.showToast({ title: '请填写完整···', }) } else { wx.request({ url: 'https:***/submit',//这里的接口请填实际接口 data: formData, header: { 'Content-Type': 'application/json' }, success: function (res) { console.log(res.data) wx.showtoast({ title: '提交成功' }) that.setData({ form_info: '' }) } }) } } })post.wxss
.detailText { height: 400rpx; width: 100%; border-bottom:5rpx solid #efeff3; }.inp { margin: 20rpx 0rpx 20rpx 30rpx; width: 100%; }.an { height: 90rpx; width: 270rpx; font-size: 38rpx; background-color: rgba(0, 0, 0, 0.288); font-weight: 600; color: white;}button::after { border: none;}.an1 { margin-top: 90rpx;}微信小程序













