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端
<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.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();}