微信开放能力 微信小程序获取微信头像、昵称、转发功能、分享到朋友圈、手机号验证组件、客服功能等

一、获取微信头像

当小程序需要让用户完善个人资料时，我们可以通过提供的头像、昵称填写能力快速完善

示例

在 wxml 文件中

<view>
  <button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseAvatar">
    <image class="avatar" src="{{ avatarUrl}}"></image>
  </button>
</view>

在 js 文件中

Page({
 data:{
   avatarUrl:"../../assets/home/demo.png"
 },
//  获取微信头像
chooseAvatar(event){
  this.setData({
    avatarUrl:event.detail.avatarUrl
  })
}
})

注意：

目前获取的微信头像时临时路径

临时路径时有失效时间的，在实际开发中，需要将临时路径上传到公司的服务器

二、获取微信昵称

当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像、昵称填写能力快速完善

想使用微信提供的昵称填写能力，需要三步：

1. 通过 from 组件中包裹住 input 以及 form-type 为 submit 的button组件
2. 需要将 input 组件 type 的值设置为 nickname ，当用户输入框输入时，键盘上方会展示微信昵称
3. 给form 绑定 submit 事件，在事件处理函数中通过事件对象获取用户昵称

示例

在 wxml 文件中

<!-- 需要使用 form 组件包裹住 input 以及 button 组件 -->
<form bindsubmit="onSubmit">
<!-- input 输入框组件的 type 属性设置为 nickname ，用户点击输入框，键盘上方会显示微信昵称 -->
<!-- 如果添加了 name 属性 ，from 组件就会自动收集带有 name 属性的表单元素的值 -->
  <input type="nickname" name="nickname" placeholder="请输入昵称"/>
  <!-- 如果将 form-type="submit" ，就将按钮变为提交按钮 -->
  <!-- 点击提交按钮的时候，会触发表单的 bindsubmit 提交事件 -->
  <button type="primary" plain form-type="submit">点击获取昵称</button>
</form>

在 js 文件中

Page({

// 获取微信昵称
onSubmit(event){
  console.log(event.detail.nickName)
}
})

三、转发功能

转发功能，主要用户更流畅地与好友分享内容和服务
想实现转发功能，有两种方式：
1. 页面 js 文件 必须声明 onShareAppMessage 事件监听函数，并自定义转发内容。只有定义了此事件
	处理函数，右上角菜单才会显示 "转发" 按钮
2. 通过给 button 组件设置属性 open-type="share" , 可以在用户点击按钮后触发 
	Page.onShareAppMessage 事件监听函数 

第一种 示例： 在 .js 文件中设置转发

Page({
  // onShareAppMessage(){}
  // 监听页面按钮地转发 以及 右上角地转发按钮
  onShareAppMessage(){
    return {
    title:"这是一个非常空白地页面~~~",
    path:"pages/cate/cate",
    imageUrl:"../../assets/home/demo.png"
    }
  }
})

第二种：

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

两种地区别

Page({
  // onShareAppMessage(){}
  onShareAppMessage(obj){
    console.log(obj)
    return {
    title:"这是一个非常空白地页面~~~",
    path:"pages/cate/cate",
    imageUrl:"../../assets/home/demo.png"
    }
  }
})

点击左上角按钮时 obj 里的 target 为空
点击页面按钮时 obj 里的 target 有值

四、分享到朋友圈

小程序默认不能分享到朋友圈，开发者需要主动设置 "分享到朋友圈" 需要满足两个条件：
	1. 页面必须设置允许 "发送给朋友" ，页面 js 文件声明 onShareAppMessage 事件监听函数
	2. 页面必须需设置允许"分享到朋友圈",页面 js 文件声明 onShareTimeline 事件监听函数

Page({
  // 监听页面按钮的转发 以及 右上角的转发按钮
  // onShareAppMessage(){}
  onShareAppMessage(obj){
    console.log(obj)
    return {
    title:"这是一个非常空白地页面~~~",
    path:"pages/cate/cate",
    imageUrl:"../../assets/home/demo.png"
    }
  },
  // 监听右上角 分享到朋友圈 按钮
  // onShareTimeline(){}
  onShareTimeline(){
    return {
      title:"帮我砍一刀",
      query:"id=1",
      imageUrl:"../../assets/home/demo.png"
    }
  }
})

五、手机号验证组件

手机验证组件，用于帮助开发者向用户发起手机号申请，必须经过用户同意后，才能获得由平台验证
后的手机号，进而为用户提供响应服务
手机号验证组件分为两种：手机号快速验证组件 以及 手机号实时验证组件

1. 手机号快速验证组件：平台会对号码进行验证，但不保证实时验证
	<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
2. 手机号实时验证组件：在每次请求时，平台均会对用户的手机号进行实时验证。
	<button open-type="getRealtimePhoneNumber" 
		bindgetrealtimephonenumber="getrealtimephonenumber">

Page({
  // 手机号快速验证
  getPhoneNumber(event){
    // 通过事件对象,可以看到 在 event.detail 中可以获取到 code
    // code 动态令牌,可以使用 code 换取用户的手机号
    // 需要将 code 发送给后端,后端在接收到 code 以后
    // 也需要调用 API 换取用户的真正手机号
    // 在换取成功后会将手机号返回给前端
    console.log(event)
  },
  // 手机号实时验证
  getrealtimephonenumber(event){
    console.log(event)
  },
})

注意事项

1.目前该接口对非个人开发者，且完成了认证的小程序开发(不包含海外主题)

2.两种验证组件需要付费使用，每个小程序账号将有1000次体验额度

六、客服功能

小程序为开发者提供了客服能力，同时为客服人员提供移动端、网页端客服工作台便于及时处理消息
使用方式：
1.需要将 button 组件 open-type 的值 设置为 contact ，当用户点击后就会进入客服会话
2.在微信公众后台，绑定后的客服账号，可以登陆 网页端客服 或 移动端小程序 客服接收、发送客服消息

<button type="warn" plain open-type="contact">联系客服</button>