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层
@Overridepublic 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=2String scene = blogUserDto.getScene();//扫码后跳转的页面String page = "pages/index";boolean checkPath = false;//版本。正式版为release,体验版trial，开发版developString 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端

<div  style="width: 100%;height: 100%;text-align: center;position:relative"><img :src="codeUrl" alt=""  :loading="loadingCorUrl"style=""><div v-if="showexpire"  @click="clickScanQR" style="width: 65%;height: 98%;position:absolute;top:0%;left:50%;transform:translateX(-50%);opacity: 0.9;font-size:20px;background-color: darkgray;font-color:black;"><div style="position:absolute;top:40%;left:40%;"><i class="el-icon-refresh" style="font-size:60px;color:#ffffff;cursor: pointer;"></i></div><div style="position:absolute;top:65%;left:25%;font-size:15px;color:#ffffff;">二维码失效，点击重试</div></div></div>scene:null,timer:null,loadingCorUrl:false,showexpire:false,//点击重新刷新二维码clickScanQR(){this.getQrCode();},

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;this.showexpire=false;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;var seconds=0,minutes=0;_this.timer = setInterval(()=>{seconds=seconds+3;console.log("seconds:"+seconds);if(seconds == 60){minutes = minutes+1;}_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(() => {});console.log("minutes:"+minutes)if(minutes == 1){clearInterval(_this.timer);_this.showexpire=true;}},3000)}}})},

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

#store->userBlog.js里设置
import {login, logout, getInfo,loginByScene} from '@/api/loginBlog'//根据scene查询登录BlogLoginByScene({commit}, userInfo) {const scene = userInfo.scenereturn 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){//创建tokenMap<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();}