微信公众号:生成二维码,扫码进入指定的H5页面并获取openid,实现自定义分享【完整过程,附主要代码】


说明

功能:需要生成二维码,识别二维码后进入指定H5页面,获取到使用人的openid,然后进行自己其他操作。

这篇文章主要记录的是生成二维码、跳转到指定页面的模块。

使用框架如下:
后端:jeecgboot
Web、 H5:Vue3


一、生成二维码,指定跳转路径

方式1、微信提供了生成二维码的接口,可直接调用获取
文档地址:微信公众开发者文档
避坑点:开启公众号的服务器配置,JS域名配置等,白名单配置;具体的可以看一看微信公众号开发。

方式2【推荐】:使用草料二维码进行生成,带有扫描后进入的页面路径
生成地址:草料二维码生成地址
注意:跳转到自己的后台微信验证方法,并获取到openid拼接到H5页面,在H5页面通过截取的方式获取到openid。

1、确定回调域名并构造URL,一个参考地址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=微信公众号id&redirect_uri=后端验证方法接口&connect_redirect=1#wechat_redirect

参数说明:【网址需要encodeURL】
在这里插入图片描述

2、后端验证方法接口方法:使用WxOAuth2AccessToken类进行微信验证
(1)引入依赖

	<dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>weixin-java-mp</artifactId>
            <version>4.1.0</version>
    </dependency>

(2)验证的方法:

@Slf4j
@RequiredArgsConstructor(onConstructor_ = @Autowired)
@RestController
@RequestMapping("wx/redirect/{appid}")
public class WxRedirectController {

    private final WxMpService wxMpService;
    private final WxMpProperties properties;
    private final RedisUtil redisUtil;
    private final IWxUserService wxUserService;

    /**
     * 微信验证
     * @param req  :
     * @param resp :
     * @return org.jeecg.common.api.vo.Result
     * @author 张雪
     */
    @GetMapping("index")
    public void index(@PathVariable String appid, HttpServletRequest req, HttpServletResponse resp) throws Exception {
        if (!this.wxMpService.switchover(appid)) {
            throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置,请核实!", appid));
        }
        //菜单按钮的回调code 用于获取用户的openid
        String code = req.getParameter("code");

        //获取openid
        String openid = "";
        WxOAuth2AccessToken accessToken = this.wxMpService.getOAuth2Service().getAccessToken(code);
        redisUtil.set("get_access_token",accessToken.getAccessToken());
        WxOAuth2UserInfo user = this.wxMpService.getOAuth2Service().getUserInfo(accessToken, null);
        openid = user.getOpenid();

        //code只能使用一次,5分钟未被使用自动过期。 所以缓存code
        redisUtil.set(code, openid, 5 * 60);
        // 跳转到前端的路径带有#,vue的router模式需要使用hash模式
        String page = properties.getUrl().getH5Url().concat("/#/base/index?openid=").concat(openid);
        // 重定向
        resp.sendRedirect(page);
    }
}

二、进入指定的H5页面,并获取openid

在vue的permission.js中通过router来截取到传递过来的openid :

const redirect = '/base/index'


router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${i18nRender(to.meta.title)} - ${domTitle}`)
  
  //微信按钮进入 携带openid
  console.log("微信按钮进入-参数:",to.query)
  if (to.path === redirect) {
    //把openid放置到仓库
    storage.set(OPENID, to.query.openid, 7 * 24 * 60 * 60 * 1000)
    console.log(storage.get(OPENID));
  }

  next()
})

在其他页面上使用时:

this.openid = storage.get(OPENID);

自定义分享可参考我的这篇文章:微信公众号自定义分享

总结

第一次接触扫码功能的编程,在前端上踩了挺多坑的呜呜呜呜,特此做一个记录。
前端菜鸡,若有错误请指正。

  • 6
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值