微信小程序头像怎么改变形状_微信小程序头像怎么改

获取用户头像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)