05 常用组件 和 小程序WXS语法

小程序 中常用组件 ： 

view 组件：  

类似于 html 中的div   ,用来做   视图容器

属性2	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态（冒泡）	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

hover-class 属性： 

指定当 我们按下去的时候，view 显示的样式，  

当然也可以在 view 组件上 绑定一些 事件，  

scroll-view 组件：  

在小程序中用得很多，  

有时候我们的一些视图在手机指定的宽度和高度不够存放。那么可以放在scroll-view中。

scroll-view 之  横向滚动：  

设置横向滚动需要做三件事：

1，给scroll-view添加scroll-x="true"属性。
2，给scroll-view添加white-space:nowrap;样式。
3，给scroll-view中的子元素设置为display:inline-block;。

scroll-view 之  纵向滚动：  

设置纵向滚动需要做两   件事：

1，给scroll-view添加scroll-y="true"属性。
2，给scroll-view设置高度。

scroll-view 之 相关的属性 ：

属性	类型	默认值	必填	说明	最低版本
scroll-x	boolean	false	否	允许横向滚动	1.0.0
scroll-y	boolean	false	否	允许纵向滚动	1.0.0
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件	1.0.0
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件	1.0.0
scroll-top	number/string		否	设置竖向滚动条位置	1.0.0
scroll-left	number/string		否	设置横向滚动条位置	1.0.0
scroll-into-view	string		否	（滚动到指定子元素）   指定元素应该设置 id 属性	1.0.0
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡	1.0.0
enable-back-to-top	boolean	false	否	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	1.0.0
enable-flex	boolean	false	否	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	2.7.3
scroll-anchoring	boolean	false	否	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。	2.8.2
refresher-enabled	boolean	false	否	开启自定义下拉刷新	2.10.1
refresher-threshold	number	45	否	设置自定义下拉刷新阈值	2.10.1
refresher-default-style	string	"black"	否	设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式	2.10.1
refresher-background	string	"#FFF"	否	设置自定义下拉刷新区域背景颜色	2.10.1
refresher-triggered	boolean	false	否	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发	2.10.1
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发	1.0.0
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发	1.0.0
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}	1.0.0
bindrefresherpulling	eventhandle		否	自定义下拉刷新控件被下拉	2.10.1
bindrefresherrefresh	eventhandle		否	自定义下拉刷新被触发	2.10.1
bindrefresherrestore	eventhandle		否	自定义下拉刷新被复位	2.10.1
bindrefresherabort	eventhandle		否	自定义下拉刷新被中止	2.10.1

scroll-view 案例之 红包页面实现 ：

暂时缺少，  

通过js 动态获取手机硬件的信息： 

我们现在要设置一个高度，但是，不同的手机的高度是不同 的，所以我们要动态获取 手机硬件信息，  https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html

wx.getSystemInfo(Object object)   获取系统信息

Object wx.getSystemInfoSync()     wx.getSystemInfo 的同步版本

需要注意的是： windowHeight 是指的除了导航栏  和 tabBar之外的 高度，   

而 screenHeight 指的是整个屏幕的高度，它包含了 导航栏 和 tabBar 的高度，  

获取到数据之后，可以通过在wxml 中 使用 style 属性将数据设置上，  

此时的效果就是 将 整个手机屏幕占满了：

swiper 组件（轮播图）：  

swiper就是一个轮播图的组件，  

在app里面，轮播图（banner）是非常常见的，因此小程序专门针对这个出了一个组件就是swiper。

swiper组件基本用法：

swiper就是一个包裹轮播图的容器，里面的子元素必须是swiper-item组件。

swiper可以自动的轮播子元素，并且天生就带有指示点，还可以使用手指左右滑动。

首先它的默认图片的宽度和高度都不是 100% 显示，我们可以设置为 100%显示，   

此时，图片就显示完全了，但是此时它不会自动滚动，我们可以使用属性 autoplay 

如果要显示小点：使用 indicator-dots  

indicator-color  和  indicator-active-color

swiper组件  的常用属性：

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index（从0开始，如果设置了它，一进来就会先切换到该index）	1.0.0
interval	number	5000	否	自动切换时间间隔(默认是5s)	1.0.0
duration	number	500	否	滑动动画时长(默认0.5s)	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	number	1	否	同时显示的滑块数量(同时 展示 图片的个数  )	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

easing-function 的合法值

值	说明	最低版本
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

movable-view 组件：  

正常情况下，一个组件设置了后，如果不通过js或者css动画，那么是很难实现移动的。

如果我们有些组件设置完成后想要能够移动。那么我们就可以借助movable-view组件来实现。

movable-view组件，正如他的名字一样，是可以移动的容器，但是这个容器必须要放在movable-area中才能移动。

因此实际上是这两个组件配合使用才能实现移动的效果的。

movable-view 基本用法：

movable-view  的属性：

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

属性	类型	默认值	必填	说明	最低版本
direction	string	none	否	movable-view的移动方向，属性值有all、vertical、horizontal、none	1.2.0
inertia	boolean	false	否	movable-view是否带有惯性	1.2.0
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view是否还可以移动 （可以通过设置样式 ：  overflow:hidden）	1.2.0
x	number		否	定义初始x的位置，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画	1.2.0
y	number		否	定义初始y的位置，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画	1.2.0
damping	number	20	否	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	1.2.0
friction	number	2	否	摩擦系数，用于控制  惯性滑动中   的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	1.2.0
disabled	boolean	false	否	是否禁用	1.9.90
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在movable-view内（如果想要在moveable-area里也可缩放，要设置scale-area=true）	1.9.90
scale-min	number	0.5	否	定义缩放倍数最小值	1.9.90
scale-max	number	10	否	定义缩放倍数最大值	1.9.90
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10	1.9.90
animation	boolean	true	否	是否使用动画	2.1.0
bindchange	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}	1.9.90
bindscale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持	1.9.90
htouchmove	eventhandle		否	初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch	1.9.90
vtouchmove	eventhandle		否	初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch	1.9.90

bindchange 返回的 source 表示产生移动的原因

值	说明
touch	拖动
touch-out-of-bounds	超出移动范围
out-of-bounds	超出移动范围后的回弹
friction	惯性
空字符串	setData(通过代码 产生的移动)

Bug & Tip

1. tip: movable-view 必须设置width和height属性，不设置默认为10px
2. tip: movable-view 默认为绝对定位，top和left属性为0px
3. movable-view 是可以比 movale-area 大的，   （但是，在移动的时候必须要包含 movable-area）

通过绑定事件，实现点击按钮移动到固定位置：

movable-view 案例 左滑删除案例：  

代码丢失：思路是  利用 bindtouchstart ，  bindhtouchmove  来确定是左滑还是  右滑  ,  然后在  bindchange 事件中进行设置，  而且对于多个滑块要 注意使用data-id 来设置区分！！！ 使用数组distances 来设置多个滑块的  位置  ~~~

icon 组件：

图标 组件。

组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

icon组件小案例：成功页面： 

效果如图： 

icon组件小案例：倒计时页面：

效果如图： 

icon组件小案例：实现搜索栏：

此时点击 取消icon 就会清除内容，  

text 组件 ：

有的时候我们需要对文本复制，选中，就不能用view 组件了，这时要用text组件，  

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选（使用view组件无法实现）	1.1.0
space	string		否	显示连续空格（使用即代表 连续空格，不用时只显示一个空格）	1.4.0
decode	boolean	false	否	是否解码（开启就可以解析一些 例如，&lt, &gt ）	1.4.0

space 的合法值：

值	说明	最低版本
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

Bug & Tip：

1. tip: decode可以解析的有   < > & '     （注意：不要少了 分号  ）
2. tip: 各个操作系统的空格标准并不一致。
3. tip:text 组件内只支持 text 嵌套。
4. tip: 除了 text 组件   以外的其他节点都无法长按选中。（这是 重点！！！   ）
5. bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效。

text 和 view的区别： 

text是 行内元素  ，view 是 块元素  ，（注：  行内元素是无法设置 宽度，高度的 ）   

 

rich-text 组件 ：  

富文本，（就是一张网页），现在就是如何将一张网页显示到小程序中，  

属性	类型	默认值	必填	说明	最低版本
nodes	array/string	[]	否	节点列表/HTML String	1.4.0
space	string		否	显示连续空格	2.4.1

第一种方法是 : html_str:  （不推荐）

 此时由于有  box class ，所以需要在 wxss 中给出box样式， 

效果为： 

第二种方法是 : 使用节点列表:  （推荐 ，性能高）

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

　　　　　　文本节点：type = text*

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

注：只有受信任的 html 节点才可以被使用，

受信任的HTML节点及属性：

全局支持class和style属性，不支持id属性。

节点	属性
a
abbr
address
article
aside
b
bdi
bdo	dir
big
blockquote
br
caption
center
cite
code
col	span，width
colgroup	span，width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img	alt，src，height，width
ins
label
legend
li
mark
nav
ol	start，type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
table	width
tbody
td	colspan，height，rowspan，width
tfoot
th	colspan，height，rowspan，width
thead
tr	colspan，height，rowspan，width
tt
u
ul

Bug & Tip：

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
2. tip: rich-text 组件内屏蔽所有节点的事件。
3. tip: attrs 属性不支持 id ，支持 class 。
4. tip: name 属性大小写不敏感。
5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6. tip: img 标签仅支持网络图片。
7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

虽然推荐使用  nodes列表，但是这种方式极其的 麻烦，我们可以用下面  这个工具来 解决 （hhhhh）

页面生命周期： 

以下内容你不需要立马完全弄明白，不过以后它会有帮助。

下图说明了页面 Page 实例的生命周期。

progress 组件 ：

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明	最低版本
percent	number		否	设置进度条的  百分比   ，  0~100	1.0.0
show-info	boolean	false	否	在进度条右侧显示百分比	1.0.0
border-radius	number/string	0	否	圆角大小	2.3.1
font-size	number/string	16	否	右侧百分比文字  字体大小	2.3.1
stroke-width	number/string	6	否	进度条线的宽度	1.0.0
color	string	#09BB07	否	进度条颜色（推荐使用activeColor）	1.0.0
activeColor	string	#09BB07	否	已选择的进度条的颜色	1.0.0
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色	1.0.0
active	boolean	false	否	进度条从左往右的动画（动画动到 我们设置的percent ）	1.0.0
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播(一般使用它)	1.7.0
duration	number	30	否	进度增加1%所需毫秒数	2.8.2
bindactiveend	eventhandle		否	动画完成事件	2.4.1

代码： 

 

button  组件：

按钮。

属性	类型	默认值	必填	说明	最低版本
size	string	default	否	按钮的大小(mini 是小的  )	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
plain	boolean	false	否	按钮是否镂空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用（就不能点击了）	1.0.0
loading	boolean	false	否	名称前是否带 loading 图标 （转圈圈...... ）	1.0.0
form-type	string		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset （reset是  将表单中数据清除）事件	1.0.0
open-type	string		否	微信开放能力	1.1.0
hover-class	string	button-hover	否	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒	1.0.0
lang	string	en	否	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。	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
app-parameter	string		否	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	1.9.5
show-message-card	boolean	false	否	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效	1.5.0
bindgetuserinfo	eventhandle		否	用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效	1.3.0
bindcontact	eventhandle		否	客服消息回调，open-type="contact"时有效	1.5.0
bindgetphonenumber	eventhandle		否	获取用户手机号回调，open-type=getPhoneNumber时有效	1.2.0
binderror	eventhandle		否	当使用开放能力时，发生错误的回调，open-type=launchApp时有效	1.9.5
bindopensetting	eventhandle		否	在打开授权设置页后回调，open-type=openSetting时有效	2.0.7
bindlaunchapp	eventhandle		否	打开 APP 成功的回调，open-type=launchApp时有效	2.4.4

size 的合法值

值	说明	最低版本
default	默认大小
mini	小尺寸

type 的合法值

值	说明	最低版本
primary	绿色
default	白色
warn	红色

form-type 的合法值

值	说明	最低版本
submit	提交表单
reset	重置表单

open-type 的合法值

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

lang 的合法值:

值	说明	最低版本
en	英文
zh_CN	简体中文
zh_TW	繁体中文

Bug & Tip:

1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. tip: bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
3. tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4. tip: 从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
5. tip: 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 from 在自定义组件外，将会使这个 button 的 form-type 失效。

 

button 组件   -下拉加载更多 案例：

 直接在 button 上设置 boder:none 是不可以的， 要在::after伪类 上进行设置，  

如下才可：

这里是模拟 网络请求，

代码丢失： 思路是：每次都有20个数据刷新，使用Page() 中的onReachBottom()事件，使用setTimeout() 来执行刷新，  当数据加载完之后 ，使用clearTimeout()来清理，   

button  的form-type属性 ：

将表单  提交给js （发送给哪个 js函数通过   bindsubmit 来绑定！！！  ）, 

button 必须放到 form 标签中，  

这里拿登陆来举例，

form-type 的reset 清除功能，

checkbox 多选框  组件：

使用checkbox 在放在checkbox-group 中使用，  

多选框：

属性	类型	默认值	必填	说明	最低版本
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value（一般不用真实的数据，而是用  id）	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	当前是否选中，可用来设置默认选中	1.0.0
color	string	#09BB07	否	checkbox的颜色，同css的color	1.0.0

在  checkbox-group 中绑定事件:

多项选择器，内部由多个checkbox组成。

属性	类型	默认值	必填	说明	最低版本
bindchange	EventHandle		否	checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}	1.0.0

点击提交 ，会将数据提交给 js中，   

checkbox 多选框 修改样式：

input 组件 ：

输入框。该组件是原生组件，使用时请注意相关限制

属性	类型	默认值	必填	说明	最低版本
value	string		是	输入框的初始内容 （可用于清空 输入框... ）	1.0.0
type	string	text	否	input 的类型	1.0.0
password	boolean	false	否	是否是   密码类型	1.0.0
placeholder	string		是	占位内容	1.0.0
placeholder-style	string		是	指定 placeholder 的样式  （以属性的方式）	1.0.0
placeholder-class	string	input-placeholder	否	指定 placeholder 的样式类 （单独以来的方式  ）	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度	1.0.0
cursor-spacing（重点）	number	0	否	指定光标与键盘的距离，    取 input 距离底部的距离   和 cursor-spacing 指定的距离     的最小值作为光标与键盘的距离 （注意：使用前提是： 输入框被 键盘遮挡才有用！！！）	1.0.0
auto-focus	boolean	false	否	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘	1.0.0
focus	boolean	false	否	获取焦点(自动获取 焦点  )	1.0.0
confirm-type	string	done	否	设置键盘右下角按钮的文字，仅在type='text'时生效	1.1.0
confirm-hold	boolean	false	否	点击键盘右下角按钮时是否保持键盘不收起	1.1.0
cursor	number		是	指定focus时的光标位置  （可能有bug  暂不用  ）	1.5.0
selection-start	number	-1	否	光标起始位置，自动聚集时有效，需与selection-end搭配使用	1.9.0
selection-end	number	-1	否	光标结束位置，自动聚集时有效，需与selection-start搭配使用	1.9.0
adjust-position	boolean	true	否	键盘弹起时，是否自动上推页面（设置为true 时，当被遮挡时 会自动上推页面 ）  调整整个页面，	1.9.90
hold-keyboard	boolean	false	否	focus时，点击页面的时候不收起键盘	2.8.2
bindinput	eventhandle		是	键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。（可以使用的场景：输入内容自动搜索匹配的 条目 ！！！）	1.0.0
bindfocus	eventhandle		是	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持	1.0.0
bindblur	eventhandle		是	输入框失去焦点时触发，event.detail = {value: value}	1.0.0
bindconfirm	eventhandle		是	点击完成按钮时触发，event.detail = {value: value}	1.0.0
bindkeyboardheightchange	eventhandle		是	键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}	2.7.0

type 的合法值

值	说明	最低版本
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

confirm-type 的合法值

值	说明	最低版本
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

Bug & Tip：

1. tip: confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持
2. tip : input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family
3. tip : 在 input 聚焦期间，避免使用 css 动画
4. tip : 对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况， form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors wx://form-field
5. tip : 键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的height值应该忽略掉
6. bug : 微信版本 6.3.30, focus 属性设置无效
7. bug : 微信版本 6.3.30, placeholder 在聚焦时出现重影问题

注： 关于  cursor-spacing 

在输入框被键盘挡住的时候，指定光标与键盘的距离，单位px（2.4.0起支持rpx）。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。如果没有指定这个值，并且输入框被挡到了，那么距离键盘的距离为0。

WXS概述： 

Weixin Script:

在传统的网页开发中，HTML中是可以写JavaScript代码的，而在小程序中，是不允许在WXML文件中写JavaScript的，但是有些时候，我们需要在wxml中实现一些逻辑的处理。比如举个例子，我们渲染一个数字到wxml中，在wxml文件中根据这个数字来渲染具体星期几。

这时候通过wxml文件中就做不了了，或者只能在JavaScript先计算好再渲染。

下面展示 在js中操作完之后，才能显示：

此时效果：

虽然上面实现了显示星期的 需要，但是，这样无疑是麻烦的，

下面就可以借助 WXS 的语法 ，就可以解决， WXS 非常类似于 在html 中我们在 <script> </script> 中写 js代码， 

这里是在 <wxs> </wxs> 中写，  

导出函数时的语法： 

module.exports.想在外面使用的函数名 = wxs 中的函数名，   

这里可以认为 exprots 是个空的对象，如果我们想 让外部使用，就得给 exports 这个对象 动态绑定数据。  

将js代码写在 .wxs 文件中：  

wxs代码可以写在wxml文件中。也可以单独放在.wxs后缀的文件中。如果是写在wxml文件中，则必须要放在wxs标签中，如果是单独放在.wxs后缀文件中，就不需要放在wxs标签中了。并且必须要给wxs一个module属性，用来标记这个wxs的名称。

使用的时候 要用src 找到对应的文件，  

WXS 语法之 require() 函数：  

如果在一个wxs文件中，想引用另外一个wxs文件，那么可以使用require函数引用。

上面就用 require() 获取到了一个wxs 文件中的导出数据，  然后在另一个wxs 中使用，  

引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

WXS 语法之 变量 ：  

实际这里的变量就是 js 中的变量，

概念：

• WXS 中的变量均为值的引用。
• 没有声明的变量直接赋值使用，会被定义为全局变量。加上var 就不是全局变量了，  
• 如果只声明变量而不赋值，则默认值为 undefined。
• var表现与javascript一致，会有变量提升。

变量名

变量命名必须符合下面两个规则：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

保留标识符

以下标识符不能作为变量名：

delete
void
typeof

null
undefined
NaN
Infinity
var

if
else

true
false

require

this
function
arguments
return

for
while
do
break
continue
switch
case
default

注释：

1,  //  

2, /**/

3,还有就是小程序独有的，  /*  后面的全部代码都会被注释，  

WXS 其他语法：

总之，就是js 中大部分都可以在这使用，   

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

案例 时间格式化案例 ：