红叶都枫了 @163

vue项目hbuilder打包-微信登录调取手机微信登录权限

这个笔记得做好。

1.vue页面的点击事件
import {login,loginy,wxLog,wxLogin,logout} from '../network/login'
wxloginBtn() {
          let _this = this
          wxLog()                               //调取微信登录页面的js方法
          this.alertSzTipsFlage = true
          this.tips = '正在登录...'
          setTimeout(function () {
                _this.alertSzTipsFlage = false
          }, 1500)
          this.wxLoginUserInfo()
        },
        wxLoginUserInfo(){
          let _this = this
          let userInfo = localStorage.getItem("wxUserInfo")              //拾取在js页面localStorage存储到用户信息
          if (null != userInfo) {
            userInfo = JSON.parse(userInfo)
            wxLogin(userInfo).then(res => {                                       //这里是常规登录部分,这里传递的参数userInfo的openid,nickname,headimgurl
              if (res.token) {
                window.localStorage.setItem("user", JSON.stringify(res))
                this.alertSzTipsFlage = true
                this.tips = '微信登录成功'
                setTimeout(function () {
                  _this.alertSzTipsFlage = false
                  _this.$router.push('/index')
                }, 1500)
              } else {
                this.alertSzTipsFlage = true
                this.tips = '微信登录失败'
                setTimeout(function () {
                    _this.alertSzTipsFlage = false
                }, 1500)
              }
            })
          }else {
            this.alertSzTipsFlage = true
            this.tips = '微信登录失败'
            setTimeout(function () {
                _this.alertSzTipsFlage = false
            }, 1500)
          }
        }
2.拾取到用户微信登录信息后调用登录接口
export function wxLogin(userInfo) {
  return request({
    url:'/api/weChatLogin',
    data:{
      "mobile":userInfo.openid,
      "nickname":userInfo.nickname,
      "logo":userInfo.headimgurl
    },
    method:'post',
    headers:{
      'post':{'Content-Type': 'application/json;charset=UTF-8'}
    }
  })
}
至此微信登录成功
3.之前js页面是如何拿取到用户登录权限并存储微信登录权限的?在2.下面粘贴复制:
export function wxLog(){
  let self = this;
  getService()

  // 微信授权登录对象
  let aweixin = null;
  // 当前环境支持的所有授权登录对象
  let auths = null;

  // 获取登录授权认证服务列表,单独保存微信登录授权对象
  function getService(){
    plus.oauth.getServices(function(services){
      //plus.nativeUI.alert("services:"+JSON.stringify(services));
      auths = services;
      authLogin()
    }, function(e){
      plus.nativeUI.alert("获取登录授权服务列表失败,请稍后重试");
      plus.nativeUI.alert("获取登录授权服务列表失败:"+JSON.stringify(e));
    } );
  }

  // 获取微信登录授权对象后可进行登录认证操作
  function authLogin(){
    for(let i = 0; i < auths.length; i++){
      if(auths[i].id == 'weixin'){
        aweixin = auths[i];
        break;
      }
    }
    if(!aweixin){
      plus.nativeUI.alert("当前环境不支持微信登录");
      return;
    }
    if(!aweixin.authResult){
      aweixin.login(function(e){
        //plus.nativeUI.alert("登录认证成功!"+JSON.stringify(e));
        authUserInfo()
      }, function(e){
        //plus.nativeUI.alert("登录认证失败: "+JSON.stringify(e));
      } );
    }else{
      authUserInfo()
      console.log("已经登录认证!");
    }
  }

  // 获取微信登录授权对象后获取用户信息操作
  function authUserInfo(){
    if(!aweixin){
      plus.nativeUI.alert("当前环境不支持微信登录");
      return;
    }
    if(aweixin.authResult){
      aweixin.getUserInfo( function(e){
        //登录成功处理
        //plus.nativeUI.alert("获取用户信息成功:"+JSON.stringify(aweixin.userInfo));
        window.localStorage.setItem("wxUserInfo", JSON.stringify(aweixin.userInfo));
        authLoginOut(); //注销登录防止切换账号获取到旧信息
      }, function(e){
        console.log("获取用户信息失败: "+JSON.stringify(e));
      } );
    }else{
      plus.nativeUI.alert("未登录认证!");
    }
  }

  // 注销登录认证
  function authLoginOut(){
    if(!aweixin){
      plus.nativeUI.alert("当前环境不支持微信登录");
      return;
    }
    aweixin.logout(function(e){
      // plus.nativeUI.alert("注销登录认证成功!"+JSON.stringify(e));
    }, function(e){
      console.log("注销登录认证失败: "+JSON.stringify(e));
    });
  }
}
posted @ 2020-03-28 11:14  红叶都枫了163  阅读(1066)  评论(0编辑  收藏  举报