微信小程序头像怎么改

主要步骤

• 获取用户头像

• 图片模板

• 图片合成

一、获取用户头像

制作自定义头像的第一步就是先选择图片。在【海豚趣图】的交互设计中，用户有三种选择图片的方式：微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示：

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

• <view hidden="{{!actionShow}}" class="mask {{mask}}" bindtap="actionHide"> ?<view class="actionSheet animated {{animation}}">


• ? ?<slot></slot>


• ? ?<button class="close" bindtap="actionHide">{{closeText}}</button>


• ?</view></view>



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); ?z-index: 999;


• }.actionSheet{ ?width: 100%; ?position: absolute; ?top: 100%; ?z-index: 1000; ?overflow: hidden;


• }.actionSheet button,.actionSheet navigator{ ?color: #000; ?text-align: center; ?background: #fff; ?border-radius: 0; ?line-height: 3.5; ?font-size: 32rpx; ?border-bottom: 1rpx solid rgb(236, 236, 236); ?opacity: 1;


• }.actionSheet button:active,.actionSheet navigator:active{ ?color:#000; ?background: rgb(236, 236, 236);


• }.actionSheet button::after,.actionSheet navigator::after{ ?border: none; ?border-radius: 0;


• }.actionSheet .close{ ?border-bottom: none; ?border-bottom: 50rpx solid #fff; ?border-top: 16rpx solid rgb(236, 236, 236);


• }.animated { ?animation-timing-function: ease-out; ?animation-duration: 0.2s; ?animation-fill-mode: both;


• }@keyframes fadeInBottom {from{ ? transform: translate3d(0, 0, 0);


• } ?to { ? ?transform: translate3d(0, -100%, 0);


• ?}


• }.fadeInBottom { ?animation-name: fadeInBottom;


• }@keyframes fadeOutBottom {from{ ? transform: translate3d(0, -100%, 0);


• } ?to { ? ?transform: translate3d(0, 0, 0);


• ?}


• }.fadeOutBottom { ?animation-name: fadeOutBottom;


• }@keyframes fadeIn {from{ ? opacity: 0;


• } ?to { ? ? opacity: 1;


• ?}


• }.fadeIn { ?animation-name: fadeIn;


• }@keyframes fadeOut {from{ ? opacity: 1;


• } ?to { ? ? opacity: 0;


• ?}


• }.fadeOut { ?animation-name: fadeOut;


• }



index.js

• Component({ ?properties: { ? ?actionSheetStatus: { ? ? ?type: Boolean, ? ? ?value: false,


• ? ? ?observer(newVal) {


• ? ? ? ?if (newVal) {


• ? ? ? ? ?this.setData({ ? ? ? ? ? ?actionSheetStatus: true, ? ? ? ? ? ?animationMask: 'fadeIn', ? ? ? ? ? ?animationSheet: 'fadeInBottom'


• ? ? ? ? ?})


• ? ? ? ?} else { ? ? ? ? ?this.setData({ ? ? ? ? ? ?actionSheetStatus: false, ? ? ? ? ? ?animationMask: 'fadeOut', ? ? ? ? ? ?animationSheet: 'fadeOutBottom'


• ? ? ? ? ?})


• ? ? ? ?}


• ? ? ?}


• ? ?}, ? ?closeText: { ? ? ?type: String, ? ? ?value: '取消'


• ? ?}


• ?}, ?data: { ? ?animationMask: 'fadeIn', ? ?animationSheet: 'fadeInBottom'


• ?}, ?methods: {


• ? ?closeActionSheet() {


• ? ? ?this.setData({ ? ? ? ?animationMask: 'fadeOut', ? ? ? ?animationSheet: 'fadeOutBottom'


• ? ? ?})


• ? ? ?setTimeout(() => {


• ? ? ? ?this.setData({actionSheetStatus: false})


• ? ? ?}, 300)


• ? ?}


• ?}


• })



组件只有两个参数：

• actionSheetStatus?指定组件的初始展示状态，默认为false，表示不显示组件。

• closeText?指定关闭按钮的名字，默认为?取消。

index.json

• { ?"component": true, ?"usingComponents": {}


• }



接下来在页面中调用组件，在组件中插入了3个?button?组件来实现来获取用户头像：

• <action-sheet actionSheetStatus="{{actionSheetStatus}}">


• ? ?<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">使用微信头像</button>


• ? ?<button bindtap="pickPic" data-source-type="album">使用本地相册</button>


• ? ?<button bindtap="pickPic" data-source-type="camera">拍照</button>


• ?</action-sheet>



以上我们通过自定义组件?mmp-action-sheet?就解决了原生的 actionsheet 无法指定?button，从而无法获取用户微信头像的问题。

该组件我已经发布到?npm?包，需要用到的同学可以通过?npm?安装，也可以在?github?上查看源码和使用文档。

二、图片模板

有了原图，接下来我们需要选择图片模板。如果模板数量不多或者模板变化不频繁，我们可以直接把模板放在本地。鉴于我提供的模板比较多，放在本地会增大小程序源码的大小，我把模板上传到了小程序的云存储中，通过云函数来动态获取图片模板，方便以后模板扩展。

云函数?tpl?的代码如下：

• // 云函数入口文件const cloud = require('wx-server-sdk')



• cloud.init()// 云函数入口函数exports.main = async (event, context) => { ?const wxContext = cloud.getWXContext() ?// 1. 获取数据库引用


• ?const db = cloud.database() ?const MAX_LIMIT = 100


• ?// 2. 构造查询语句


• ?const countResult = await db.collection('template').count() ?const total = countResult.total ?// 计算需分几次取


• ?const batchTimes = Math.ceil(total / 100) ?const tasks = [] ?for (let i = 0; i < batchTimes; i++) { ? ?const promise = db.collection('template').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()


• ? ?tasks.push(promise)


• ?} ?return (await Promise.all(tasks)).reduce((acc, cur) => { ? ?return {


• ? ? ?data: acc.data.concat(cur.data),


• ? ? ?errMsg: acc.errMsg,


• ? ?}


• ?})


• }



页面中调用云函数拉取模板：

• getTpl() { ? ?const self = this


• ? ?// 调用云函数获取图片模板


• ? ?wx.cloud.callFunction({


• ? ? ?name: 'tpl'


• ? ?}).then(res => {


• ? ? ?self.setData({


• ? ? ? ?templates: res.result.data


• ? ? ?})


• ? ?})


• }



三、问题

到这里模板的获取逻辑已经没有问题了，但在开发过程中遇到了一个问题。模板图片的链接我使用的是云文件ID，当有大量图片并行加载的时候，只有部分图片能够显示，我看了一下dom节点其实都已经存在了，image的src的地址也都是正确的。

• 1、微信官方自2.3.0开始已经支持在image中使用云文件ID。云文件ID的格式为：?cloud://xxx.xxx/templates/01.png。

我猜测可能是对微信云存储并发请求过多导致的（有知道的同学可以告知），因为我试了一下将云文件ID换成正常的HTTPS的链接是没问题的。

由此可知，可以想到有三种可行的解决方案：

• 2、将图片模板存储到外部OSS，使用https协议的链接。

• 3、使用?wx.getTempFileURL?用云文件 ID 换取真实链接，也就是https形式的链接。

• 4、控制图的并行加载数量。我的实践是将并行加载数量控制在20，当用户滚动的时候再发起下一次请求。

怎样把微信小程序的头像换了？

您的问题我已看到，那么，如何把微信小程序的头像换了？下面由小编来为您解答。

答:一、首先登录微信，点击进入微信小程序。在微信小程序的界面上，在搜索栏里输入“制作器”。

二、在搜索栏里输入制作器后，就可以看到制作器的小程序，点击打开制作器。

三、在打开的制作器界面上，找到换脸的图标，点击打开。

以上步骤仅供您参考，还望您能采纳，谢谢！

微信小程序自己个人信息的头像没有显示？

这种情况一般是由于微信改了规则了，导致未授权。以前是可以直接通过后台进行弹窗授权的，现在必须点击按钮后才能弹出弹窗进行授权，在没有授权的情况下，自然是取不到昵称和头像的。

微信小程序easilive怎么换头像？

微信小程序你要更换头像的话，一定要到相册里边选择一个小一点的头像，到时候选择添加就可以了。

微信小程序掼蛋怎么换头像？

微信小程序掼蛋，怎么换头像？你可以按它的操作说明来换