第一步:页面放置登录按钮
<view bindtap="login">登录</view>
知识兔第二步:点击登录后,在登录页放入微信授权按钮
<view>
<text>用户登录</text>
<view>点击登录,将获得你的公开信息(昵称,头像等)</view>
<view>
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">微信授权</button>
</view>
</view>
知识兔注)必须用button组件,必须添加open-type="getUserInfo",必须填写bindgetuserinfo事件
第三步:用户点击微信授权按钮,可选择授权,或取消授权
用户授权后,通过e.detail.userInfo可获取用户基本信息(姓名,头像,性别,地区)
//微信授权
bindGetUserInfo: function(e) {
var that = this;
if (e.detail.userInfo) {
console.log("用户按了允许授权按钮")
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo
})
//that.loadUserInfo();
//that.loadPage();
} else {
console.log("用户按了取消授权按钮")
this.setData({
userInfo: {
nickName: '点击登录',
avatarUrl: '/img/default_head.png'
}
})
}
},
知识兔第四步:授权后,获取登录凭证code
通过wx.login可返回登录凭证res.code,然后调用服务端接口,
//获取用户信息
loadUserInfo: function() {
var that = this;
//获取res.code
wx.login({
success: function(res) {
//console.log(res.code)
var option = {
"action": "getUserByCode",
"userName": that.data.userInfo.nickName,
"userHead": that.data.userInfo.avatarUrl,
"code": res.code
};
wx.request({
url: webhost + '/app/test.ashx',
data: option,
header: {'content-type': 'application/x-www-form-urlencoded'},
method: 'post',
success: function(res) {
var datajson = res.data;
if (datajson != null && typeof(datajson) == "string" && datajson.length > 0) {
datajson = JSON.parse(datajson);
}
that.setData({
loginType: datajson.data.login_type,
loginID: datajson.data.user_id
});
},
fail: function(res) {
console.log("接口调用失败:" + res);
},
complete: function() {}
});
}
});
},
知识兔第五步:在服务端,通过Appid、Secret、Code,来获取用户的openid
注)Appid、Secret在创建小程序时可获得,Code在第四步获得
以下示例为Asp.net服务端
private string GetUserByCode(HttpContext context)
{
string userName = context.Request.Params["userName"];
string userHead = context.Request.Params["userHead"];
string Code = context.Request.Params["code"];
string Appid = "wx3d450d36b9******";
string Secret = "fb46b0741df5d45a9a6cfeba3c******";
string RequestString = WebRequestExt.GetData(string.Format(@"https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code",
Appid, Secret, Code));
wxresultmsg relust = ObejctToJsonHelper.DeserializeJsonToObject<wxresultmsg>(RequestString);
if (relust.errcode == 0)
{
string openID = relust.openid;
/*这里可以将用户数据插入用户表*/
}
else
return "{\"errcode\":" + relust.errcode + ",\"errmsg\":\"" + relust.errmsg + "\",\"data\":[]}";
}
知识兔第六步:页面加载时,获取用户当前设置
wx.getSetting 获取用户当前设置(允许权限);scope.userInfo为用户权限,其他权限请参考官方文档
wx.getUserInfo 获取用户信息(调用前,必须用户已授权)
onLoad: function(options) {
var that = this;
//that.loadPage();
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
console.log("已经授权,可以直接调用");
if (app.globalData.userInfo) {
console.log("已通过app.globalData.userInfo获取用户信息");
that.setData({
userInfo: app.globalData.userInfo
});
that.loadUserInfo();
} else if (that.data.loginID>0) {
console.log("已通过data.canIUse获取用户信息");
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
that.setData({
userInfo: res.userInfo
});
that.loadUserInfo();
}
} else {
console.log("已通过wx.getUserInfo获取用户信息");
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo;
that.setData({
userInfo: res.userInfo
});
that.loadUserInfo();
}
})
};
} else {
console.log("没有授权");
}
}
})
},
知识兔