1、获取用户头像
想使用微信提供的头像填写能力,需要两步:
- 将
button
组件open-type
的值设置为chooseAvatar
- 当用户选择需要使用的头像之后,可以通过
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、获取用户昵称
想使用微信提供的昵称填写能力,需要三步:
- 通过
form
组件中包裹住input
以及form-type
为submit
的button
组件 - 需要将
input
组件type
的值设置为nickname
,当用户输入框输入时,键盘上方会展示微信昵称 - 给
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.valueconsole.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、分享到朋友圈
小程序页面默认不能被分享到朋友圈,开发者需主动设置“分享到朋友圈”才可以,实现分享到朋友圈需满足两个条件:
- 页面 必须 设置允许“发送给朋友”,
页面.js
文件声明onShareAppMessage
事件监听函数 - 页面 必须 需设置允许“分享到朋友圈”,
页面.js
文件声明onShareTimeline
事件监听函数
🔗onShareTimeline官方文档
5、手机号验证组件
手机号快速
验证组件:平台会对号码进行验证,但不保证是实时验证
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
手机号实时
验证组件:在每次请求时,平台均会对用户选择的手机号进行实时验证
<buttonopen-type="getRealtimePhoneNumber"bindgetrealtimephonenumber="getrealtimephonenumber"
/>
Page({// 手机号快速验证getphonenumber (event) {// 通过事件对象,可以看到,在 event.detail 中可以获取到 code// code 动态令牌,可以使用 code 换取用户的手机号// 需要将 code 发送给后端,后端在接收到 code 以后// 也需要调用 API,换取用户的真正手机号// 在换取成功以后 ,会将手机号返回给前端console.log(event)},// 手机号实时验证getrealtimephonenumber (event) {console.log(event)}
})
6、客服能力
使用方式:
- 需要将
button
组件open-type
的值设置为contact
,当用户点击后就会进入客服会话
<button type="warn" plain open-type="contact">联系客服</button>
- 在微信公众后台,绑定后的客服账号,可以登陆网页端客服或移动端小程序客服接收、发送客服消息