devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

PC端扫描小程序二维码登录_pc端小程序二维码可以pc端扫描吗

作者：小蓝xlanll | 2024-02-27 10:39:08

赞

踩

pc端小程序二维码可以pc端扫描吗

maven pom.xml文件添加依赖

  1.        <dependency>
  2.                 <groupId>com.github.binarywang</groupId>
  3.                 <artifactId>weixin-java-miniapp</artifactId>
  4.                 <version>4.4.8.B</version>
  5.             </dependency>

微信小程序配置：

  1. #环境配置文件配置小程序APPID和密钥
  2. wx:
  3.     app-id: xx
  4.     app-secret: xx
  5.  
  6.  
  7. #获取配置环境的属性值
  8. package com.xx.framework.config.properties;
  9.  
  10. import lombok.Data;
  11. import org.springframework.boot.context.properties.ConfigurationProperties;
  12. import org.springframework.context.annotation.Configuration;
  13.  
  14. /**
  15.  * 微信参数
  16.  */
  17. @Configuration
  18. @ConfigurationProperties(prefix = "wx")
  19. @Data
  20. public class WxProperties {
  21.     private String appId;
  22.     private String appSecret;
  23. }
  24.  
  25. #配置微信小程序类
  26. package com.xx.framework.config;
  27.  
  28. import cn.binarywang.wx.miniapp.api.WxMaService;
  29. import cn.binarywang.wx.miniapp.api.impl.WxMaServiceImpl;
  30. import cn.binarywang.wx.miniapp.config.WxMaConfig;
  31. import cn.binarywang.wx.miniapp.config.impl.WxMaDefaultConfigImpl;
  32. import com.xx.framework.config.properties.WxProperties;
  33. import lombok.AllArgsConstructor;
  34. import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
  35. import org.springframework.context.annotation.Bean;
  36. import org.springframework.context.annotation.Configuration;
  37.  
  38. @AllArgsConstructor
  39. @Configuration
  40. public class WxConfig {
  41.     private final WxProperties wxProperties;
  42.     /**
  43.      * 小程序配置
  44.      * @return
  45.      */
  46.     @Bean
  47.     @ConditionalOnMissingBean
  48.     public WxMaConfig wxMaConfig() {
  49.         WxMaDefaultConfigImpl config = new WxMaDefaultConfigImpl();
  50.         config.setAppid(this.wxProperties.getAppId());
  51.         config.setSecret(this.wxProperties.getAppSecret());
  52.         return config;
  53.     }
  54.  
  55.     @Bean
  56.     public WxMaService wxMaService(WxMaConfig maConfig) {
  57.         WxMaService service = new WxMaServiceImpl();
  58.         service.setWxMaConfig(maConfig);
  59.         return service;
  60.     }
  61. }

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

  1. #controller层
  2. import org.apache.commons.codec.binary.Base64;
  3.  /**
  4.      * 获取小程序二维码
  5.      */
  6.     @PassToken
  7.     @GetMapping("/getQrCode")
  8.     public AjaxResult getQrCode(BlogUserDto blogUserDto){
  9.         String base64 = blogUserService.getQrCode(blogUserDto);
  10.         if (StrUtil.isBlank(base64)){
  11.             return AjaxResult.error("获取二维码失败");
  12.         }
  13.         return AjaxResult.success("data:image/png;base64,"+base64);
  14.     }
  15.  
  16. #service层
  17.  
  18.     /**
  19.      * 获取小程序二维码
  20.      * @return
  21.      */
  22.     String getQrCode(BlogUserDto blogUserDto);
  23.  
  24.  
  25. #service impl层
  26. @Override
  27.     public String getQrCode(BlogUserDto blogUserDto) {
  28.         String base64;
  29.         try{
  30.             //先判断access_token是否存在。不存在则查询
  31.             String key = Constants.MINAPP_ACCESS_TOKEN;
  32.             String accessToken = null;
  33.             if (redisCache.hasKey(key)){
  34.                 accessToken = redisCache.getCacheObject(key);
  35.             }
  36.             if (accessToken  == null){
  37.                 accessToken = wxMaService.getAccessToken(true);
  38.                 redisCache.setCacheObject(key,accessToken,7200, TimeUnit.SECONDS);
  39.             }
  40.             //传入的参数a=1&b=2
  41.             String scene = blogUserDto.getScene();
  42.             //扫码后跳转的页面
  43.             String page = "pages/index";
  44.             boolean checkPath = false;
  45.             //版本。正式版为release,体验版trial，开发版develop
  46.             String envVersion = "develop";
  47.             //二维码的宽度
  48.             int width = 280;
  49.             boolean autoColor= false;
  50.             WxMaCodeLineColor lineColor = null;
  51.             boolean isHyaline = false;
  52.             //获取无限制二维码
  53.             byte[] bytes = wxMaService.getQrcodeService().createWxaCodeUnlimitBytes(scene,page,checkPath,envVersion,width,autoColor,lineColor,
  54.                     isHyaline);
  55.             base64 = new String(Objects.requireNonNull(Base64.encodeBase64(bytes)));
  56.         }catch (Exception e){
  57.             e.printStackTrace();
  58.             return null;
  59.         }
  60.         return base64;
  61.     }
  62.  
  63. #Constant类
  64.     /**
  65.      * 小程序access_token
  66.      */
  67.     public static final String MINAPP_ACCESS_TOKEN = "minapp_access_token:";

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

  1. <div  style="width: 100%;height: 100%;text-align: center;position:relative">
  2.                 <img :src="codeUrl" alt=""  :loading="loadingCorUrl"
  3.                  style="">
  4.                 <div v-if="showexpire"  @click="clickScanQR" style="width: 65%;height: 98%;
  5.                 position:absolute;top:0%;left:50%;
  6.                 transform:translateX(-50%);opacity: 0.9;font-size:20px;
  7.                 background-color: darkgray;font-color:black;">
  8.                   <div style="position:absolute;top:40%;left:40%;">
  9.                     <i class="el-icon-refresh" style="font-size:60px;color:#ffffff;cursor: pointer;"></i>
  10.                   </div>
  11.                   <div style="position:absolute;top:65%;left:25%;font-size:15px;color:#ffffff;">
  12.                     二维码失效，点击重试</div>
  13.                 </div>
  14.               </div>
  15.  
  16.  
  17.  
  18.       scene:null,
  19.       timer:null,
  20.       loadingCorUrl:false,
  21.       showexpire:false,
  22.  
  23.  
  24.  
  25.  //点击重新刷新二维码
  26.     clickScanQR(){
  27.       this.getQrCode();
  28.     },

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

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

  1.  onLoad: function(query) {
  2. 		this.getBanner();
  3. 		// this.getBlogList();
  4. 		setTimeout(function () {
  5. 			console.log('start pulldown');
  6. 		}, 1000);
  7. 		uni.startPullDownRefresh();
  8. 		//获取pc端扫码后传的参数值
  9. 		const scene = decodeURIComponent(query.scene);
  10. 		console.log("scene:"+scene);
  11. 		//如果scene有值，判断用户是否登录
  12. 		if(scene && scene != undefined && scene != 'undefined'){
  13. 			console.log("token:"+this.$store.state.user.token)
  14. 			//如果登录，授权网站。
  15. 			if(this.$store.state.user.token){
  16. 				console.log("llll")
  17. 				updateScene({"scene":scene}).then(res=>{
  18. 					
  19. 				});
  20. 			}else{
  21. 				// 如果没有登录，直接微信登录，授权网站
  22. 				this.$tab.navigateTo('/pages/mine/wxlogin/index?scene='+scene)
  23. 			}
  24. 		}
  25. 	},

5、pc端具体代码

  1. algorithm(){
  2.     		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'];
  3.     		let [max,min]=[Math.floor(Math.random()*(10-7+1)+1),Math.floor(Math.random()*(17-10+1)+17)];
  4.     		abc=abc.sort(()=>0.4-Math.random()).slice(max,min).slice(0,8).join("");
  5.     		var a=new Date().getTime()+abc;
  6.     		return a
  7.     },
  8.  
  9. getQrCode(){
  10.       this.scene = this.algorithm();
  11.       this.loadingCorUrl=true;
  12.       this.showexpire=false;
  13.       getQrCode({"scene":this.scene}).then(res=>{
  14.         if(res.code == 200){
  15.           this.codeUrl=res.msg;
  16.           if(this.codeUrl && this.codeUrl != undefined && this.codeUrl != 'undefined'){
  17.               this.loadingCorUrl=false;
  18.               //获取后轮询
  19.               var _this = this;
  20.               var seconds=0,minutes=0;
  21.               _this.timer = setInterval(()=>{
  22.                 seconds=seconds+3;
  23.                 console.log("seconds:"+seconds);
  24.                 if(seconds == 60){
  25.                   minutes = minutes+1;
  26.                 }
  27.                 _this.$store.dispatch("BlogLoginByScene", {"scene":_this.scene}).then((res) => {
  28.                   if(res.code == 200 && res.token && res.token != undefined &&  res.token != 'undefined'){
  29.                     clearInterval(_this.timer);
  30.                     _this.open = false;
  31.                     _this.getUserInfo();
  32.                   }
  33.                 }).catch(() => {
  34.                 });
  35.                 console.log("minutes:"+minutes)
  36.                 if(minutes == 1){
  37.                   clearInterval(_this.timer);
  38.                   _this.showexpire=true;
  39.                 }
  40.               },3000)
  41.           }
  42.         }
  43.       })
  44.     },

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

  1. #store->userBlog.js里设置
  2. import {login, logout, getInfo,loginByScene} from '@/api/loginBlog'
  3.  //根据scene查询登录
  4.     BlogLoginByScene({commit}, userInfo) {
  5.       const scene = userInfo.scene
  6.       return new Promise((resolve, reject) => {
  7.         loginByScene(scene).then(res => {
  8.           if(res.code == 200 && res.token && res.token != undefined  && res.token != 'undefined'){
  9.             setToken(res.token)
  10.             commit('SET_BLOG_TOKEN', res.token)
  11.           }
  12.           resolve(res)
  13.         }).catch(error => {
  14.           reject(error)
  15.         })
  16.       })
  17.     },
  18.  
  19. #api->loginBlog.js
  20. //根据scene查询登录
  21. export function loginByScene(scene) {
  22.   const data = {
  23.     scene
  24.   }
  25.   return request({
  26.     url: '/reception/blog/user/getUserByScene',
  27.     headers: {
  28.       isToken: false
  29.     },
  30.     method: 'get',
  31.     params: data
  32.   })
  33. }

7、后端接口

  1. #controller层
  2. /**
  3.      * 根据scene查询用户
  4.      */
  5.     @PassToken
  6.     @GetMapping("/getUserByScene")
  7.     public AjaxResult getUserByScene(BlogUserDto blogUserDto){
  8.         if (StrUtil.isBlank(blogUserDto.getScene())){
  9.             return AjaxResult.error("参数值错误");
  10.         }
  11.         BlogUser blogUser = blogUserService.getOne(new LambdaQueryWrapper<BlogUser>()
  12.                 .select(BlogUser::getId)
  13.         .eq(BlogUser::getScene,blogUserDto.getScene()));
  14.         if (blogUser != null){
  15.             //创建token
  16.             Map<String,Object> claims = new HashMap<>();
  17.             claims.put("uuid", IdUtils.getLongId());
  18.             claims.put(Constants.BLOG_LOGIN_USER_KEY,blogUser.getId());
  19.             String token = tokenService.createToken((claims));
  20.  
  21.             redisCache.setCacheObject(CacheConstants.BLOG_LOGIN_TOKEN_KEY + blogUser.getId(),token);
  22.             AjaxResult ajax = AjaxResult.success();
  23.             ajax.put(Constants.TOKEN, token);
  24.             return ajax;
  25.         }
  26.         return AjaxResult.success();
  27.     }
  28.  
  29.     /**
  30.      * 更新用户scene值
  31.      * @param id
  32.      * @param blogUser
  33.      * @return
  34.      */
  35.     @PutMapping("/updateScene")
  36.     public AjaxResult updateScene(@CurrentUser Long id,@RequestBody BlogUser blogUser){
  37.         blogUser.setId(id);
  38.         blogUserService.updateById(blogUser);
  39.         return AjaxResult.success();
  40.     }

注释：

如果获取accesstoken出现以下错误，请获取稳定版本

{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest, could get access_token by getStableAccessToken, more details at https://mmbizurl.cn/s/JtxxFh33r rid: 65b3294e-6993fa45-745b3def"}
结果:{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest, could get access_token by getStableAccessToken, more details at https://mmbizurl.cn/s/JtxxFh33r rid: 65b3294e-6993fa45-745b3def"}
 

获取稳定版接口调用凭据 | 微信开放文档

POST https://api.weixin.qq.com/cgi-bin/stable_token
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/152176
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号