小程序:按钮（button）

代码Github地址

一. 属性说明

属性名	类型	默认值	说明
size	String	default	按钮的大小
plain	Boolean	false	按钮是否镂空，背景色透明
type	String	default	按钮的样式类型
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标。（可以作为点击按钮发送网络请求的时候loading效果）
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
form-type	String		用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件
open-type	String		微信开放能力

举例说明：

1. size 仅有两个有效值 default和 mini
   size.png
2. plain plain.png

3. type ： primary , default , warn

   
   type.png
4. open-type

(1). openSetting ：打开授权设置页

<button open-type="openSetting" >打开授权页面</button>

(2). share : 触发用户转发分享本页面

<button open-type="share" >触发用户转发</button>

(3). launchApp : 打开app

// 可以通过app-parameter属性设定向APP传的参数
<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

// js
launchAppError: function (e) {
    console.log(e.detail.errMsg)
}

// 注意 ： 
小程序端
需要将 `<button>` 组件 `open-type` 的值设置为 `launchApp`。如果需要在打开 APP 时向 APP 传递参数，可以设置 `app-parameter` 为要传递的参数。通过 `binderror` 可以监听打开 APP 的错误事件。
### app 端
Android 第三方 app 需要处理 `ShowMessageFromWX.req` 的微信回调，iOS 则需要将 appId 添加到第三方 app 工程所属的 plist 文件 URL types 字段。 `app-parameter` 的获取方法，请参考 [Android SDKSample](https://open.weixin.qq.com/zh_CN/htmledition/res/dev/download/sdk/WeChatSDK_sample_Android.zip) 中 WXEntryActivity 中的 onReq 方法以及 [iOS SDKSample](https://open.weixin.qq.com/zh_CN/htmledition/res/dev/download/sdk/WeChatSDK_sample_iOS_1.4.2.1.zip) 中 WXApiDelegate 中的 onReq 方法。

官方解释

(4). getUserInfo : 获取用户信息

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>


// js
  onGotUserInfo:function (event) {
    console.log(event.detail.userInfo.nickName);
    var nickName = event.detail.userInfo.nickName;
    var avatarUrl = event.detail.userInfo.avatarUrl;
    wx.showToast({
      title: nickName,
      image: avatarUrl,
    })
  }

(5). getPhoneNumber 获取手机号

<button open-type="getPhoneNumber" bindgetphonenumber="getphonenumber">获取用户手机号</button>

// js
 getphonenumber: function (e) {
        console.log(e.detail.errMsg) 
        console.log(e.detail.iv) 
        console.log(e.detail.encryptedData) 
}

更详尽的解释 看 转载的博客

(6). contact : 打开客服会话

<button  open-type="contact"  bindcontact="contact">打开客服会话</button>

// js 
// 客服消息回调
  contact: function (event) {
    console.log(event);
  }