获取用户头像e68a84e8a2ad62616964757a686964616f31333436316336
图片模板
图片合成
一、获取用户头像
制作自定义头像的第一步就是先选择图片。在【海豚趣图】的交互设计中,用户有三种选择图片的方式:微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示:
1、由于微信官方不再支持通过 wx.getUserInfo 接口来获取用户信息,我们必须通过使用 button 组件并将 open-type 指定为 getUserInfo 类型来获取或展示用户信息。
为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。
上图中弹出底部菜单的交互方式无法通过 wx.showActionSheet 来实现(因为该接口只能指定字符串文本,不能使用 button, navigator 等组件)。
因此,只能通过自定义 actionSheet 组件来实现以上功能。
mmp-action-sheet 组件
以下是 mmp-action-sheet 组件的代码。
index.wxml
{ {closeText}}
2、通过 slot 在 action-sheet 中插入自定义的内容,比如 button、navigator 等。
index.wxss
.mask{ position: fixed; top: 0; left: 0; width:100%; height: 100%; background: rgba(0, 0, 0, 0.5)