Vue3 网站应用实现微信扫码登录功能

主要思路是调用接口获取重定向地址，并且需要进行UrlEncode，如果是内嵌在自己应用内，需要在页面上准备一个容器放置二维码。扫码后会跳转到重定向地址，此时路由会多几个参数，只需要监听路由参数的变化并触发对应方法即可。可参考官方文档

网站应用微信登录开发指南

下面是内置的方法
步骤1：在index.html文件内引入JS文件（微信提供）

<body>
<div id="app"></div>
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</body>

步骤2：在需要使用微信登录的地方实例以下JS对象：

const wechatLogin = () => {
  nextTick(async () => {
    //调用后台接口获取重定向地址，因人而异
    const {code, data} = await getRedirectUrl()
    const url = new URLSearchParams(data)
    if (code === 0) {
      //@ts-ignore
      new WxLogin({
        self_redirect: false,
        id: "login_container", //放置二维码的容器ID
        appid: "your_appId",
        scope: "snsapi_login",
        redirect_uri: encodeURIComponent(url.get('redirect_uri')!), //编码重定向地址
        state: url.get('state'),//重定向地址后台返回的state
        style: "",
        href: ""
      });
    }
  })
}

最后监听路由参数的变化，调用登录方法，登录需要的参数都在路由里面参数里面，传给后端即可实现登录。

watch(() => route.query, (val) => {
  if (val.code && val.state) {
    handleWxLogin()
  }
})

 

posted @ 2024-03-19 15:45  初生土豆  阅读(1338)  评论(0)  编辑  收藏  举报