H5微信登录

吴维炜

于 2019-07-17 13:51:24 发布

阅读量884

点赞数 1

分类专栏： # 微信开发webapp 文章标签：微信登录 webapp微信登录微信获取用户信息微信url乱码微信登录的逻辑

本文链接：https://blog.csdn.net/qq_38209578/article/details/96286556

版权

微信开发webapp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文主要介绍前端微信登录获取用户信息的业务逻辑

一、业务实现

1.1判断当前用户是否登录

如果有，证明当前用户已登录，返回主页面

1.2判断当前是否有code

1.2.1如果有，调用调用后端接口，返回用户基本信息，同1.1

1.2.2如果无，调用微信api获取code，获取到code在调用用后端接口，同1.2.1

二、代码如下（vue.js写法）

index.js

init:function() {
	if(vm.getRequest().code!=undefined){ // 判断是否是授权请求
		vm.getOpenid(vm.getRequest().code, app.codeUrl);
	} else {
		userInfo = JSON.parse(app.getItem(app.localKey.userInfo));  // 获取本地用户缓存(封装)
		if(!userInfo){  // 判断用户是否已登录
			vm.getCode();
			return;
		}
		app.go("loginMain");  // 跳转登录页（封装）
	}
},
getCode: function() { // 获取code
	param = JSON.parse(app.getItem(app.localKey.param));
	if (!param) {
		param = {}
	}
	param.loginBack = 'loginMain.html'; // 缓存登录页，获取code成功后返回用户登录页进行数据绑定
	app.setItem(app.localKey.param, JSON.stringify(param)); // 设置本地缓存
	vm.redirect_uri = window.location.origin + app.sld + "view/index.html"; // 微信api请求回调地址
	wxApi.getCode(vm.appid, vm.urlencode(vm.redirect_uri)); // 微信api获取code
},
getRequest:function () {  //获取url的参数
  var url = location.search; //获取url中"?"符后的字串  
   var theRequest = new Object();  
   if (url.indexOf("?") != -1) {  
      var str = url.substr(1);  
      strs = str.split("&");  
      for(var i = 0; i < strs.length; i ++) {  
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
      }  
   }  
   return theRequest;  
},
getOpenid: function(code, codeUrl) {  // 获取用户星星
	wxApi.getOpenid(code, codeUrl);  // 封装的wxApi的JS
},			
urlencode: function(str) { // urlencode转码 防止url乱码
	str = (str + '').toString();
	return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
	replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
},

wxapi.js

(function($, window) {
	window.wxApi = {
		getCode: function(appid, redirect_uri) {  // 获取code
			var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri +
				"&response_type=code" + "&scope=snsapi_userinfo" + "&state=STATE#wechat_redirect";
			window.location.replace(url);
		},
		getOpenid: function(code, codeUrl) {  // 接口请求，获取用户信息
			var url = codeUrl + "weChat?code=" + code;
			$.ajax({
				type: 'GET',
				url: url,
				timeout: app.timeout,
				dataType: "json",
				success: function(r) {
					app.setItem(app.localKey.userInfo, JSON.stringify(r));
					param = JSON.parse(app.getItem(app.localKey.param));
					if (param.loginBack) {
						window.location.replace(param.loginBack);
					}
				},
				error: function(xhr, type, errorThrown) {
					$.toast(app.ajaxErrorTip);
				}
			});
		}

	}
})(mui, window);