小程序手拉手你是我的好朋友

时间在点击一个个发送按钮中不知不觉流逝，小蓝与小红的友谊不断加深，小小的 按钮连接着他们彼此，我们来了解一下 button 按钮的使用方法。 需要重点强调该操作并且引导用户去点击的入口通过按钮表达。 示例代码

<view class="page">
 <view class="page-description">按钮</view>
 <view class="page-section">
 <view class="page-section-title">type-primary/ghost</view>
 <view class="page-section-demo">
 <button type="primary">主要操作 Normal</button>
 <button type="primary" loading>操作</button>
 <button type="primary" disabled>主要操作 Disable</button>
 <button type="ghost">ghost 操作</button>
 <button type="ghost" loading>ghost 操作</button>
 <button type="ghost" disabled>ghost 操作 Disable</button>
 </view>
 </view>
 <view class="page-section">
 <view class="page-section-title">type-default</view>
 <view class="page-section-demo">
 <button data-aspm-click="xxx">辅助操作 Normal</button>
 <button disabled>辅助操作 Disable</button>
 </view>
 </view>
 <view class="page-section">
<view class="page-section-title">type-warn</view>
 <view class="page-section-demo">
 <button type="warn">警告类操作 Normal</button>
 <button type="warn" disabled>警告类操作 Disable</button>
 <button type="warn" hover-class="red">hover-red</button>
 </view>
 </view>
 <view class="page-section">
 <view class="page-section-title">Size</view>
 <view class="page-section-demo">
 <button size="mini" loading>提交</button>
 <button style="margin-left: 10px;" type="primary" size="mini">选项</button>
 </view>
 </view>
 <view class="page-section">
 <view class="page-section-title">open</view>
 <view class="page-section-demo">
 <button open-type="share">share</button>
 </view>
 </view>
 <view class="page-section">
 <view class="page-section-title">Form</view>
 <view class="page-section-demo">
 <form onSubmit="onSubmit" onReset="onReset">
 <button form-type="submit" type="primary">submit</button>
 <button form-type="reset">reset</button>
 </form>
 </view>
 </view>
</view>

Page({
 data: {},
 onSubmit() {
 my.alert({ title: 'You click submit' });
 },
onReset() {
 my.alert({ title: 'You click reset' });
 },
});
/* API-DEMO page/component/button/button.acss */
.red {
 background-color: red;
 border-color: red;
 color: #fff;
}
button + button {
 margin-top: 32rpx;
}

属性 属性 类型 默认值 描述 最低版本 size String default 有效值 default, mini（小尺 寸）。

type String default 按钮的样式类型，有效值 primary，default,，warn。

plain Boolean false 是否镂空 - disabled Boolean false 是否禁用 - loading Boolean false 按钮文字前是否带 loading 图 标。

hover-class String buttonhover 按钮按下去的样式类。buttonhover 默认为 {backgroundcolor: rgba(0, 0, 0, 0.1); opacity: 0.7;}，hoverclass="none" 时表示没有被点击 效果。

101 hover-starttime Number 20 按住后多少时间后出现点击状态， 单位毫秒。

hover-staytime Number 70 手指松开后点击状态保留时间，单 位毫秒。

hover-stoppropagation Boolean false 是否阻止当前元素的祖先元素出现 被点击样式。 1.10.0 form-type String - 有效值：submit， reset，用于 form 表单 组件，点击分别会触 发 submit/reset 事件。

open-type String - 开放能力 1.1.0 scope String - 当 open-type 为 getAuthorize 时有效。 1.11.0 onTap EventHand le - 点击 - appparameter String - 打开 APP 时，向 APP 传递的参 数，open-type="launchApp" 时 有效。

public-id String - 生活号 id，必须是当前小程序同 主体且已关联的生活号，opentype="lifestyle" 时有效。

open-type 有效值 值 说明 最低版本 share 触发 自定义分享，可使用 my.canIUse('button.opentype.share') 判断 1.1.0 getAuthorize 支持小程序授权，可使用 my.canIUse('button.opentype.getAuthorize') 判断 1.11.0 contactShare 分享到通讯录好友，可使用 my.canIUse('button.opentype.contactShare') 判 lifestyle 关注生活号，可使用 my.canIUse('button.opentype.lifestyle') 判断 1.11.0 102 scope 有效值 当 open-type 为 getAuthorize 时，可以设置 scope 为以下值： 值 说明 最低版本 phoneNumber 唤起授权界面，用户可以授权小程序获取用户手机号。 1.11.0 userInfo 唤起授权界面，用户可以授权小程序获取支付宝会员的基础 信息。 内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library