微信小程序学习(十二):开放能力

1、获取用户头像

想使用微信提供的头像填写能力,需要两步:

  1. button 组件 open-type 的值设置为 chooseAvatar
  2. 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径
<view class="avatar">
  <button open-type="chooseAvatar" bindchooseavatar="getAvatar">
    <image src="{{ avatarUrl }}" mode="" />
  </button>
</view>
Page({
  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl: '/assets/tom.png'
  },

  // 获取用户头像信息
  getAvatar(e) {
    // 获取选中的头像
    const { avatarUrl } = e.detail

    // 将获取到的头像赋值给 data 中变量同步给页面结构
    this.setData({
      avatarUrl
    })
  }
}

2、获取用户昵称

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

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

  <!-- input 输入框组件的 type 属性设置为 nickname,用户点击输入框,键盘上方才会显示微信昵称 -->
  <!-- 如果添加了 name 属性,form 组件就会自动收集带有 name 属性的表单元素的值 -->
  <input type="nickname" name="nickname" placeholder="请输入昵称" />

  <!-- 如果将 form-type="submit" ,就将按钮变为提交按钮 -->
  <!-- 在点击提交按钮的时候,会触发 表单的 bindsubmit 提交事件 -->
  <button type="primary" plain form-type="submit">点击获取昵称</button>
</form>
Page({
  // 获取微信昵称
  onSubmit (event) {
    // console.log(event.detail.value)
    const { nickname } = event.detail.value
    console.log(nickname)
  }
}

3、转发功能

想实现转发功能,有两种方式:

  • 页面.js 文件 必须声明 onShareAppMessage 事件监听函数,并自定义转发内容。只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
  • 通过给 button 组件设置属性 open-type=“share“ ,在用户点击按钮后触发
    Page.onShareAppMessage 事件监听函数
  • 🔗onShareAppMessage官方文档
<button open-type="share">转发</button>
Page({
  // 监听页面按钮的转发 以及 右上角的转发按钮
  onShareAppMessage (obj) {
    // console.log(obj)

    // 自定义转发内容
    return {
      // 转发标题
      title: '这是一个非常神奇的页面~~~',
      // 转发路径
      path: '/pages/cate/cate',
      // 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径
      imageUrl: '../../assets/Jerry.png'
    }
  }
})

4、分享到朋友圈

小程序页面默认不能被分享到朋友圈,开发者需主动设置“分享到朋友圈”才可以,实现分享到朋友圈需满足两个条件:

  1. 页面 必须 设置允许“发送给朋友”,页面.js 文件声明 onShareAppMessage 事件监听函数
  2. 页面 必须 需设置允许“分享到朋友圈”,页面.js 文件声明 onShareTimeline 事件监听函数

🔗onShareTimeline官方文档

5、手机号验证组件

手机号快速验证组件:平台会对号码进行验证,但不保证是实时验证

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">

手机号实时验证组件:在每次请求时,平台均会对用户选择的手机号进行实时验证

<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)
  }
})

6、客服能力

使用方式:

  1. 需要将 button 组件 open-type 的值设置为 contact,当用户点击后就会进入客服会话
<button type="warn" plain open-type="contact">联系客服</button>
  1. 在微信公众后台,绑定后的客服账号,可以登陆网页端客服或移动端小程序客服接收、发送客服消息
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

激洪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值