公众号H5开发填坑指南

网页授权方案

微信使用oauth2方式认证，跳转下面的链接进行认证：

open.weixin.qq.com/connect/oau…

APPID在公众号后台获取
SCOPE有两种，分别是snsapi_base和snsapi_userinfo，对应静默登录和强制授权登录
REDIRECT_URI是跳到上面链接认证后的回调地址（需encode编码），后台配置入口如下图

此处要注意配置的域名要和你代码里写的回调地址属于同一个域名，如果配置的是test.com，但是代码里写的是www.test.com，这样也是不行的。

使用方式：我们的页面搭建在test.com上，REDIRECT_URI配的是test.com，那么跳转到oauth2地址后再返回的地址会是test.com/?code=xxxxx… 这里拿到的code可以用于在后端获取这个用户的openid

代码实现

SCOPE用snsapi_base就是静默登录，vue中实际代码：

onMounted(() => {
  const code = $router.currentRoute.value.query.code
  if (code) {
    console.log(code)
    // 登录、获取openid
  } else {
    const params = {
      appid: app.appid,
      url: encodeURIComponent(`${window.location.href}`),
      scope: 'snsapi_base',
      // scope: 'snsapi_userinfo',
    }
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${params.appid}&redirect_uri=${params.url}&response_type=code&scope=${params.scope}&state=STATE#wechat_redirect`
  }
})

先判断url里是否已有code，如果有，那么是回调地址，可以直接利用code在服务端获取openid，如果没有，则说明还没进行oauth2认证，需要先进行认证。

开发环境配置方式