欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现提交input信息到后台的方法示例

程序员文章站 2022-06-20 09:28:57
本文实例讲述了微信小程序实现提交input信息到后台的方法。分享给大家供大家参考,具体如下: wxml文件: &...

本文实例讲述了微信小程序实现提交input信息到后台的方法。分享给大家供大家参考,具体如下:

wxml文件:

<!-- 用户名事件绑定 -->
<view class="fl_form">
<text>您的姓名</text>
<input type="text" placeholder='请输入您的姓名' value="{{username}}" bindblur='usernameinput'></input>
</view>
<!-- 所属部门事件绑定 -->
<view class="fl_form">
<text>所属部门</text>
<input type="text" placeholder='请输入所属部门' value="{{userbranch}}" bindblur='userbranchinput'></input>
</view>
<!-- 联系电话事件绑定 -->
<view class="fl_form">
<text>联系电话</text>
<input type="text" placeholder='请输入联系电话' value="{{usertell}}" bindblur='usertellinput'></input>
</view>
<!-- 日期选择器 mode="date" -->
<view class="fl_form">
<picker mode="date" value="{{date}}" start="{{date}}" end="2020-01-01" bindchange="binddatechange">
<view class="picker">
<text>选择日期</text> <text class="chosedate">{{date}}</text>
</view>
</picker>
</view>
<!-- 时间选择器 mode="time" -->
<view class="fl_form newtime">
<picker mode="time" value="{{startime}}" start="09:00" end="21:00" bindchange="starttime">
<view class="picker">
<text>开始时间</text> <text class="chosedate">{{starttime}}</text>
</view>
</picker>
<picker mode="time" value="{{endtime}}" start="09:00" end="21:00" bindchange="endtime">
<view class="picker end">
<text>结束时间</text> <text class="chosedate">{{endtime}}</text>
</view>
</picker>
</view>
<!-- 提交按钮 -->
<button class="formbtn" bindtap='ordermeeting'>提交</button>

js代码:

var util = require('../../utils/util.js') //引入微信自带的日期格式化
const app = getapp()
page({
data: {
date:util.formatdate(new date), //格式化日期
starttime: '9:00', //开始时间
endtime: '21:00', //结束时间
username: '',
userbranch: '',
usertell: ''
},
binddatechange: function (e) {
this.setdata({
date: e.detail.value
})
},
starttime: function (e) {
this.setdata({
starttime: e.detail.value
})
},
endtime: function (e) {
this.setdata({
endtime: e.detail.value
})
},
usernameinput: function (e) {
// console.log(e.detail.value)设置用户名
this.setdata({
username: e.detail.value
})
},
userbranchinput: function (e) {
//设置部门
this.setdata({
userbranch: e.detail.value
})
},
usertellinput: function (e) {
//设置电话
this.setdata({
usertell: e.detail.value
})
},
ordermeeting: function () { //提交input信息到后台
var username = this.data.username;
console.log(username)
var userbranch = this.data.userbranch;
console.log(userbranch)
var usertell = this.data.usertell;
console.log(usertell)
var date = this.data.date;
console.log(usertell)
}
})

希望本文所述对大家微信小程序开发有所帮助。