在uniapp和微信公众号中使用微信授权登录-vue3-vuecli-ts

1.前言

        因为需要做多端应用，所以选择使用uniapp来同时开发h5、微信小程序。

        这里只写有关微信网页的登录授权，非微信网页的后续会写对应的文章。

        技术栈：uniapp、vue3、vite

        编辑器：vscode

2.了解微信授权

        在使用微信授权之前，我们需要了解微信授权的机制。

        Q：我们为什么要微信授权？

        A：因为使用微信授权登录是常规登录的一种方式，并且可以联动多端应用的用户数据，使用户数据唯一（俗话讲就是没有安卓区和苹果区，只用一个大区）。如果我们需要微信小程序的用户在h5网页或者app中也是数据互通，那么就需要使用unionId区分。微信自己用户一套区分用户的规则，openid和unionid，下面贴上官方文档。

        微信网页开发-网页授权

3.如何实现

        1.微信开放平台

                在使用微信授权之前我们需要再微信开放平台上创建应用（关联应用）。

                

                如果你的应用包括微信公众号平台，则需要绑定微信公众号；其他同理。

                创建应用在这里就不多赘述。

        2.uniapp中添加代码

                在uniapp中，在app.vue中添加代码。

                

onLoad(()=>{
    //判断链接查询串使用有code，和本地缓存是否有token
     if (options.query?.code || uni.getStorageSync("token")) {
      //TODO
        this.wxgzhLogin(options.query.code)
     } else {
      let url = encodeURI("https://www.example.com/login");//这里填写你跳转的链接
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri="     +url +"&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect";
      return;
    }
})

        这里code是通过跳转链接带上的，跳转链接可以是一个请求，并且重定向到你的首页附带code。

可以通过code去调用接口获得你当前用户的信息。

wxgzhLogin(code) {
      let that = this;
      return new Promise((resolve, reject) => {
        uni.request({
          url: "你的接口",
          data: {
            code: code,
          },
          method: "POST",
          success(res) {
            if (res.data.code == 200) {
             //TODO
            } else if (res.code == 500) {
                //TODO
            } else {
                //TODO
            }
            resolve(res);
          },
          fail(err) {
           //TODO
          },
        });
      });
    },