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

一、获取微信头像

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

示例

在 wxml 文件中

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

在 js 文件中

javascript 复制代码
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 文件中

javascript 复制代码
<!-- 需要使用 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 文件中

javascript 复制代码
Page({

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

三、转发功能

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

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

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

第二种:

javascript 复制代码
<button open-type="share">转发</button>

两种地区别

javascript 复制代码
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 事件监听函数
javascript 复制代码
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">
javascript 复制代码
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.在微信公众后台,绑定后的客服账号,可以登陆 网页端客服 或 移动端小程序 客服接收、发送客服消息
javascript 复制代码
<button type="warn" plain open-type="contact">联系客服</button>
相关推荐
2501_915918414 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域6 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷6 小时前
第一个小程序
小程序
春哥的研究所6 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld6 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点7 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
泉城老铁11 小时前
SpringBoot对接微信公众号并实现消息发送功能详解
后端·微信
鸭鸭梨吖11 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发12 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
夏至春来-美美13 小时前
微信获取access_token授权的两种不同情况
微信·php·微信公众平台