推荐一款快速制作表单的微信小插件

本文 3180.5字,需要 7.95 分钟

爸妈搜表单圈

今天又到分享微信小插件的时间了。只要你的小程序有提交信息的地方,你就避免不了使用「表单」功能。

在开发 Android 或者 iOS 的时候,我们基本都会使用别人封装好的表单组件,抑或是,现在主流的 Vue 开发时,也会有很多各式各样的表单组件,如:element-ui。

我们在开发各种小程序时,自然也想着把「表单组件」做成插件,供大家使用。

下面开始说说如何使用这个我们刚发布的「爸妈搜表单圈」小插件。

使用方法:

1、 在微信小程序管理后台——设置——第三方服务,按 AppID(wx6aaef9edf974a564)搜索到该插件并申请授权(ps:一般不会出现拒绝的情况。如果申请被拒绝了,请重新申请,有时候管理员手抽点错了,请见谅! 有任何好的建议可以通过微信、邮箱、手机号联系!)。

2、在要使用该插件的小程序 app.json 文件中引入插件声明。

"plugins": {
    "myform": {
        "version": "1.0.0", 
        "provider": "wx6aaef9edf974a564"
    }
}

3、在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置:

{
  "usingComponents": {
    "myform": "plugin://myform/myform"
  }
}

4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。

<myform  />

使用过我们之前的几个插件,你会发现使用方法还是很简单的。下面开始说说它的属性。

属性

插件的设计就是为了方便使用者,只要输入简单的几个数据,就能达到使用的目标;所以我们的属性尽可能的简单,如下,只有数组 userdata 和按钮文字 submitbtn

属性名

类型

默认值

说明

userdata

Array

[]

表单的数据信息

submitbtn

String

提交信息

提交按钮的自定义文字信息

userdata 属性参数

不同的 type 类型,对应输入的表单所需的参数则也不同。

属性名

是否必填

类型

说明

type

必填

String

输入框类型

title

String

标题名称

others

必填

Object

当前表单类型的所需参数

type 属性的参数

目前我们封装的表单类型主要包含以下几种,未来会不断丰富和完善的。

普通输入框

others 属性的参数

下面就是我们的重点来了,随着 type 的不同,需要的 others 值也不一样,我们现在开始一个个了解下。

普通输入框 type='text'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

placeholder

选填

Object

""

当前表单类型的所需参数

isrequire

选填

Boolean

false

是否为必填项

password

选填

Boolean

false

是否为密码类型

maxlength

选填

Boolean

false

输入的最大度数,-1为不限制最大长度

disabled

选填

Boolean

false

是否禁用

数字输入框 type='number'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

placeholder

选填

Object

""

当前表单类型的所需参数

isrequire

选填

Boolean

false

是否为必填项

password

选填

Boolean

false

是否为密码类型

maxlength

选填

Number

140

输入的最大度数,-1为不限制最大长度

disabled

选填

Boolean

false

是否禁用

电话输入框 type='tel'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

placeholder

选填

Object

""

当前表单类型的所需参数

isrequire

选填

Boolean

false

是否为必填项

password

选填

Boolean

false

是否为密码类型

disabled

选填

Boolean

false

是否禁用

身份证输入框 type='idcard'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

placeholder

选填

Object

""

当前表单类型的所需参数

isrequire

选填

Boolean

false

是否为必填项

password

选填

Boolean

false

是否为密码类型

disabled

选填

Boolean

false

是否禁用

带小数点的数字输入框 type='digit'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

placeholder

选填

Object

""

当前表单类型的所需参数

isrequire

选填

Boolean

false

是否为必填项

password

选填

Boolean

false

是否为密码类型

maxlength

选填

Number

140

输入的最大度数,-1为不限制最大长度

disabled

选填

Boolean

false

是否禁用

多行文本框 type='textarea'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

placeholder

选填

Object

""

当前表单类型的所需参数

isrequire

选填

Boolean

false

是否为必填项

maxlength

选填

Number

140

输入的最大度数,-1为不限制最大长度

disabled

选填

Boolean

false

是否禁用****

日期选择器 type='Date'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

isrequire

选填

Boolean

false

是否为必填项

setfields

选填

String

day

有效值 year,month,day,表示选择器的粒度

startdate

选填

String

开始日期 字符串格式为"YYYY-MM-DD"

enddate

选填

String

结束日期 字符串格式为"YYYY-MM-DD"

disabled

选填

Boolean

false

是否禁用

时间选择器 type='time'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

value

必填

String

对应的内容,没有就传入空字符串

isrequire

选填

Boolean

false

是否为必填项

starttime

选填

String

表示有效时间范围的开始,字符串格式为"hh:mm"

endtime

选填

String

表示有效时间范围的结束,字符串格式为"hh:mm"

disabled

选填

Boolean

false

是否禁用

省市区选择器 type='city'

属性名

是否必填

类型

默认值

说明

segment

必填

String

该输入框的唯一标识

cityname

必填

String

省市区名称 例如: "xx省/xx市/xx区",与编号对应

citynum

必填

Array

省市区编号 例如:["110000", "110100", "110105"],与名称对应

isrequire

选填

Boolean

false

是否为必填项

disabled

选填

Boolean

false

是否禁用

注意:使用方法以官网的使用文档为准: https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx6aaef9edf974a564&token=2059037300&lang=zh_CN

事件和样式

事件属性如下:

提交信息

有默认样式,注意样式的优先级,有的需要添加!important。

提交按钮样式

好了,下面我们举个 Demo 看看效果。

Demo

直接上代码,比较简单。

    <myform 
    userdate='{{userdate}}' 
    submitbtn='{{submitbtn}}'
    
    submit-style='submit-style
    
    bindcommit='commit' 
    />
 data: {
    submitbtn:'提交',
    userdate: [
      {
        type: 'text',
        title: '姓 名 :',
        others: {
          segment: 'name',
          value: '',
          placeholder: '请输入姓名',
          isrequire: true,
          password: false,
          maxlength: 20,
          disabled: false,
        }
      },
      {
        type: 'number',
        title: '数字键盘 :',
        others: {
          segment: 'num',
          value: '',
          placeholder: '请输入',
          isrequire: false,
          password: false,
          maxlength: 11,
          disabled: false,
        },
      },
      {
        type: 'tel',
        title: '手机号码 :',
        others: {
          segment: 'tel',
          value: '',
          placeholder: '请输入',
          isrequire: true,
          password: false,
          disabled: false,
        },
      },
      {
        type: 'idcard',
        title: '身份证号 :',
        others: {
          segment: 'card',
          value: '',
          placeholder: '请输入',
          password: false,
          isrequire: true,
          disabled: false,
        },
      },
      {
        type: 'digit',
        title: '带小数点输入框 :',
        others: {
          segment: 'digit',
          value: '',
          placeholder: '请输入',
          password: false, 
          isrequire: true,
          maxlength: 20,
          disabled: false,
        },
      },
      {
        type: 'Date',
        title: '出生日期 :',
        others: {
          segment: 'birthday', 
          value: '',  
          isrequire: false, 
          setfields: 'day', 
          startdate: '', 
          enddate: '', 
          disabled: false,
        }
      },
      {
        type: 'time',
        title: '时间选择 :',
        others: {
          segment: 'mytime', 
          value: '', 
          isrequire: false,  
          starttime: '', 
          endtime: '',  
          disabled: false,
        }
      },
      {
        type: 'city',
        title: '省市区:',
        others: {
          segment: 'city',
          citynum: [], // 省市区编号
          cityname: "", // 省市区名称 
          isrequire: true,
          disabled: false,
        }
      },
      {
        type: 'textarea',
        title: '留 言 :',
        others: {
          segment: 'message', 
          value: '',
          placeholder: '',
          isrequire: false,
          disabled: false,
          maxlength: 20, 
        },
      }
    ]
    
  },
.submit-style{
  background: rgba(0,0,0,0.3) !important;
}
.spacetop{
  margin-top: 80rpx !important;
}

效果图

返回的数据:是根据传入该字段的唯一标识segment

总结

这是我们团队做的第四个微信小插件,每个插件制作的标准就是,把复杂的逻辑交给我们来做。

使用者只要简单的引入,用最便捷的输入参数,以达到最好的效果。

欢迎微信小程序开发者使用我们的插件:

  • 爸妈搜日历

提供简约不简单的日历基本功能,自定义样式,考勤状态等功能。

插件地址:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx23a9cef3522e4f7c

  • 爸妈搜富文本

小程序富文本处理 rich-text, 将无法识别的标签改为可识别的, 适配移动设备。

插件地址:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx54e7e5b0ebeda242

  • 爸妈搜海报Maker

插件地址:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxbf07f0f22c6c200d

  • 爸妈搜表单圈

插件地址:https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx6aaef9edf974a564&token=2059037300&lang=zh_CN

原文发布于微信公众号 - coding01(coding01)

原文发表时间:2018-11-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

不容忽略的——CSS规范

         当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

1082
来自专栏卡少编程之旅

四个Vue的写法优化技巧

3466
来自专栏前端说吧

CSS3中的animation动画

2925
来自专栏nice_每一天

如何编写高效的jQuery代码(转载)

1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使...

722
来自专栏Java技术分享圈

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比

1472
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使...

1254
来自专栏前端布道

Angular开发实践(四):组件之间的交互

在Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件...

4958
来自专栏前端说吧

JS-DOM 综合练习-动态添加删除班级成绩表

3748
来自专栏web前端

Vuejs --02 Vue实例

一、构造器      1、vm(view model 表示Vue实例),每个Vuejs都是通过构造函数Vue创建Vue的根实例启动 var vm = new V...

2288
来自专栏AndroidTv

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1224

扫码关注云+社区

领取腾讯云代金券