zoukankan      html  css  js  c++  java
  • 微信登录

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

    <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("没有授权");
            }
          }
        })
      },
  • 相关阅读:
    bzoj2400 Spoj 839 Optimal Marks
    01分数规划
    bzoj1565 植物大战僵尸
    bzoj1497 最大获利(最大权闭合子图)
    bzoj3144 切糕
    loj6045 价
    bzoj3894 文理分科
    luogu3731 新型城市化
    快速傅里叶变换(FFT)
    bzoj1030 文本生成器
  • 原文地址:https://www.cnblogs.com/kandyvip/p/11579367.html
Copyright © 2011-2022 走看看