# 組件 ***** 在微信小程序中的組件都是雙標簽使用 ***** ### 1.view >塊級元素 ***** ### 2.text >行內元素 ***** ### 3.image **image組件默認寬度340rpx、高度240rpx，image組件中二維碼/小程序碼圖片不支持長按識別。僅在wx.previewImage中支持長按識別** ### 4.input >input 標簽最好不要設計寬為100% ***** #### 常用的屬性 | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | --- | --- | --- | --- | --- | | value | String | | 輸入框的初始內容 | | | type | String | "text" | input 的類型（有appid才有效果） | | | password | Boolean | false | 是否是密碼類型 | | | placeholder | String | | 輸入框為空時占位符 | | | placeholder-style | String | | 指定 placeholder 的樣式 | | | placeholder-class | String | "input-placeholder" | 指定 placeholder 的樣式類 | | | disabled | Boolean | false | 是否禁用 | | | maxlength | Number | 10 | 最大輸入長度，設置為 -1 的時候不限制最大長度( 例如：最大10個字母或者中文 ) | | ~~~ password=“{{true}}” //是密碼類型 maxlength=“{{2}}” ?//或者 maxlength=“2” value="默認值" // 或者value="{{默認值}}" ~~~ #### 常用的事件 | bindinput | EventHandle | | 當鍵盤輸入時，觸發input事件，event.detail = {value, cursor}，處理函數可以直接 return 一個字符串，將替換輸入框的內容。 | | | --- | --- | --- | --- | --- | | bindfocus | EventHandle | | 輸入框聚焦時觸發，event.detail = {value: value} | | | bindblur | EventHandle | | 輸入框失去焦點時觸發，event.detail = {value: value} | | 事件步驟： 1.綁定事件 > bindinput="onBindInput" 2.通過事件函數獲取輸入的值 > e.detail.value 3.將獲取到的值保存在data中 > 注意： 保存是 this.setData( { } ) ; 獲取是this.data.xxx 4.data中的值展示在頁面上 ***** ### 5.button ### 常用的屬性 size 按鈕的大小 > default mini ~~~ <button size="mini">登錄</button> ~~~ type 按鈕的類型 , 不能與背景樣式一起使用 > default warn primary ~~~ <button type="warn">登錄</button> ~~~ plain 按鈕鏤空 > plain ="{{true}}" // true false ~~~ <button type="warn" plain="true">登錄</button> ~~~ disable 按鈕不可點擊 ~~~ <button type="warn" plain="true" disabled="true">登錄</button> ~~~ loading 按鈕顯示進度條 ~~~ <button type="warn" plain="true" loading="true">登錄</button> ~~~ hover-class 按鈕按下的樣式 > 可以自定義任意按鈕按下的樣式，例如，按下時改變透明度 ~~~ //buttton.wxml布局 <button type="warn" plain="true" loading="true">登錄</button> //樣式 .btn{ background: orange; } ~~~ form-type 指定button為表單類型，即可提交表單 ~~~ //buttton.wxml布局 <form bindsubmit="obBindSubmit"> ? ?<input placeholder='請求用戶名' name="username"></input> ? ?<input placeholder='密碼' password name="password"></input> ? ?<button form-type='submit'>點擊提交表單</button> ?</form> ?// buttton.js ?obBindSubmit:function(e){ ? ?console.log(e.detail.value) ?//{username: "xxxx", password: "xxxxx"} } ~~~ open-type 屬性 微信開放能力，即獲取微信賬號 的信息 > 例如：open-type="getUserInfo";獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信息 > > （**第一次調用會彈出：微信授權對話框**） ~~~ //buttton.wxml布局 ? <button open-type='getUserInfo' bindgetuserinfo="onbindgetuserinfo">getUserInfo</button> ? // buttton.js onbindgetuserinfo:function(e){ ? ?console.log(e.detail.userInfo) // {nickName: "xxx", gender: 0, language: "zh_CN",..} } ~~~ | 值 | 說明 | 最低版本 | | --- | --- | --- | | contact | 打開客服會話，與微信小程序的客服會話 | [1.1.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | share | 觸發用戶**轉發小程序**給微信朋友，使用前建議先閱讀[使用指引](https://developers.weixin.qq.com/miniprogram/dev/api/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95) | [1.2.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | getUserInfo | 獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信息。（**第一次調用會彈出：微信授權對話框**） | [1.3.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | getPhoneNumber | 獲取用戶手機號，可以從bindgetphonenumber回調中獲取到用戶信息，（**默認個人是不能獲取**）[具體說明](https://developers.weixin.qq.com/miniprogram/dev/api/getPhoneNumber.html) | [1.2.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | launchApp | 打開APP，可以通過app-parameter屬性設定向APP傳的參數[具體說明](https://developers.weixin.qq.com/miniprogram/dev/api/launchApp.html) | [1.9.5](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | openSetting | 打開**授權設置**頁 | [2.0.7](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | feedback | 打開微信的“意見反饋”頁面，用戶可提交反饋內容并上傳[日志](https://developers.weixin.qq.com/miniprogram/dev/api/getLogManager.html)到**微信小程序管理平臺**，開發者可以登錄[小程序管理后臺](https://mp.weixin.qq.com/)后進入左側菜單“客服反饋”頁面獲取到反饋內容 | [2.1.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) |