微信小程序头像昵称填写模拟器没法获取

据了解，微信小程序头像昵称填写模拟器没法获取，是因为模拟器没有登录微信，所以无法获取微信用户的信息，包括头像和昵称。要想获取这些信息，就必须使用真机进行测试，并且要求用户登录微信，才能获取到用户的头像和昵称。

但如今，却只能得到一个缺省的灰色头像，和nickname = “微信用户”，两个数据，其它的年龄以及地区等什么都没有，更别提授权d出框了

查看官网如下图才知道API更新了：

>

安全。

小程序的授权是需要用户同意的，如果用户不同意，那么小程序就拿不到个人信息。微信的对外接口非常注重对用户隐私的保护，不论是小程序、公众号还是微信授权登录，都只能获取到用户名称、头像和代表用户的一串加密代码，无法获取用户的真实微信号。

主要步骤

获取用户头像

模板

合成

一、获取用户头像

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

1、由于微信官方不再支持通过 wxgetUserInfo 接口来获取用户信息，我们必须通过使用 button 组件并将 open-type 指定为 getUserInfo 类型来获取或展示用户信息。

为优化用户体验，使用 wxgetUserInfo 接口直接d出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wxgetUserInfo 接口，将无法d出授权询问框，默认调用失败。正式版暂不受影响。

上图中d出底部菜单的交互方式无法通过 wxshowActionSheet 来实现（因为该接口只能指定字符串文本，不能使用 button, navigator 等组件）。

因此，只能通过自定义 actionSheet 组件来实现以上功能。

mmp-action-sheet 组件

以下是 mmp-action-sheet 组件的代码。

indexwxml

<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 等。

indexwxss

mask{  position: fixed;  top: 0;  left: 0;  width:100%;  height: 100%;  background: rgba(0, 0, 0, 05);  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: 35;  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: 02s;  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;

}

indexjs

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

     observer(newVal) {

       if (newVal) {

         thissetData({            actionSheetStatus: true,            animationMask: 'fadeIn',            animationSheet: 'fadeInBottom'

         })

       } else {          thissetData({            actionSheetStatus: false,            animationMask: 'fadeOut',            animationSheet: 'fadeOutBottom'

         })

       }

     }

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

   }

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

 },  methods: {

   closeActionSheet() {

     thissetData({        animationMask: 'fadeOut',        animationSheet: 'fadeOutBottom'

     })

     setTimeout(() => {

       thissetData({actionSheetStatus: false})

     }, 300)

   }

 }

})

组件只有两个参数：

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

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

indexjson

{  "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')

cloudinit()// 云函数入口函数exportsmain = async (event, context) => {  const wxContext = cloudgetWXContext()  // 1 获取数据库引用

 const db = clouddatabase()  const MAX_LIMIT = 100

 // 2 构造查询语句

 const countResult = await dbcollection('template')count()  const total = countResulttotal  // 计算需分几次取

 const batchTimes = Mathceil(total / 100)  const tasks = []  for (let i = 0; i < batchTimes; i++) {    const promise = dbcollection('template')skip(i MAX_LIMIT)limit(MAX_LIMIT)get()

   taskspush(promise)

 }  return (await Promiseall(tasks))reduce((acc, cur) => {    return {

     data: accdataconcat(curdata),

     errMsg: accerrMsg,

   }

 })

}

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

getTpl() {    const self = this

   // 调用云函数获取模板

   wxcloudcallFunction({

     name: 'tpl'

   })then(res => {

     selfsetData({

       templates: resresultdata

     })

   })

}

三、问题

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

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

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

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

2、将模板存储到外部OSS，使用>

3、使用 wxgetTempFileURL 用云文件 ID 换取真实链接，也就是>

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

这个还是挺安全的，没有问题的，一般这种都是有网络安全保护的。有保障你的权益隐私的。

拓展:小程序（Mini Program）是一种不需要下载安装即可使用的应用，于2017年1月9日首次推出，其理念是应用“触手可及"“用完即走”。其优势是用户不用再关心应用安装太多的问题，也避免了频繁的切换应用。随着APP市场的饱和，大部分用户已经养成了使用习惯，开发新的APP很难在市场生存。此外，APP开发和推广成本高也是不争的事实。易观2018年3月份的报告显示，移动电商APP的下载成本高达120-200 元，而且这些后期未必能形成转化。互联网金融、二手车电商APP的新客户成本，更是动辄高达数千元。

以上就是关于微信小程序头像昵称填写模拟器没法获取全部的内容，包括:微信小程序头像昵称填写模拟器没法获取、uniapp 微信小程序授权登录getUserInfo获取不到用户的昵称和头像、在微信小程序里获取国旗头像安全吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！