微信小程序 -- 小程序开发能力与拓展_bindchooseavatar

小程序开发能力

1. 获取用户头像

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

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

1. 将 button 组件 open-type 的值设置为 chooseAvatar
2. 当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

<!-- 给 button 添加 open-type 属性，值为 chooseAvatar -->
<!-- 绑定 bindchooseavatar 事件获取回调信息 -->
<button open-type="chooseAvatar" bindchooseavatar="getAvatar">
  按钮
</button>
1
2
3
4
5

落地代码：

<view class="avatar">
  <button open-type="chooseAvatar" bindchooseavatar="getAvatar">
    <image src="{{ avatarUrl }}" mode="" />
  </button>
</view>
1
2
3
4
5

Page({
  /**
   * 页面的初始数据
   */	
  data: {
    avatarUrl: '/assets/tom.png'
  },

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

    // 将获取到的头像赋值给 data 中变量同步给页面结构
    this.setData({
      avatarUrl
    })
  }
 
  // coding...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. 获取用户昵称

知识点：

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

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

1. 通过 form 组件中包裹住 input 以及 form-type 为 submit 的 button 组件

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>

1
2
3
4
5
6
7
8
9
10
11
12

Page({


  // 获取微信昵称
  onSubmit (event) {
    // console.log(event.detail.value)
    const { nickname } = event.detail.value
    console.log(nickname)
  }

}
1
2
3
4
5
6
7
8
9
10
11

3. 转发功能

转发功能，主要帮助用户更流畅地与好友分享内容和服务

想实现转发功能，有两种方式：

1. 页面 js 文件 必须声明 onShareAppMessage 事件监听函数，并自定义转发内容。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

2. 通过给 button 组件设置属性 open-type=“share“ ，在用户点击按钮后触发 Page.onShareAppMessage 事件监听函数

官方文档 onShareAppMessage：

落地代码：

<!--pages/cate/cate.wxml-->

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

1
2
3
4

Page({

  // 监听页面按钮的转发 以及 右上角的转发按钮
  onShareAppMessage (obj) {
    // console.log(obj)

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

  }

})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4. 分享到朋友圈

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

1. 页面 必须 设置允许“发送给朋友”，页面 js 文件声明 onShareAppMessage 事件监听函数

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

官方文档 onShareTimeline：

落地代码：

Page({


  // 监听右上角 分享到朋友圈 按钮
  onShareTimeline () {

    // 自定义分享内容。
    return {
      // 自定义标题，即朋友圈列表页上显示的标题
      title: '帮我砍一刀~~~',
      // 自定义页面路径中携带的参数，如 path?a=1&b=2 的 【 “?” 后面部分 】
      query: 'id=1',
      // 自定义图片路径，可以是本地文件或者网络图片
      imageUrl: '../../assets/Jerry.png'
    }

  }

})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5. 手机号验证组件

手机验证组件，用于帮助开发者向用户发起手机号申请，必须经过用户同意后，才能获得由平台验证后的手机号，进而为用户提供相应服务

1. 手机号快速验证组件：平台会对号码进行验证，但不保证是实时验证

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

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

   <button
     open-type="getRealtimePhoneNumber"
     bindgetrealtimephonenumber="getrealtimephonenumber"
   />
   1
   2
   3
   4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/387600