微信登录

第一步：页面放置登录按钮

<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("没有授权");
        }
      }
    })
  },