QinJs 官网

Appearance

button ​

按钮。

属性说明

属性名类型默认值说明生效时机平台差异说明
sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标H5
form-typeString用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
open-typeString开放能力
hover-classStringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-timeNumber20按住后多久出现点击态，单位毫秒
hover-stay-timeNumber70手指松开后点击态保留时间，单位毫秒
app-parameterString打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效微信小程序
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态微信小程序
langstring'en'指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。微信小程序
session-fromstring会话来源，open-type="contact"时有效微信小程序
send-message-titlestring当前标题会话内消息卡片标题，open-type="contact"时有效微信小程序
send-message-pathstring当前分享路径会话内消息卡片点击跳转小程序路径，open-type="contact"时有效微信小程序
send-message-imgstring截图会话内消息卡片图片，open-type="contact"时有效微信小程序
show-message-cardbooleanfalse是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效微信小程序
group-idString打开群资料卡时，传递的群号open-type="openGroupProfile"QQ小程序
guild-idString打开频道页面时，传递的频道号open-type="openGuildProfile"QQ小程序
public-idString打开公众号资料卡时，传递的号码open-type="openPublicProfile"QQ小程序
data-im-idString客服的抖音号open-type="im"抖音小程序2.68.0版本+
data-im-typeStringIM卡片类型open-type="im"抖音小程序2.80.0版本+
data-goods-idString商品的id，仅支持泛知识课程库和生活服务商品库中的商品open-type="im"抖音小程序2.80.0版本+
data-order-idString订单的id，仅支持交易2.0订单open-type="im"抖音小程序2.80.0版本+
data-biz-lineString商品类型，“1”代表生活服务，“2”代表泛知识。open-type="im"抖音小程序2.80.0版本+
@getphonenumberHandler获取用户手机号回调open-type="getPhoneNumber"微信、抖音、快手
@getuserinfoHandler用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同qin.getUserInfoopen-type="getUserInfo"微信、快手
@errorHandler当使用开放能力时，发生错误的回调open-type="launchApp"微信、快手
@opensettingHandler在打开授权设置页并关闭后回调open-type="openSetting"微信、快手
@launchappHandler从小程序打开 App 成功的回调open-type="launchApp"微信、快手
@contactHandler客服消息回调open-type="contact"微信、快手小程序
@chooseavatarHandler获取用户头像回调open-type="chooseAvatar"微信小程序
@agreeprivacyauthorizationHandler用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效open-type="agreeprivacyauthorization"微信小程序2.33.0
@imHandler监听跳转IM的成功回调open-type="im"抖音小程序2.68.0版本+
  • 注1：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  • open-type="launchApp"时需要调起的APP接入微信OpenSDK详见

size 有效值 ​

值说明
default默认大小
mini小尺寸

button组件也支持style中通过css定义文字大小。见下

type 有效值 ​

值说明
primary微信小程序为绿色，H5为蓝色，抖音小程序为红色。如想在多端统一颜色，请改用default，然后自行写样式
default白色
warn红色

button组件也支持style中通过css定义颜色。见下

form-type 有效值 ​

值说明
submit提交表单
reset重置表单

open-type 有效值 ​

值说明平台差异说明
feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志微信小程序
share触发用户转发微信小程序小程序、抖音小程序、飞书小程序、快手小程序
getUserInfo获取用户信息，可以从@getuserinfo回调中获取到用户信息微信小程序小程序、快手小程序
contact打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息微信小程序小程序、快手小程序、抖音小程序
getPhoneNumber获取用户手机号，可以从@getphonenumber回调中获取到用户信息微信小程序、小红书小程序、抖音小程序、快手小程序。
launchApp小程序中打开APP，可以通过app-parameter属性设定向APP传的参数微信小程序、QQ小程序、快手小程序
openSetting打开授权设置页微信小程序小程序、快手小程序
chooseAvatar获取用户头像，可以从@chooseavatar回调中获取到头像信息微信小程序2.21.2版本+
agreePrivacyAuthorization用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》微信小程序2.33.0版本+
uploadDouyinVideo发布抖音视频抖音小程序2.65.0版本+
im跳转到抖音IM客服抖音小程序2.80.0版本+
favorite触发用户收藏快手小程序
watchLater触发用户稍后再看快手小程序
openProfile触发打开用户主页快手小程序

feedback ​

open-type 为 feedback时：

注意

  • button组件支持style中通过css定义文字大小、颜色

button样式修改@style ​

button组件属性中的size和type，属于预置样式，方便开发者使用。开发者也可以通过style和class来自定义样式。

button虽然可以内嵌text组件，但不建议通过text组件来修改button样式，因为会导致hove-class不生效。尤其是uvue中样式不继承。建议直接在button组件的style或class属性编写样式。

style和class的优先级，高于size和type属性。

vue
<template>
  <button
    size="default"
    type="default"
    style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
    hover-class="is-hover"
  >按钮</button>
</template>
<template>
  <button
    size="default"
    type="default"
    style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
    hover-class="is-hover"
  >按钮</button>
</template>
css
<style>
.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #179b16;
  border-color: #179b16;
}
</style>
<style>
.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #179b16;
  border-color: #179b16;
}
</style>

button点击 ​

button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。举例，如需跳转到about页面，可按如下几种代码写法执行：

html
<template>
  <view>
    <button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
    <button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
  </view>
</template>
<script>
  export default {
    methods: {
      goto(url) {
        qin.navigateTo({
          url:url
        })
      }
    }
  }
</script>
<template>
  <view>
    <button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
    <button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
  </view>
</template>
<script>
  export default {
    methods: {
      goto(url) {
        qin.navigateTo({
          url:url
        })
      }
    }
  }
</script>

注意

  • 点击 share 分享按钮时会触发 onShareAppMessage
  • 支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生API，参考

示例 ​

查看演示

以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。

vue
<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <button type="primary">页面主操作 Normal</button>
      <button type="primary" loading="true">页面主操作 Loading</button>
      <button type="primary" disabled="true">页面主操作 Disabled</button>
      <button type="default">页面次要操作 Normal</button>
      <button type="default" disabled="true">页面次要操作 Disabled</button>
      <button type="warn">警告类操作 Normal</button>
      <button type="warn" disabled="true">警告类操作 Disabled</button>
      <view class="button-sp-area">
        <button type="primary" plain="true">按钮</button>
        <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
        <button type="default" plain="true">按钮</button>
        <button type="default" disabled="true" plain="true">按钮</button>
        <button class="mini-btn" type="primary" size="mini">按钮</button>
        <button class="mini-btn" type="default" size="mini">按钮</button>
        <button class="mini-btn" type="warn" size="mini">按钮</button>
      </view>
    </view>
  </view>
</template>
<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <button type="primary">页面主操作 Normal</button>
      <button type="primary" loading="true">页面主操作 Loading</button>
      <button type="primary" disabled="true">页面主操作 Disabled</button>
      <button type="default">页面次要操作 Normal</button>
      <button type="default" disabled="true">页面次要操作 Disabled</button>
      <button type="warn">警告类操作 Normal</button>
      <button type="warn" disabled="true">警告类操作 Disabled</button>
      <view class="button-sp-area">
        <button type="primary" plain="true">按钮</button>
        <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
        <button type="default" plain="true">按钮</button>
        <button type="default" disabled="true" plain="true">按钮</button>
        <button class="mini-btn" type="primary" size="mini">按钮</button>
        <button class="mini-btn" type="default" size="mini">按钮</button>
        <button class="mini-btn" type="warn" size="mini">按钮</button>
      </view>
    </view>
  </view>
</template>

注意

事件务必使用vue语法，比如下面的获取手机号示例

vue
<button
  type="default"
  open-type="getPhoneNumber"
  @getphonenumber="decryptPhoneNumber"
>获取手机号</button>
<button
  type="default"
  open-type="getPhoneNumber"
  @getphonenumber="decryptPhoneNumber"
>获取手机号</button>