小程序表单提交功能实现

最新推荐文章于 2024-08-07 16:57:39 发布
最新推荐文章于 2024-08-07 16:57:39 发布
阅读量928 收藏 1
点赞数
分类专栏： 个人笔记 前端技术 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qcg0223/article/details/123870240
版权

作为一个小企业开发人员，经常被领导要求开发这个开发那个，我掰着手指头数了数，开发生涯大致是这样的：
C++》php》前端》C#》golang》小程序
真是命运坎坷啊！
这不又来指挥我向小程序进军了，咱也不甘示弱，只要money到位了，下海都行、写汇编也可以试试！

说实话以前一直写jquery，最近才搞vue,对于vue和小程序这类的数据绑定有点不适应，可能以后会慢慢喜欢上吧。

一、实现效果图

请添加图片描述

二、代码

  • wxml文件
<view class="container">
  <form bindsubmit="formSubmit">
    <input hidden="true" type="hidden"  name="openid" value="{{openid}}"></input>
    <input hidden="true" type="hidden"  name="id" value="{{id}}"></input>
    <view class="bg-fff p-lr30 border-t">
      <view class="ipt-wrap border-b flex ai-center">
        <label for="" class="font14">主题</label>
        <input type="text" class="ml40 flex1" placeholder="请输入日程主题" name="title" value="{{title}}"></input>
      </view>
      <view class="ipt-wrap border-b">
        <textarea id="" class="textarea _w100 p-tb30 lh10 content_text" maxlength="-1" placeholder="备注" name="remark" value="{{remark}}"></textarea>
      </view>
    </view>

    <!-- 起始时间 -->
    <view class="section  bg-fff p30 flex ai-center jc-sb ">
      <view class="section__title">开始时间</view>
      <picker mode="date"  name="start_date" value="{{start_date}}"  bindchange="bindStartDateChange">
        <view class="picker">
          {{start_date}}
        </view>
      </picker>|
      <picker 
      mode="time" 
      name="start_time" 
      value="{{start_time}}"  
      bindchange="bindStartTimeChange"
      >
        <view class="picker">
          {{start_time}}
        </view>
      </picker>
    </view>


    <!-- 结束时间 -->
    <view class="section  bg-fff p30 flex ai-center jc-sb ">
      <view class="section__title">结束时间</view>
      <picker mode="date" value="{{end_date}}" name="end_date" bindchange="bindEndDateChange">
        <view class="picker">
          {{end_date}}
        </view>
      </picker>|
      <picker 
      mode="time" 
      name="end_time" 
      value="{{end_time}}" 
      bindchange="bindEndTimeChange" >
        <view class="picker">
          {{end_time}}
        </view>
      </picker>
    </view>

    <view class="section bg-fff p30 flex ai-center jc-sb ">
      <view class="section__title">分类</view>
      <picker mode="selector" bindchange="bindPickerChange" name="note_type" value="{{index}}" range="{{select}}">
        <view class="picker">
          {{select[select_index]}}
        </view>
      </picker>
    </view>

    <view class=" bg-fff p30 flex ai-center jc-sb ">
      <view class="flex ai-center">
        <label for="" class="font14">是否已完成</label>
      </view>
      <view class="flex">
        <switch class="switch" name="is_done" color="#279efd"></switch>
      </view>
    </view>

    <view class="combtn font16 color-fff _w100 bg-btn">
      <button  class="mini-btn transbg font16  _w100 " form-type='submit'>保存</button>
    </view>
  </form>
</view>
  • 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;
}
我是罗易呀！
关注
专栏目录
微信小程序生成二维码
zhao97的博客
02-22 326
项目中需要把字符串转换成二维码展示，用到了生成二维码工具weapp-qrcode.js （demo的众多文件中只需将util下的这个文件拷贝到自己项目中），可在原文地址里clone demo。 1. 在wxml页面中写一个绘制二维码的canvas <canvas class='canvas' canvas-id='canvas'></canvas> 2. 页面js中引入 var QRCode = require('../../../utils/weapp-qrcode.js');
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
小程序基本命令
aiven1637的博客
10-30 3334
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序表单提交（本地开发）
最新发布
qq_61726551的博客
08-07 545
在昨天的FLASK服务器的基础上进行，后面做一下记录没有什么参考性的。
webSocket用法
weixin_34144450的博客
08-15 165
在做项目的时候，需要后台向前端推送消息的功能。在这个项目中我使用的是webSocket这个新的浏览器API.webSocket的目标是在一个单独的持久连接上提供全双工，双向通信。Web Sockets 使用了自定义的协议，所以 URL 模式也略有不同。未加密的连接不再是 http://， 而是 ws://;加密的连接也不是 https:/...
微信小程序链接mysql数据库
weixin_35752645的博客
01-12 772
微信小程序可以通过调用后端 API 来链接 MySql 数据库。在小程序端使用 wx.request 或 wx.cloud.callFunction 等 API 发起请求，在后端使用 Node.js 和一个数据库连接库(如mysql2)来操作数据库。 ...
微信小程序抽奖-翻牌
weixin_34130389的博客
08-30 1543
背景 ps：本次开发基于wepy框架 由于最近接到一个需求--抽奖活动； 翻牌打乱活动抽奖活动，大概需求是这样的，九宫格卡牌，先正面展示所有奖品，然后卡牌翻转，打乱排序，点击卡牌，然后抽奖。 这个需求本身其实不难，主要是分为三步； 展示所有卡牌，然后翻转。 打乱所有卡牌 点击其中一张卡牌，抽奖 第一步：卡牌翻转 我们先在dom中渲染9个卡牌。 <view class="card-modu...
微信小程序-form表单提交代码实例
10-17
本文将详细解析微信小程序中的form表单提交功能，包括前端界面设计、表单数据绑定、事件处理等，并提供一个代码实例作为参考。 首先，微信小程序的form表单基本结构与HTML中的form标签类似，但使用微信小程序特定的...
微信小程序---提交表单后清空输入框
03-29
1、可以用表单的重置功能。 按钮设置：   formType="reset">提交 form设置：   bindreset="formReset"> 表单重置时会触发reset事件，在formreset事件中提交数据就行了，不过这样不能使用event.detail获取输入值了...
微信小程序简单实现form表单获取输入数据功能示例
11-29
通过这个简单的示例，我们可以了解到微信小程序中如何利用form表单收集用户输入，以及如何处理表单提交和重置事件。这在开发微信小程序的用户交互功能时非常实用。在实际项目中，你可能需要根据需求扩展这个基础示例...
干货！微信小程序通过NodeJs连接MySQL数据库
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
04-17 4796
在前后端+数据库架构的思维中，微信小程序的生态地位是充当前端，后端和数据库还需开发者另外准备。微信开放社区提供强悍的云函数、云数据库、CMS内容管理，无疑为开发小程序的功能提供了不少便捷。当我们在开发PC端的系统时，常见的SSM框架或者SpringBoot混合Vue，使用的数据库多为MySQL，这时如果我们想开发一套多端同步的系统，使用云开发会导致数据无法同步到PC端。因此一个解决方案是：微信小程序也使用MySQL作为数据库。
微信小程序开发之连接本地MYSQL数据库
MamatjanPC的博客
05-04 3万+
微信小程序开发时通过搭建本地服务器，连接本地数据库。
微信小程序使用Echarts
weixin_38999134的博客
05-07 545
下载 下载echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin 拷贝文件 ec-canvas目录 放在小程序项目目录中 在页面开启使用echarts { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } 引入 import * as ...
微信小程序中使用echarts
ColdCoder的博客
09-16 2万+
体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo： 下载 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载gitHub项目。 其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。 ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版
微信小程序实现城市索引选择+搜索
aaa123aaasqw的博客
05-11 1092
当前选中位置高度Height=pageY-侧边栏本身距离左上角高度（res.windowWidth / 750 * 180 （rpx，该高度为top：180rpx））搜索城市时，隐藏其他数据，根据搜索值去匹配（indexOf）去匹配关键字，将结果push到一个新的数组中，展示该数组数据。为列表中的字母索引添加相应id，当触摸右侧固定侧边栏时候，动态设置当前id值，实现锚点定位。设置哪个方向可滚动，则在哪个方向滚动到该元素。当触摸开始，移动时，拿到pageY，距离左上角的高度。
微信小程序连接MySQL数据库
热门推荐
sx17860543449的博客
10-27 6万+
微信小程序连接MySQL 简要说明： 承接上一个商品列表页，在服务器端连接MySQL数据库，通过条件匹配查寻数据并显示在客户端 准备工作 1、node.js 2、微信开发者工具 3、MySQL数据库 MySQL配置数据库、数据表 通过可视化的Workbench，可以很容易的建立自己的数据库、数据表。这里直接截个图就好了 推荐一个工具 Navicat for MySQL,以后可以通过它连接自己的数据库 目录结构 客户端代码实现 index.wxml (变化不大，加了个跳转按钮） <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值