小程序表单提交功能实现原创

作为一名小企业开发人员，我经常被领导要求开发这样或那样的东西。我用手指数了数。发展历程大致如下：
C++》php》前端》C#》golang》小程序
多么坎坷的命运啊！
这并不是命令我再次进入小程序，我们也不甘示弱，只要money在原地出海，写个汇编也可以试试！

老实说，我以前也写过。jquery，只是最近vue,对于vue与小程序进行数据绑定有点不合适，以后我可能会慢慢喜欢它。

1.实施效果示意图

二、代码

• wxml文件

  主题 开始时间 {{start_date}} | {{start_time}} 结束时间 {{end_date}} | {{end_time}} 分类 {{select[select_index]}} 已完成 保存

• js文件

  //const moment = require("../../utils/moment.min"); const moment = require("../../utils/moment.min"); moment.locale(en, { // longDateFormat: { // l: "YYYY-MM-DD", // L: "YYYY-MM-DD HH:mm" // }, week: { dow: 1, //一周的第一天是星期一。 doy: 7 //一年的第一周必须包含1月1日（7+1-1） } //将一周的第一天定义为星期一，包括1月1一天中的第几周被算作一年的第一周。 }); // pages/note/add.js const app = getApp(); Page({

  /**

  • 页面的初始数据 */ data: { start_date: moment().format("YYYY-MM-DD"), end_date: moment().format("YYYY-MM-DD"), start_time: moment().format("HH:mm"), end_time: moment().add(1, "h").format("HH:mm"), list: [], select: [工作日记, 备忘录, 工作计划], select_index: 0, remark: "", title: "", openid: "", id: "" }, formSubmit: function (e) { //console.log(e.detail) var data = e.detail.value if (data.title == "") { wx.showToast({ title: 主题不能为空！, image: ../../images/icon/warin.png }) return false; } wx.request({ url: https://sxxxxxx.com/api/note/add, data: data, method: post, dataType: json, success: function (e) { wx.showToast({ title: 添加成功, icon: success, image: ../../images/icon/success.png, duration: 10000, complete: res => { setTimeout(function () { // wx.redirectTo({ // url: ./index // }) //navigateTo wx.reLaunch({ url: ./index }) }, 2000) } })

    }, complete: function () { // setTimeout(function () { // wx.hideToast() // }, 800)

    }

    })

    }, bindPickerChange(e) { //console.log(分类发送带有携带值的选择更改, e.detail) this.setData({ select_index: e.detail.value })

    },

    bindStartTimeChange: function (e) { this.setData({ start_time: e.detail.value }) }, bindEndTimeChange: function (e) { this.setData({ end_time: e.detail.value }) }, bindStartDateChange: function (e) { this.setData({ start_date: e.detail.value }) }, bindEndDateChange: function (e) { this.setData({ end_date: e.detail.value }) },

    /**

  • 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("请求参数为：", options) var id = options.id || ""; if (id != "") { //根据id以获取数据库中的记录。 wx.request({ url: https://sxxxxxx.com/api/note/getNoteInfo, method: post, data: { id: id }, success: res => { console.log("成功获取用户数据！", res) let tmpData = res.data; if (tmpData.code == 1) { console.log("成功获取用户数据！", tmpData) this.setData({ start_date: tmpData.data.start_date, end_date: tmpData.data.end_date, start_time: tmpData.data.start_time, end_time: tmpData.data.end_time, title: tmpData.data.title, remark: tmpData.data.remark, openid: tmpData.data.openid, id: tmpData.data.id, }) } else { console.log("获取用户数据失败！") } } }) } else { this.setData({ openid: wx.getStorageSync(openid) }) } wx.setNavigationBarTitle({ title: 日报添加, })

    },

    /**

  • 生命周期函数--监听页面的第一次呈现完成 */ onReady: function () {

    },

    /**

  • 生命周期函数--监控页面显示 */ onShow: function () {

    },

    /**

  • 生命周期函数--监听页面被隐藏。 */ onHide: function () {

    },

    /**

  • 生命周期函数--监控页面卸载 */ onUnload: function () {

    },

    /**

  • 与页面相关的事件处理程序--监听用户下拉操作 */ onPullDownRefresh: function () {

    },

    /**

  • 页面上的封底事件的处理程序。 */ onReachBottom: function () {

    },

    /**

  • 用户点击右上角进行分享 */ onShareAppMessage: function () {

    } })

• wxss文件

  / / .ipt-wrap{ min-height: 100rpx; line-height: 100rpx; } .ipt-wrap label{ min-width: 120rpx; } .icon-youjiantou{ position: relative; top: 1rpx; } .textarea{ height: 100rpx; } /swtich样式-start/ /swtich整体大小/ .wx-switch-input{ width:82rpx !important; height:40rpx !important; } /白色风格(false的样式）/ .wx-switch-input::before{ width:80rpx !important; height: 36rpx !important; } /绿色风格(true的样式）/ .wx-switch-input::after{ width: 40rpx !important; height: 36rpx !important; } .ipt-wrap:last-child{ border-bottom:none; } /swtich样式end/ .region{ width: 500rpx; position: absolute; left: 150rpx; }

  .transbg{ background: rgba(0,0,0,0) !important; font-size: 45rpx; font-family: Courier New, Courier, monospace; color: aliceblue; } .content_text{ min-height: 200rpx; border: 2rpx dashed blanchedalmond; }