openId 微信用户授权，公众号，小程序

微信用户授权核心是拿到openId

 mounted() {
    this.io = localStorage.getItem("openId");
    if (null != this.io && "" != this.io) {//看是否有openId
      this.form.openId = this.io;
      var loginUser = JSON.parse(localStorage.getItem("userInfo"));
      if (null != loginUser) {
          this.$router.replace("/home");
      } else {
        this.code = this.getUrlCode().code;
        console.log("从url截取的code:--->" + this.code);
        this.getOpenId();
      }
    } else {
      this.code = this.getUrlCode().code;
      console.log("从url截取的code:--->" + this.code);
      this.getOpenId();
    }
  },
  methods: {
    // 截取url中的code方法
    getUrlCode() {
      var url = location.search;
      this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    },
    getOpenId() {
      console.log("this.code-->" + this.code);
      let params = { code: this.code };
      getOpenId(params).then((res) => {
        if (null != res.data.openId && "" != res.data.openId) {
          console.log("获取到的>openId:" + res.data.openId);
          this.form.openId = res.data.openId;
        }
      });
    },
handleLogin(){//登录接口按钮
   登录成功并本地存储 登录信息和openId，不是核心这里偷懒了  各位大佬见谅
    localStorage.setItem("userInfo", res.data.loginUser);//登录信息
    localStorage.setItem("openId", res.data.openId);//到登录这个页面已经静默授权过了
}
//同台设备,公众号的openid和小程序不同

小程序授权如下：(虽然下图不是授权…凑活看！)

login.wxml

<view wx:if="{{canIUse}}">
 <view class='headView'>
   <view class='headImageView'>
	      <image class='headImage' src='/pages/imageSource/IMG_3456.png' mode='scaleToFill'></image>
	</view>
    <view class='titleText'>申请获取以下权限</view>
    <view class='contentText'>获得你的公开信息(昵称,头像,手机等)</view>
    <button class='authBtn' type='primary' open-type='getUserInfo' bindgetuserinfo='bindGetUserInfo' >授权登录</button>
	  </view>
</view>
<view wx:else>请升级微信版本</view>```


----------------------------------------------------------------------------------------------------


login.js

  onLoad:function(options) {
      var that = this;
        //查看是否授权
        wx.getSetting({
          success: function(res) {
            if (res.authSetting['scope.userInfo']) {//res.authSetting['scope.userInfo'=true 用户点了授权确定
              wx.navigateTo({
                url: '/pages/index/index',
              })
                      console.log("用户授权了");
            wx.login({//只授权不需要用户openid可以不要这里
              success (res) {
                if (res.code) {
                  console.log(res.code+'这里code给后端后端会给你openid')
                  //发起网络请求
                   wx.request({
                     url: 'https://xxxxxx/api/v1_auth/getOpenId',
                     data: {
                       code: res.code
                     },
                     success: function (result) {
                       let openId= result.data.openId
                       console.log('我是openId！' + openId)
                     }
                   })
                } else {
                  console.log('登录失败！' + res.errMsg)
                }
              }
            })
            } else {
              //用户没有授权
              console.log("用户没有授权");
            }
          }
        });
  },
  bindGetUserInfo: function(res) {
        if (res.detail.userInfo) {
          //用户按了允许授权按钮
          var that = this;
          // 获取到用户的信息了，打印到控制台上看下
          console.log("用户的信息如下：");
          console.log(e.detail.userInfo);
          //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
          that.setData({
            isHide: false
          });
        } else {
          //用户按了拒绝按钮
          wx.showModal({
            title: '警告',
            content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
            showCancel: false,
            confirmText: '返回授权',
            success: function(res) {
              // 用户没有授权成功，不需要改变 isHide 的值
              if (res.confirm) {
                console.log('用户点击了“返回授权”');
              }
            }
          });
        }
     },


---------------------------------------------------------------------------------

login.wxss

.headImage {
  display: flex;
  width: 50px;
  height: 50px;
}

.titleText {
  margin-left: 25px;
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #020e0f;
  text-align: center;
}

.contentText {
  margin-left: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 14px;
  color: #666;
  text-align: center;
}

.authBtn {
  margin-top: 35px;
  margin-left: 25px;
  margin-right: 25px;
  height: 45px;
  font-size: 17.5px;
}