第一步:页面放置登录按钮
<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("没有授权");
}
}
})
},