小程序组件 · 前端菜鸟成长记

# 组件 ***** 在微信小程序中的组件都是双标签使用 ***** ### 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) |