Button 按钮

• Button-外观样式
• Button-开放能力

Button-外观样式

以下都是编译器自带的，也可以自己用CSS设计

• size： 按钮的⼤⼩
• type： 按钮的样式类型
  
• plain： 按钮是否镂空，背景⾊透明
• disabled： 是否禁⽤
• loading： 名称前是否带 loading 图标
• form- type： ⽤于 组件，点击分别会触发 组件的 submit/reset 事件
• open- type： 微信开放能⼒
  

<button>默认按钮</button>
<button size="mini">mini 按钮</button>
<button type="primary">primary 按钮</button>
<button type="warn">warn 按钮</button>
<button type="warn" plain="true">plain 按钮</button>
<button type="primary" loading="true">loading 按钮</button>

效果展示：

官网文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

Button-开放能力

open- type标签
1、contact 打开客服会话，需要在微信小程序的后台配置，只能通过针剂调试打开
2、share 转发当前的小程序到微信好友，不能把小程序分享到朋友圈。使⽤前可先阅读使用指引
3、getPhoneNumber 获取当前的手机号码信息，结合一个事件来使用 不是企业的小程序号没有权限获取用户信息 具体说明

无权限	有权限

1. 绑定一个事件 bindgetPhonenumber
2. 在事件的回调函数中 通过参数来获取信息
3. 获取到的信息 是加密过的
4. 加密信息需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析

拒绝	允许

4、getUserInfo 获取当前用户的个人信息。使用方法与getPhoneNumber 类似，不存在加密字段。（图中已经显示 昵称 城市 省份 性别:1代表男性）

5、launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
6、 openSetting 打开授权设置页面
7、 feedback 打开“意⻅反馈”⻚⾯，用户可提交反馈内容并上传日志

.wxml 文件

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

.js 文件

Page({
  //获取用户的手机号码
  getPhoneNumber(e){
    console.log(e);
  },
  //获取用户信息
  getUserInfo(e){
    console.log(e);
  }
})

标签：Button,getPhoneNumber,用户,获取,按钮,type
来源： https://blog.csdn.net/qq_55342245/article/details/115356735