微擎小程序获取不到头像和昵称解决方案

本文主要是介绍微擎小程序获取不到头像和昵称解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这是一个使用微擎小程序的代码示例，其中包含了获取用户头像和昵称的功能。以下是解决方案：

1. 首先，在<button>标签上添加open-type="chooseAvatar"属性，并绑定bindchooseavatar事件：

   <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl?avatarUrl:'../../resource/icon/user.png'}}" mode="aspectFill"></image>
   </button>
   

2. 在Page对象中定义onChooseAvatar函数来处理选择头像的事件：

   onChooseAvatar: function(event) {var that = this;wx.chooseImage({count: 1,success:function(res) {that.setData({avatarUrl: res.tempFilePaths[0]});}});
   }
   

3. 在<input>标签中加入name="nickname"属性，设置输入框的类型为昵称：

   <view class="cu-form-group"><view class="title">昵  称：</view><input placeholder="请输入昵称" type="nickname" name="nickname" maxlength="32"></input>
   </view>
   

4. 在提交表单时，通过form标签的bindsubmit属性绑定getUserName事件处理函数。在事件处理函数中，可以使用event.detail.value获取用户输入的昵称和手机号：

   <form bindsubmit="getUserName">...
   </form>
   

   getUserName: function (event) {var nickname = event.detail.value.nickname;var mobile = event.detail.value.mobile;// 进行相应的逻辑处理
   }
   

完整代码login.wxml 

<view><form bindsubmit="getUserName"> <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl?avatarUrl:'../../resource/icon/user.png'}}" mode="aspectFill"></image></button><view class="cu-form-group"><view class="title">昵  称：</view><input placeholder="请输入昵称" type="nickname" name="nickname" maxlength="32"></input></view><view class="cu-form-group"><view class="title">手机号：</view><input placeholder="请输入手机号" type="text" name="mobile" maxlength="12"></input></view><view class="up-bt"><button form-type="submit" role="button" aria-disabled="false" class="save-bt">登录</button></view></form>
</view>

css部分login.wxss

.avatar{width: 70px;height: 70px;text-align: center;border-radius: 50%;
}
.avatar-wrapper{background: #c9c9c9;border: 1px solid #ffffff;border-radius: 50%;width: 70px;height: 70px;text-align: center;line-height: 70px;padding: 0;margin-top: 10px;
}
.cu-form-group{background-color: #ffffff;width: 98%;margin: 0 auto;border-radius: 10rpx;padding: 10px 0px;margin-bottom: 10px;margin-top: 10px;
}
.cu-form-group .title{float: left;
}
.save-bt{background-color: #ffffff;width: 85%;margin: 0 auto;
}

 

微擎修改登录部分util.js

var _typeof3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {return typeof e;
} : function(e) {return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
}, _typeof2 = "function" == typeof Symbol && "symbol" == _typeof3(Symbol.iterator) ? function(e) {return void 0 === e ? "undefined" : _typeof3(e);
} : function(e) {return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : void 0 === e ? "undefined" : _typeof3(e);
}, _typeof = "function" == typeof Symbol && "symbol" == _typeof2(Symbol.iterator) ? function(e) {return void 0 === e ? "undefined" : _typeof2(e);
} : function(e) {return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : void 0 === e ? "undefined" : _typeof2(e);
}, _base = require("base64"), _md = require("md5"), _md2 = _interopRequireDefault(_md);function _interopRequireDefault(e) {return e && e.__esModule ? e : {default: e};
}function _defineProperty(e, t, n) {return t in e ? Object.defineProperty(e, t, {value: n,enumerable: !0,configurable: !0,writable: !0}) : e[t] = n, e;
}var util = {};function getQuery(e) {var t = [];if (-1 != e.indexOf("?")) for (var n = e.split("?")[1].split("&"), o = 0; o < n.length; o++) n[o].split("=")[0] && unescape(n[o].split("=")[1]) && (t[o] = {name: n[o].split("=")[0],value: unescape(n[o].split("=")[1])});return t;
}function getUrlParam(e, t) {return t = new RegExp("(^|&)" + t + "=([^&]*)(&|$)"), null != (t = e.split("?")[1].match(t)) ? unescape(t[2]) : null;
}function getSign(e, t, n) {var o = require("underscore.js"), r = require("md5.js"), a = "";if (getUrlParam(e, "sign") || t && t.sign) return !1;if (e && (a = getQuery(e)), t) {var i, s = [];for (i in t) i && t[i] && (s = s.concat({name: i,value: t[i]}));a = a.concat(s);}a = o.sortBy(a, "name"), a = o.uniq(a, !0, "name");for (var u = "", c = 0; c < a.length; c++) a[c] && a[c].name && a[c].value && (u += a[c].name + "=" + a[c].value, c < a.length - 1 && (u += "&"));return r(u + (n = n || getApp().siteInfo.token));
}util.base64Encode = function(e) {return (0, _base.base64_encode)(e);
}, util.base64Decode = function(e) {return (0, _base.base64_decode)(e);
}, util.md5 = function(e) {return (0, _md2.default)(e);
}, util.url = function(e, t) {var n = getApp(), o = n.siteInfo.siteroot + "?i=" + n.siteInfo.uniacid + "&t=" + n.siteInfo.multiid + "&v=" + n.siteInfo.version + "&from=wxapp&";if (e && ((e = e.split("/"))[0] && (o += "c=" + e[0] + "&"), e[1] && (o += "a=" + e[1] + "&"), e[2] && (o += "do=" + e[2] + "&")), t && "object" === (void 0 === t ? "undefined" : _typeof(t))) for (var r in t) r && t.hasOwnProperty(r) && t[r] && (o += r + "=" + t[r] + "&");return o;
}, util.getSign = function(e, t, n) {return getSign(e, t, n);
}, util.request = function(n) {require("underscore.js");var e = require("md5.js"), o = getApp();(n = n || {}).cachetime = n.cachetime || 0, n.showLoading = void 0 === n.showLoading || n.showLoading;var t = wx.getStorageSync("userInfo").sessionid, r = n.url;-1 == r.indexOf("http://") && -1 == r.indexOf("https://") && (r = util.url(r)), getUrlParam(r, "state") || n.data && n.data.state || !t || (r = r + "&state=we7sid-" + t), n.data && n.data.m || (a = getCurrentPages()).length && (a = a[getCurrentPages().length - 1]) && a.__route__ && (r = r + "&m=" + a.__route__.split("/")[0]);var a = getSign(r, n.data);if (a && (r = r + "&sign=" + a), !r) return !1;if (wx.showNavigationBarLoading(), n.showLoading && util.showLoading(), n.cachetime) {var i = e(r), s = wx.getStorageSync(i), u = Date.parse(new Date());if (s && s.data) {if (s.expire > u) return n.complete && "function" == typeof n.complete && n.complete(s), n.success && "function" == typeof n.success && n.success(s), console.log("cache:" + r), wx.hideLoading(), wx.hideNavigationBarLoading(), !0;wx.removeStorageSync(i);}}wx.request((_defineProperty(s = {url: r,data: n.data || {},header: n.header || {},method: n.method || "GET"}, "header", {"content-type": "application/x-www-form-urlencoded"}), _defineProperty(s, "success", function(e) {wx.hideNavigationBarLoading(), wx.hideLoading();var t = wx.getStorageSync("wxInfo");console.log(t), e.data.errno ? "41009" == e.data.errno ? (t || wx.setStorageSync("userInfo", ""), util.getUserInfo(function() {util.request(n);}, t)) : n.fail && "function" == typeof n.fail ? n.fail(e) : e.data.message && (t = null != e.data.data && e.data.data.redirect ? e.data.data.redirect : "", o.util.message(e.data.message, t, "error")) : (n.success && "function" == typeof n.success && n.success(e), n.cachetime && (e = {data: e.data,expire: u + 1e3 * n.cachetime}, wx.setStorageSync(i, e)));}), _defineProperty(s, "fail", function(e) {wx.hideNavigationBarLoading(), wx.hideLoading();var t = require("md5.js")(r);if ((t = wx.getStorageSync(t)) && t.data) return n.success && "function" == typeof n.success && n.success(t), console.log("failreadcache:" + r), !0;n.fail && "function" == typeof n.fail && n.fail(e);}), _defineProperty(s, "complete", function(e) {n.complete && "function" == typeof n.complete && n.complete(e);}), s));
}, util.getWe7User = function(t, e) {var n = wx.getStorageSync("userInfo") || {};util.request({url: "auth/session/openid",data: {code: e || ""},cachetime: 0,showLoading: !1,success: function(e) {e.data.errno || (n.sessionid = e.data.data.sessionid, n.memberInfo = e.data.data.userinfo, wx.setStorageSync("userInfo", n)), "function" == typeof t && t(n);}});
}, util.upadteUser = function(e, t) {console.log(e);var n = wx.getStorageSync("userInfo");if (!e) return "function" == typeof t && t(n);n.wxInfo = e.userInfo, wx.setStorageSync("wxInfo", e), util.request({url: "auth/session/userinfo",data: {userInfo: JSON.stringify(e.userInfo)},method: "POST",cachetime: 0,success: function(e) {console.log(e), e.data.errno || (n.memberInfo = e.data.data, wx.setStorageSync("userInfo", n)), "function" == typeof t && t(n);}});
}, util.checkSession = function(t) {util.request({url: "auth/session/check",method: "POST",cachetime: 0,showLoading: !1,success: function(e) {e.data.errno ? "function" == typeof t.fail && t.fail() : "function" == typeof t.success && t.success();},fail: function() {"function" == typeof t.fail && t.fail();}});
}, util.getUserInfo = function(n, o) {function e() {console.log("start login"), wx.login({success: function(e) {console.log(o), util.getWe7User(function(t) {o ? util.upadteUser(o, function(e) {"function" == typeof n && n(e);}) : wx.canIUse("getUserProfile") ? wx.showModal({title: "获取用户信息",content: "请允许授权以便为您提供服务",success: function(e) {if(e.confirm){//    util.upadteUser(e, function(e) {//         "function" == typeof n && n(e);//     });
//新增跳转到loginwx.navigateTo({url: '/we/pages/user/login',})}}}) : "function" == typeof n && n(t);}, e.code);},fail: function() {wx.showModal({title: "获取信息失败",content: "请允许授权以便为您提供给服务",success: function(e) {e.confirm && util.getUserInfo();}});}});}var t = wx.getStorageSync("userInfo") || {};t.sessionid ? util.checkSession({success: function() {o ? util.upadteUser(o, function(e) {"function" == typeof n && n(e);}) : "function" == typeof n && n(t);},fail: function() {t.sessionid = "", console.log("relogin"), wx.removeStorageSync("userInfo"), e();}}) : e();
}, util.navigateBack = function(t) {var e, n = t.delta || 1;t.data && ((e = (e = getCurrentPages())[e.length - (n + 1)]).pageForResult ? e.pageForResult(t.data) : e.setData(t.data)), wx.navigateBack({delta: n,success: function(e) {"function" == typeof t.success && t.success(e);},fail: function(e) {"function" == typeof t.fail && t.fail(e);},complete: function() {"function" == typeof t.complete && t.complete();}});
}, util.footer = function(e) {var t, e = e, n = getApp().tabBar;for (t in n.list) n.list[t].pageUrl = n.list[t].pagePath.replace(/(\?|#)[^"]*/g, "");e.setData({tabBar: n,"tabBar.thisurl": e.__route__});
}, util.message = function(e, t, n) {if (!e) return !0;var o, r, a;"object" == (void 0 === e ? "undefined" : _typeof(e)) && (t = e.redirect, n = e.type, e = e.title), t && (o = t.substring(0, 9), a = r = "", "navigate:" == o ? (a = "navigateTo", r = t.substring(9)) : "redirect:" == o ? (a = "redirectTo", r = t.substring(9)) : (r = t, a = "redirectTo")), console.log(r), "success" == (n = n || "success") ? wx.showToast({title: e,icon: "success",duration: 2e3,mask: !!r,complete: function() {r && setTimeout(function() {wx[a]({url: r});}, 1800);}}) : "error" == n && wx.showModal({title: "系统信息",content: e,showCancel: !1,complete: function() {r && wx[a]({url: r});}});
}, util.user = util.getUserInfo, util.showLoading = function() {wx.getStorageSync("isShowLoading") && (wx.hideLoading(), wx.setStorageSync("isShowLoading", !1)), wx.showLoading({title: "加载中",complete: function() {wx.setStorageSync("isShowLoading", !0);},fail: function() {wx.setStorageSync("isShowLoading", !1);}});
}, util.showImage = function(e) {if (!(e = e ? e.currentTarget.dataset.preview : "")) return !1;wx.previewImage({urls: [ e ]});
}, util.parseContent = function(e) {if (!e) return e;var t = e.match(new RegExp([ "\ud83c[\udf00-\udfff]", "\ud83d[\udc00-\ude4f]", "\ud83d[\ude80-\udeff]" ].join("|"), "g"));if (t) for (var n in t) e = e.replace(t[n], "[U+" + t[n].codePointAt(0).toString(16).toUpperCase() + "]");return e;
}, util.date = function() {this.isLeapYear = function(e) {return 0 == e.getYear() % 4 && (e.getYear() % 100 != 0 || e.getYear() % 400 == 0);}, this.dateToStr = function(e, t) {return e = arguments[0] || "yyyy-MM-dd HH:mm:ss", t = arguments[1] || new Date(), (e = (e = (e = (e = (e = (e = (e = (e = (e = (e = (e = (e = e.replace(/yyyy|YYYY/, t.getFullYear())).replace(/yy|YY/, 9 < t.getYear() % 100 ? (t.getYear() % 100).toString() : "0" + t.getYear() % 100)).replace(/MM/, 9 < t.getMonth() ? t.getMonth() + 1 : "0" + (t.getMonth() + 1))).replace(/M/g, t.getMonth())).replace(/w|W/g, [ "日", "一", "二", "三", "四", "五", "六" ][t.getDay()])).replace(/dd|DD/, 9 < t.getDate() ? t.getDate().toString() : "0" + t.getDate())).replace(/d|D/g, t.getDate())).replace(/hh|HH/, 9 < t.getHours() ? t.getHours().toString() : "0" + t.getHours())).replace(/h|H/g, t.getHours())).replace(/mm/, 9 < t.getMinutes() ? t.getMinutes().toString() : "0" + t.getMinutes())).replace(/m/g, t.getMinutes())).replace(/ss|SS/, 9 < t.getSeconds() ? t.getSeconds().toString() : "0" + t.getSeconds())).replace(/s|S/g, t.getSeconds());}, this.dateAdd = function(e, t, n) {switch (n = arguments[2] || new Date(), e) {case "s":return new Date(n.getTime() + 1e3 * t);case "n":return new Date(n.getTime() + 6e4 * t);case "h":return new Date(n.getTime() + 36e5 * t);case "d":return new Date(n.getTime() + 864e5 * t);case "w":return new Date(n.getTime() + 6048e5 * t);case "m":return new Date(n.getFullYear(), n.getMonth() + t, n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds());case "y":return new Date(n.getFullYear() + t, n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds());}}, this.dateDiff = function(e, t, n) {switch (e) {case "s":return parseInt((n - t) / 1e3);case "n":return parseInt((n - t) / 6e4);case "h":return parseInt((n - t) / 36e5);case "d":return parseInt((n - t) / 864e5);case "w":return parseInt((n - t) / 6048e5);case "m":return n.getMonth() + 1 + 12 * (n.getFullYear() - t.getFullYear()) - (t.getMonth() + 1);case "y":return n.getFullYear() - t.getFullYear();}}, this.strToDate = function(dateStr) {var data = dateStr, reCat = /(\d{1,4})/gm, t = data.match(reCat);return t[1] = t[1] - 1, eval("var d = new Date(" + t.join(",") + ");"), d;}, this.strFormatToDate = function(e, t) {var n = 0, o = -1, r = t.length;-1 < (o = e.indexOf("yyyy")) && o < r && (n = t.substr(o, 4));var a = 0;-1 < (o = e.indexOf("MM")) && o < r && (a = parseInt(t.substr(o, 2)) - 1);var i = 0;-1 < (o = e.indexOf("dd")) && o < r && (i = parseInt(t.substr(o, 2)));var s = 0;(-1 < (o = e.indexOf("HH")) || 1 < (o = e.indexOf("hh"))) && o < r && (s = parseInt(t.substr(o, 2)));var u = 0;-1 < (o = e.indexOf("mm")) && o < r && (u = t.substr(o, 2));var c = 0;return -1 < (o = e.indexOf("ss")) && o < r && (c = t.substr(o, 2)), new Date(n, a, i, s, u, c);}, this.dateToLong = function(e) {return e.getTime();}, this.longToDate = function(e) {return new Date(e);}, this.isDate = function(e, t) {null == t && (t = "yyyyMMdd");var n = t.indexOf("yyyy");if (-1 == n) return !1;var o = e.substring(n, n + 4);return -1 != (n = t.indexOf("MM")) && (n = e.substring(n, n + 2), -1 != (t = t.indexOf("dd")) && (t = e.substring(t, t + 2), !(!isNumber(o) || "2100" < o || o < "1900" || !isNumber(n) || "12" < n || n < "01" || t > getMaxDay(o, n) || t < "01")));}, this.getMaxDay = function(e, t) {return 4 == t || 6 == t || 9 == t || 11 == t ? "30" : 2 == t ? e % 4 == 0 && e % 100 != 0 || e % 400 == 0 ? "29" : "28" : "31";}, this.isNumber = function(e) {return /^\d+$/g.test(e);}, this.toArray = function(e) {e = arguments[0] || new Date();var t = Array();return t[0] = e.getFullYear(), t[1] = e.getMonth(), t[2] = e.getDate(), t[3] = e.getHours(), t[4] = e.getMinutes(), t[5] = e.getSeconds(), t;}, this.datePart = function(e, t) {t = arguments[1] || new Date();var n = "";switch (e) {case "y":n = t.getFullYear();break;case "M":n = t.getMonth() + 1;break;case "d":n = t.getDate();break;case "w":n = [ "日", "一", "二", "三", "四", "五", "六" ][t.getDay()];break;case "ww":n = t.WeekNumOfYear();break;case "h":n = t.getHours();break;case "m":n = t.getMinutes();break;case "s":n = t.getSeconds();}return n;}, this.maxDayOfDate = function(e) {return (e = arguments[0] || new Date()).setDate(1), e.setMonth(e.getMonth() + 1), e = e.getTime() - 864e5, new Date(e).getDate();};
}, module.exports = util;

这篇关于微擎小程序获取不到头像和昵称解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---