button

按钮。
**

属性说明

• 注1：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
• open-type="launchApp"时需要调起的APP接入微信OpenSDK详见

size 有效值

type 有效值

form-type 有效值

open-type 有效值

button点击

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

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

<template>
    <view>
        <navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
        <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) {
                uni.navigateTo({
                    url:url
                })
            }
        }
    }
</script>

注意

• 在小程序中，开发者可以登录 微信小程序管理后台 、QQ小程序后台后，进入菜单“客服反馈”页面获取反馈内容。
• 在 App 中，开发者登录 DCloud开发者中心 后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。
• 点击 share 分享按钮时会触发 onShareAppMessage

（https://uniapp.dcloud.io/api/plugins/share）

• 支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生API，参考

示例

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

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<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语法，比如下面的获取手机号示例

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