这是一个使用微擎小程序的代码示例，其中包含了获取用户头像和昵称的功能。以下是解决方案：
-
首先，在
<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> -
在Page对象中定义
onChooseAvatar函数来处理选择头像的事件：onChooseAvatar: function(event) { var that = this; wx.chooseImage({ count: 1, success:function(res) { that.setData({ avatarUrl: res.tempFilePaths[0] }); } }); } -
在
<input>标签中加入name="nickname"属性，设置输入框的类型为昵称：<view class="cu-form-group"> <view class="title">昵 称：</view> <input placeholder="请输入昵称" type="nickname" name="nickname" maxlength="32"></input> </view> -
在提交表单时，通过
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);
// });
//新增跳转到login
wx.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;