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/

案例 時間格式化案例 ：