PC端扫描小程序二维码登录

1、获取二维码地址，通过请求微信开发者文档中的服务端获取无限制小程序二维码URL

#controller层
import org.apache.commons.codec.binary.Base64;
 /**
     * 获取小程序二维码
     */
    @PassToken
    @GetMapping("/getQrCode")
    public AjaxResult getQrCode(BlogUserDto blogUserDto){
        String base64 = blogUserService.getQrCode(blogUserDto);
        if (StrUtil.isBlank(base64)){
            return AjaxResult.error("获取二维码失败");
        }
        return AjaxResult.success("data:image/png;base64,"+base64);
    }

#service层

    /**
     * 获取小程序二维码
     * @return
     */
    String getQrCode(BlogUserDto blogUserDto);


#service impl层
@Override
    public String getQrCode(BlogUserDto blogUserDto) {
        String base64;
        try{
            //先判断access_token是否存在。不存在则查询
            String key = Constants.MINAPP_ACCESS_TOKEN;
            String accessToken = null;
            if (redisCache.hasKey(key)){
                accessToken = redisCache.getCacheObject(key);
            }
            if (accessToken  == null){
                accessToken = wxMaService.getAccessToken(true);
                redisCache.setCacheObject(key,accessToken,7200, TimeUnit.SECONDS);
            }
            //传入的参数a=1&b=2
            String scene = blogUserDto.getScene();
            //扫码后跳转的页面
            String page = "pages/index";
            boolean checkPath = false;
            //版本。正式版为release,体验版trial，开发版develop
            String envVersion = "develop";
            //二维码的宽度
            int width = 280;
            boolean autoColor= false;
            WxMaCodeLineColor lineColor = null;
            boolean isHyaline = false;
            //获取无限制二维码
            byte[] bytes = wxMaService.getQrcodeService().createWxaCodeUnlimitBytes(scene,page,checkPath,envVersion,width,autoColor,lineColor,
                    isHyaline);
            base64 = new String(Objects.requireNonNull(Base64.encodeBase64(bytes)));
        }catch (Exception e){
            e.printStackTrace();
            return null;
        }
        return base64;
    }

#Constant类
    /**
     * 小程序access_token
     */
    public static final String MINAPP_ACCESS_TOKEN = "minapp_access_token:";

2、将获取到的base64图片地址显示在PC端

<img :src="codeUrl" alt=""  :loading="loadingCorUrl">

3、scene的值由PC端生成传给获取二维码的接口。

4、uniapp收到scene的值后，小程序微信登录

 onLoad: function(query) {
		this.getBanner();
		// this.getBlogList();
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
		//获取pc端扫码后传的参数值
		const scene = decodeURIComponent(query.scene);
		console.log("scene:"+scene);
		//如果scene有值，判断用户是否登录
		if(scene && scene != undefined && scene != 'undefined'){
			console.log("token:"+this.$store.state.user.token)
			//如果登录，授权网站。
			if(this.$store.state.user.token){
				console.log("llll")
				updateScene({"scene":scene}).then(res=>{
					
				});
			}else{
				// 如果没有登录，直接微信登录，授权网站
				this.$tab.navigateTo('/pages/mine/wxlogin/index?scene='+scene)
			}
		}
	},

5、pc端具体代码

algorithm(){
    		let abc=['a','b','c','d','e','f','g','h','i','g','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
    		let [max,min]=[Math.floor(Math.random()*(10-7+1)+1),Math.floor(Math.random()*(17-10+1)+17)];
    		abc=abc.sort(()=>0.4-Math.random()).slice(max,min).slice(0,8).join("");
    		var a=new Date().getTime()+abc;
    		return a
    },

getQrCode(){
      this.scene = this.algorithm();
      this.loadingCorUrl=true;
      getQrCode({"scene":this.scene}).then(res=>{
        if(res.code == 200){
          this.codeUrl=res.msg;
          if(this.codeUrl && this.codeUrl != undefined && this.codeUrl != 'undefined'){
              this.loadingCorUrl=false;
              //获取后轮询
              var _this = this;
              _this.timer = setInterval(()=>{
                _this.$store.dispatch("BlogLoginByScene", {"scene":_this.scene}).then((res) => {
                  if(res.code == 200 && res.token && res.token != undefined &&  res.token != 'undefined'){
                    clearInterval(_this.timer);
                    _this.open = false;
                    _this.getUserInfo();
                  }
                }).catch(() => {
                });
              },3000)
          }
        }
      })
    },

6、第5条里的微信扫码登录是另外的接口，在登录配置里另外配置，设置如下

#store->userBlog.js里设置
import {login, logout, getInfo,loginByScene} from '@/api/loginBlog'
 //根据scene查询登录
    BlogLoginByScene({commit}, userInfo) {
      const scene = userInfo.scene
      return new Promise((resolve, reject) => {
        loginByScene(scene).then(res => {
          if(res.code == 200 && res.token && res.token != undefined  && res.token != 'undefined'){
            setToken(res.token)
            commit('SET_BLOG_TOKEN', res.token)
          }
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },

#api->loginBlog.js
//根据scene查询登录
export function loginByScene(scene) {
  const data = {
    scene
  }
  return request({
    url: '/reception/blog/user/getUserByScene',
    headers: {
      isToken: false
    },
    method: 'get',
    params: data
  })
}

7、后端接口

#controller层
/**
     * 根据scene查询用户
     */
    @PassToken
    @GetMapping("/getUserByScene")
    public AjaxResult getUserByScene(BlogUserDto blogUserDto){
        if (StrUtil.isBlank(blogUserDto.getScene())){
            return AjaxResult.error("参数值错误");
        }
        BlogUser blogUser = blogUserService.getOne(new LambdaQueryWrapper<BlogUser>()
                .select(BlogUser::getId)
        .eq(BlogUser::getScene,blogUserDto.getScene()));
        if (blogUser != null){
            //创建token
            Map<String,Object> claims = new HashMap<>();
            claims.put("uuid", IdUtils.getLongId());
            claims.put(Constants.BLOG_LOGIN_USER_KEY,blogUser.getId());
            String token = tokenService.createToken((claims));

            redisCache.setCacheObject(CacheConstants.BLOG_LOGIN_TOKEN_KEY + blogUser.getId(),token);
            AjaxResult ajax = AjaxResult.success();
            ajax.put(Constants.TOKEN, token);
            return ajax;
        }
        return AjaxResult.success();
    }

    /**
     * 更新用户scene值
     * @param id
     * @param blogUser
     * @return
     */
    @PutMapping("/updateScene")
    public AjaxResult updateScene(@CurrentUser Long id,@RequestBody BlogUser blogUser){
        blogUser.setId(id);
        blogUserService.updateById(blogUser);
        return AjaxResult.success();
    }