精华内容
下载资源
问答
  • 微信小程序最难实现的公共业务是什么?应该是表单校验,这篇文章主要介绍了微信小程序如何实现表单校验功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 包含验证包WxValidate.js以及该包详细的使用说明文档。按照文档中的步骤可以对微信小程序中页面的表单元素进行正确性验证。
  • 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下: 表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。 而这些组件操作方式多样,可分为滑动、...
  • 主要介绍了微信小程序form表单组件示例代码,文章给大家提到了一些相关属性名和类型及说明,需要的朋友可以参考下
  • 主要介绍了微信小程序 input表单与redio及下拉列表的使用实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 主要介绍了微信小程序表单验证功能,结合完整实例形式分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,需要的朋友可以参考下
  • 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的 ...       1.小程序相对于...
  • 主要为大家详细介绍了微信小程序表单弹窗实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 表单提交是 wx.request上传图片是 wx.uploadFile你需要写一个通用图片上传接口,上传图片后台返回图片的url。这个通用接口在任何需要提交图片的表单都可以用到。添加图片的时候就调用图片上传接口,拿到图片的url,...

    拆开写。

    表单提交是 wx.request

    上传图片是 wx.uploadFile

    你需要写一个通用图片上传接口,上传图片后台返回图片的url。这个通用接口在任何需要提交图片的表单都可以用到。

    添加图片的时候就调用图片上传接口,拿到图片的url,存在表单数据里。提交表单按照正常表单那样子提交就好了。

    export function uploadFiles(filePath,token){ // 上传文件通用接口

    return new Promise((resolve, reject) => {

    wx.uploadFile({

    url:`${URL_PREV}upload`,

    filePath:filePath,

    name: 'file',

    header:{

    'content-type':'multipart/form-data',

    'x-token':token

    },

    success: function(res){

    let data = JSON.parse(res.data);

    if (data.code==200) {

    resolve(data.link);

    }else {

    reject(data.message);

    }

    }

    })

    }).catch(function(e){

    wx.showToast({

    title: e,

    icon: 'none',

    duration: 1500

    })

    });

    };

    展开全文
  • warn : "是否公开信息:"+isPub+",手机号:"+phone+",密码:"+pwd+",性别:"+sex}}css代码.section{display: flex;flex-direction: row;margin: 20rpx;}.section view{margin-right: 20rpx;...

    效果

    6369074e83bc

    image

    html代码

    是否公开信息

    手机号

    密码

    性别

    提交

    重置

    {{warn ? warn : "是否公开信息:"+isPub+",手机号:"+phone+",密码:"+pwd+",性别:"+sex}}

    css代码

    .section{

    display: flex;

    flex-direction: row;

    margin: 20rpx;

    }

    .section view{

    margin-right: 20rpx;

    }

    .btn-area{

    margin: 20rpx;

    }

    button{

    margin: 10rpx 0;

    }

    js代码

    let app = getApp();

    Page({

    data: {

    isSubmit: false,

    warn: "",

    phone: "",

    pwd: "",

    isPub: false,

    sex: "男"

    },

    formSubmit: function (e) {

    console.log('form发生了submit事件,携带数据为:', e.detail.value);

    let { phone, pwd, isPub, sex } = e.detail.value;

    if (!phone || !pwd) {

    this.setData({

    warn: "手机号或密码为空!",

    isSubmit: true

    })

    return;

    }

    this.setData({

    warn: "",

    isSubmit: true,

    phone,

    pwd,

    isPub,

    sex

    })

    },

    formReset: function () {

    console.log('form发生了reset事件')

    }

    })

    展开全文
  • 微信小程序——表单

    千次阅读 2018-07-02 11:11:27
    微信小程序表单和web的表单很相似,如代码所示:<from bindsubmit="formSubmit" bindreset="formReset"> <text>联系人</text> <input ...
    
    

    微信小程序的表单和web的表单很相似,如代码所示:

    <from bindsubmit="formSubmit" bindreset="formReset">
      <text>联系人</text>
      <input vlaue="白木乔" ></input>
      <radio-group>
      <radio wx:for="{{items}}"></radio>
      </radio-group>
      <text>手机号</text>
      <input password='true'></input>
      <text>评价</text>
      <textarea placeholder="请给我们的服务提出宝贵的意见" name="textarea"/>
      <button form-type="submit"> 提交 </button>
    </from>

    这是一个非常简单并且常用的一个表单形式,由<from/>表单,<input/>输入框,<radio/>单选框,<textarea/>多行输入框,<button/>按钮 ,除此之外,表单中还通常会用到<checkbox/>复选框,<picker/>从底部弹起的滚动选择器,<pick-view/>嵌入页面的滚动选择器,<slider/>滑动选择器,<switch/>开关选择器 等一些组件。这些都是很容易上手的组件,重点是通过wxss样式能让他们更加好看。

    除了上面介绍的一些关于表单的组件,还有一个组件是<label/>,下面重点介绍一下:

    <label/>是用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。

    for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

    目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>

    给个例子很容易理解

    <view class="section section_gap">
    <view class="section__title">复选框</view>
    <checkbox-group class="group" bindchange="checkboxChange">
      <view class="label-1" wx:for="{{checkboxItems}}">
        <label>
          <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
          <view class="label-1__icon">
            <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
          </view>
          <text class="label-1__text">{{item.value}}</text>
        </label>
      </view>
    </checkbox-group>
    </view>
    
    <view class="section section_gap">
    <view class="section__title">单选框</view>
    <radio-group class="group" bindchange="radioChange">
      <view class="label-2" wx:for="{{radioItems}}">
        <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
        <view class="label-2__icon">
          <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
        </view>
        <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
      </view>
    </radio-group>
    </view>

    .js

    Page({
      data: {
        checkboxItems: [
          {name: 'USA', value: '美国'},
          {name: 'CHN', value: '中国', checked: 'true'},
          {name: 'BRA', value: '巴西'},
          {name: 'JPN', value: '日本', checked: 'true'},
          {name: 'ENG', value: '英国'},
          {name: 'TUR', value: '法国'},
        ],
        radioItems: [
          {name: 'USA', value: '美国'},
          {name: 'CHN', value: '中国', checked: 'true'},
          {name: 'BRA', value: '巴西'},
          {name: 'JPN', value: '日本'},
          {name: 'ENG', value: '英国'},
          {name: 'TUR', value: '法国'},
        ],
        hidden: false
      },
      checkboxChange: function(e) {
        var checked = e.detail.value
        var changed = {}
        for (var i = 0; i < this.data.checkboxItems.length; i ++) {
          if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
            changed['checkboxItems['+i+'].checked'] = true
          } else {
            changed['checkboxItems['+i+'].checked'] = false
          }
        }
        this.setData(changed)
      },
      radioChange: function(e) {
        var checked = e.detail.value
        var changed = {}
        for (var i = 0; i < this.data.radioItems.length; i ++) {
          if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
            changed['radioItems['+i+'].checked'] = true
          } else {
            changed['radioItems['+i+'].checked'] = false
          }
        }
        this.setData(changed)
      }
    })


    展开全文
  • 只是当时这个系统的时候,由于需要使用java语言作为后端实现与微信小程序界面数据交互,看遍网上很多的案例基本后台都是php语言用于编写接口,几乎没找到过java作为后台语言的案例。写这篇博客只是为了帮助需要...

    基于微信小程序的培训机构系统

    前言:该系统作为本科毕业设计,可能还有很多的不足。只是当时做这个系统的时候,由于需要使用java语言作为后端实现与微信小程序界面数据交互,看遍网上很多的案例基本后台都是php语言用于编写接口,几乎没找到过java作为后台语言的案例。写这篇博客只是为了帮助需要后台使用java语言来实现的朋友。

    一、项目介绍

    微信小程序端:

    1. 小程序端管理员实现对信息模块的管理,包含课程、讲师、学员三类模块。
    2. 小程序端用户实现各类模块内容的浏览。

    Web后台管理端:

    1. Web端管理员实现对信息模块的管理;
    2. Web端讲师实现对培训机构学员课程成绩打分等功能;
    3. Web端学员实现对培训机构课程的报名、退选以及课程成绩查看等功能;

    二、相关技术

    1. 微信小程序(js、css前端基础):前端小程序页面;
    2. SSM框架(Spring+SpringMVC+Mybatis):微信小程序界面需要调用的接口以及后台的管理系统;
    3. Maven:项目管理必备的技术;
    4. Shiro框架:保证系统安全的框架;
    5. Bootstrap前端框架:Web后台管理端的后台界面;

    三、项目配置搭建
    链接:https://blog.csdn.net/qq_38285537/article/details/91326332

    四、系统结构
    三层模块:客户端、服务端、数据端

    五、界面展示
    管理员默认账号为admin,密码123,登录进入管理导航界面;
    用户登录界面
    在这里插入图片描述
    首页管理导航,实现对学员、讲师、课程进行增删改查的操作。
    在这里插入图片描述
    添加学员表单界面
    在这里插入图片描述
    学员名单表格页面使用表格的形式进行显示学员的信息数据。由于微信小程序展示的数据界面比较小,通过设计成可以上下左右滑动表格的方式来查看数据,可以使得小程序也展现表格形式的页面。
    在这里插入图片描述
    在这里插入图片描述
    修改学员界面
    在这里插入图片描述
    用户首页界面,登录账号:1001,密码:123
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    热门课程内容展示
    在这里插入图片描述
    在这里插入图片描述
    我的功能界面
    在这里插入图片描述
    Web端后台管理模块
    管理员模块:课程管理、学员管理、课程管理
    在这里插入图片描述
    讲师模块:课程成绩打分,查看教授课程
    在这里插入图片描述
    学员模块:对课程进行报名以及退选,查看报名课程,查看讲师给自己报名课程的评分;
    在这里插入图片描述

    本毕设系统三个月陆陆续续所完成,也花费了大量的时间和经历,下面提供源码进行参考学习。

    源码下载地址:

    • 该系统源代码上传gitee平台供参考(求Star):https://gitee.com/tangjiadong/Training-master

    本博客属于个人原创,转载请注明出处;
    本系统还要很多不足的地方,由于毕设时间的限制,实现就好;
    作者:CodeTang

    展开全文
  • 微信小程序from表单的实现 <form bindsubmit="loginHandle"> **加粗样式** <view class="container"> <view class="header"> <image src="../images/1.png" mode="aspectFit"></...
  • 微信小程序表单验证

    2019-11-28 12:45:38
    由于微信小程序表单组件没有自带的验证功能,因此要针对每一项进行判断比较繁琐 因此封装了一个表单验证js, 具体验证规则根据自己所用到的进行添加,具体案例代码片段点击链接微信小程序表单验证完整代码片段 ...
  • 微信小程序提交表单

    2020-12-08 13:20:55
    先看效果 身份选择使用了picker 具体代码: form.wxml <view class="modify-form"> <form bindsubmit='getForm'> ...若出现,可换成bindinput方式,见这篇博文 微信小程序bindsubmit真机提交表单失败
  • 做微信小程序,对于将用户输入的表单数据一次性提取到js中比较疑惑,后处理流程如下: 参考官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/form.html 1.写表单的wxml页面 如下的wxml...
  • 微信小程序表单

    千次阅读 2020-09-07 18:13:15
    微信小程序表单 跟朋友了一个量衣定制的小程序页面,了主要是采集用户的身体数据,分享给大家,复制代码过去即可使用! 效果: 代码: wxml: <view class='baseInfo'> <text>基本信息</text&...
  • 微信小程序表单动态取值 app.js updateValue(e) { let name = e.currentTarget.dataset.name; let nameMap = {} nameMap[name] = e.detail && e.detail.value return nameMap }, 对应表单的wxml 加上对应的...
  • 主要为大家详细介绍了微信小程序表单验证错误提示效果,点击确认发布不能为空错误提示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序表单组件的应用
  • 微信小程序form表单登录

    千次阅读 2019-04-22 10:21:06
    1.首先是wxml文件布局设计 <!--pages/login/login.wxml--> ...输入的用户名需要发送给...刚刚接触微信小程序,开始写登录时花了点时间,因为刚刚开始不太熟悉微信小程序的语法,不过参考API很快就写出来了。
  • 微信小程序form表单提交到数据库

    万次阅读 多人点赞 2018-11-28 12:39:32
    1.小程序目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html 2.Wxml文件代码 &lt;form ...
  • 微信小程序中的input等表单组件在form中,可以直接通过submit的方法来获取值 而在非form中,只能通过监听input的键盘输入获取 WXML &amp;lt;input class='create-title' placeholder=&quot;投票标题&...
  • 写了一个简单的表单,跟数据库交互,增删改查。现在想把表单提交之后,发送消息通知管理员;或者提交之后让管理员审核。二选一,各位大神有什么好办法吗?</p>
  • 微信小程序form基础库 1.0.0 开始支持,低版本需兼容处理。表单。将组件内的用户输入的switchinputcheckboxsliderradiopicker提交。当点击form表单中 form-type 为 submit 的button组件时,会将表单组件中的 value...
  • 个人理解动态表单为根据后端数据需求,在前端用不同组件进行展示然后返回表单数据并提交的过程。上图: 图中项目为侧边弹窗,标题为输入框故障类型和优先级为输入框,内容为textarea,大致可以归纳为表单由输入框...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,449
精华内容 6,579
关键字:

微信小程序做表单

微信小程序 订阅