微信公众号登录流程

微信公众平台配置

配置js安全接口域名

基本上照着官方文档进行配置就好

在自定义菜单里跳转网页填网站域名

登录代码

vue项目的话建议在app.vue的created生命周期里调用
uniapp项目的话建议在app.vue的onLaunch生命周期里调用
html的话window.onload里调用

getWxCode() {
   let that = this;
   let appid = appid; //从微信公众平台来
   this.code = this.getUrlCode().code; //拿到code
   let local = window.location.href;
   if (this.code == null || this.code === "") {
     //不存在就打开上面的地址进行授权
     window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect`;
   } else {
     callBack(this.code) //该方法是根据自己后端接口来
   }
},
//获取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;
},

后端拿到code后进行登录操作

服务器端的操作（node版本）

//这两个东西从微信公众平台来
export const secret = '*************' 
export const appId = '**************'
import jwt from "jsonwebtoken"; //记得npm下载


//用户登录
  this.login = function (req, res, next) {
    // 发送请求到微信请求openid等-->加密token-->连接数据库验证openid，有就更新数据，没有就创建新用户-->数据库操作成功后返回客户端token，失败返回报错信息
    axios.get('https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + req.body.code + '&grant_type=authorization_code').then((datas) => {
      if (datas.status == 200) {
        let obj = {
          session_key: datas.data.session_key,
          openid: datas.data.openid
        }
        
        //加密
        let token = jwt.sign(obj, secret, { expiresIn: 60 * 2});//使用jwt加密用户信息
        res.send(token)
      } 
    }).catch((err) => {
      res.send(err)
    })

结尾

前端拿到tonken后保存本地，当然根据自己业务的需求，一般前端还会将用户信息也传给后端，后端拿到用户信息，新建或更新用户数据，保存数据库，然后返给前端

有兴趣可以加我们的qq群，前端兼职的:583740334