前言：此系列，结合Demo的源码，做一些实践和讨论：

1 Demo的效果：

微信小程序给出的button的Demo效果如上：

2 源码分析：

2.1 button.js

js文件里面，定义了一些变量和函数，我逐一说一下：

type：这里在button的组件说明文档里面有定义：

type 有效值：

值	说明
primary	绿色
default	白色
warn	红色

很显然，则表示Button的颜色类型

定义pageObject 设置页面对象，其实就是一个组合的数组列：

包括页面用到的数据，然后，初始化的值设定如下：

后面定义了几个响应的函数：

setDisabled: function(e) {this.setData({disabled: !this.data.disabled})},setPlain: function(e) {this.setData({plain: !this.data.plain})},setLoading: function(e) {this.setData({loading: !this.data.loading})}
}

设定data[key]来决定的button的type的的大小，这里根据三个不同类型，注意设定好数据，然后

调用：Page(pageObject)

把数据写到前端渲染，

全部源码贴下：

var types = ['default', 'primary', 'warn']
var pageObject = {data: {defaultSize: 'default',primarySize: 'default',warnSize: 'default',disabled: false,plain: false,loading: false},setDisabled: function(e) {this.setData({disabled: !this.data.disabled})},setPlain: function(e) {this.setData({plain: !this.data.plain})},setLoading: function(e) {this.setData({loading: !this.data.loading})}
}for (var i = 0; i < types.length; ++i) {(function(type) {pageObject[type] = function(e) {var key = type + 'Size'var changedData = {}changedData[key] =this.data[key] === 'default' ? 'mini' : 'default'this.setData(changedData)}})(types[i])
}Page(pageObject)

2.2 button.wxml

wxml文件用来设定Demo的页面结构，很显然，这里把各个button的类型和渲染模式进行了列举，

应该比较好理解，大致说一下几个点，

2.2.0 几个典型的按钮渲染页面表现：

plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标

2.2.1 form-type 有效值：

form-type 是给from表单提交用的，微信里面表单的提交和button有紧密的关联，这在我的上一篇博文里面已经提到了。

form-type 有效值：

值	说明
submit	提交表单
reset	重置表单

页面源码如下：

按下button后，将调用form.js里面的处理函数：

  formSubmit: function (e) {console.log('form发生了submit事件，携带数据为：', e.detail.value)},formReset: function (e) {console.log('form发生了reset事件，携带数据为：', e.detail.value)this.setData({chosen: ''})

上图的输入：

试验打印如下：

2.2.2 open-type 有效值：

值	说明	最低版本
contact	打开客服会话	1.1.0
share	触发用户转发，使用前建议先阅读使用指引	1.2.0
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	1.3.0
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明	1.2.0
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	1.9.5
openSetting	打开授权设置页	2.0.7
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0

开发参考：button的主要属性和参数：

button

按钮。

属性名	类型	默认值	说明	生效时机	最低版本
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String		用于 `<form/>` 组件，点击分别会触发 `<form/>` 组件的 submit/reset 事件
open-type	String		微信开放能力		1.1.0
hover-class	String	button-hover	指定按钮按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态		1.5.0
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
lang	String	en	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。	open-type="getUserInfo"	1.3.0
bindgetuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致	open-type="getUserInfo"	1.3.0
session-from	String		会话来源	open-type="contact"	1.4.0
send-message-title	String	当前标题	会话内消息卡片标题	open-type="contact"	1.5.0
send-message-path	String	当前分享路径	会话内消息卡片点击跳转小程序路径	open-type="contact"	1.5.0
send-message-img	String	截图	会话内消息卡片图片	open-type="contact"	1.5.0
show-message-card	Boolean	false	显示会话内消息卡片	open-type="contact"	1.5.0
bindcontact	Handler		客服消息回调	open-type="contact"	1.5.0
bindgetphonenumber	Handler		获取用户手机号回调	open-type="getPhoneNumber"	1.2.0
app-parameter	String		打开 APP 时，向 APP 传递的参数	open-type="launchApp"	1.9.5
binderror	Handler		当使用开放能力时，发生错误的回调	open-type="launchApp"	1.9.5
bindopensetting	Handler		在打开授权设置页后回调	open-type="openSetting"	2.0.7

实践：

实践1：设置button的‘禁用’属性修改：

把微信的demo，源码做了如下的修改，加入了，调用函数：setdisable,然后，把disable属性由原来的true,改为页面数据disable,这样，

      <button type="primary" bindtap="setDisabled">页面主操作 Normal</button><button type="primary" loading="true">页面主操作 Loading</button><button type="primary" disabled="{{disabled}}">页面主操作 Disabled</button>

setDisabled: function(e) {this.setData({disabled: !this.data.disabled})},

data: {defaultSize: 'default',primarySize: 'default',warnSize: 'default',disabled: false,plain: false,loading: false},

这样按其中一个按键，就可控制例外一个按键的jing禁用了。

--》

【源码分析】微信小程序 - 01表单组件 - 01button - 实践相关推荐

微信读书登陆界面java_（JAVA后端）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好...
转载地址:(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好转载请注明出处一.环境搭建相关环境软件:JDK1 ...
[含文档+源码等]微信小程序校园生活小助手+后台管理系统前后分离VUE[包运行成功]
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 [含文档+源码等]微信小程序校园生活小助手+后台管理系统前后分离V ...
[含论文+源码等]微信小程序电影购票+后台管理系统源码
IT源码 <微信小程序电影购票+后台管理系统>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序做的电影购票前台和Java做的后台管理系统: 微信 ...
（微信小程序）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
转载地址:(微信小程序)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好转载请注明出处作者:Happy王子乐个人网站(整理 ...
含论文+辩论PPT+源码等]微信小程序ssm社区心理健康服务平台+后台管理系统
下载地址: https://download.csdn.net/download/m0_71595576/85519044?spm=1001.2014.3001.5503 项目介绍: 含论文+辩论PP ...
[含论文+源码等]微信小程序居家养老+后台管理系统[包运行成功]
下载地址:https://download.csdn.net/download/BSDKT/85347133 项目介绍: [含论文+源码等]微信小程序居家养老+后台管理系统[包运行成功] 系统说明: ...
600多个微信小程序源码_微信小程序在线音乐播放器及源码下载
引言自己刚开始学微信小程序的时候,自己做着玩玩的. 现在分享出来给大家学习用用,如果觉得有借鉴意义,我的目的就算达到了. 成果效果图废话不多说,直接上效果图: 这里本来是GIF的图,但是太大了 ...
点餐小程序源码_微信小程序餐饮点餐商城前端模版
微信小程序--餐饮点餐商城,是针对餐饮行业推出的一套完整的餐饮解决方案,实现了用户在线点餐下单.外卖.叫号排队.支付.配送等功能,完美的使餐饮行业更高效便捷! 运行小程序看效果双击运行第一步安装的小 ...
计算机实战项目、毕业设计、课程设计之[含论文+辩论PPT+源码等]微信小程序社区疫情防控+后台管理|前后分离VUE[包运行成功
<微信小程序社区疫情防控+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...

【源码分析】微信小程序 - 01表单组件 - 01button - 实践