微信三种登录方式(移动端，pc端)

1. 方式一：适用于微信环境下打开的移动端

   如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

   官方文档

   https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=UrlEncode（URL)&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

   该链接会重定向到
   redirect_uri/?code=CODE&state=STATE。
   使用code值换取微信用户信息

2. 方式二：第三方开放平台的微信扫码登录,适用于pc端生成微信二维码扫码登录

   通过微信开放平台注册、完善开发者资料、申请开发者资质认证（需要300大洋，大概7个工作日内审核） 和方案一不是同一个APPID

   官方文档

<template>
  <view>
    <view id="wechat-login"></view>
  </view>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  //#ifdef H5
  mounted() {
    const oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";
    document.body.appendChild(oScript);
  },
  //#endif
  methods: {
    onClick(){
      
      // console.log('---生成二维码')  参数见文档
      new WxLogin({
        self_redirect: false, // 是否在iframe内跳转 redirect_uri
        id: 'wechat-login', // 希望二维码嵌入容器的 id
        appid: APPID,
        scope: 'snsapi_login',
        redirect_uri: encodeURIComponent(URL),
        state: "",
        style: "",
        href: ""
      })

 
  },
};
</script>

<style lang="scss" scoped>
</style>

该方案在pc端扫码后会进行重定向一次，体验感并不好 对页面的业务衔接也不是很友好，推荐方案三同样也是扫码登录还省去了平台注册费用，而且还不需要进行重定向

3. 方案三 pc端关注公众号扫码登录 (推荐)
   公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑
   
   微信后台配置文档
   官方开发文档
   http请求方式:
   POST URL: https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
   入参：
   {
   “expire_seconds”: 604800,
   “action_name”: “QR_STR_SCENE”,
   “action_info”: {“scene”: {“scene_str”: “test”}}
   }
   入参详细见文档 可生成临时二维码和永久二维码

   出参：
   {
   “ticket”:“gQH47joAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL2taZ2Z3TVRtNzJXV1Brb3ZhYmJJAAIEZ23sUwMEmm3sUw==”,
   “expire_seconds”:60,
   “url”:“http://weixin.qq.com/q/kZgfwMTm72WWPkovabbI”
   }

   然后使用ticket换取二维码图
   GET https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET

调用接口拿二维码前后端都能实现，最后前端需要调用后端接口获取用户信息

思路大致为：

1. 调用微信接口获取ticket，建议后端调用，可以拿到用户的openId，同时设置有效时长
2. 调用接口使用ticket换取二维码，存在时效性
3. 业务上拿到二维码后 进行用户信息的轮询来查用户信息

该方案省钱，体验感也更好，能同样实现方案二的效果