导文

微信小程序登录怎么实现？
微信h5登录怎么实现？
用uniapp写同一个页面，怎么实现都通用呢？

微信小程序登录

先写一个样式

  <button type="default" @click="handerdl">登陆</button>

在网页中创建一个可点击的按钮，创建一个回调函数handerdl。

代码实现

以下代码包含了登录逻辑和根据不同平台存储 token 的代码：

handerdl() {
  wx.login({
    success(res) {
      if (res.code) {
        // 如果登录成功，会执行以下代码块
        // 打印登录获取的 code
        console.log(res.code);

        // 调用 Login 函数，传入 res.code，并且使用 Promise 对象处理返回结果
        Login(res.code).then((res) => {
          // 打印返回的数据
          console.log(res.data);
          console.log(res.data.access_token);

          // 根据不同平台进行 token 存储处理

          // 微信小程序平台处理
          /*#ifdef MP-WEIXIN*/
          wx.setStorageSync("token", res.data.access_token);
          wx.setStorageSync("Bear", res.data.token_type);
          /*#endif*/
        });
      } else {
        // 登录失败时的处理
        console.log("登录失败！" + res.errMsg);
      }
    },
  });
}

详细解释：

2. wx.login({ ... })：这是一个微信小程序的 API 调用，用于获取用户登录凭证 code。wx 是微信小程序提供的全局对象，wx.login 方法获取用户登录凭证（code），然后执行 success 回调函数。

3. success(res) { ... }：登录成功后的回调函数，参数 res 包含了登录成功后的返回信息，其中 res.code 是用户登录凭证。

4. if (res.code) { ... } else { ... }：判断是否成功获取了登录凭证，如果成功则执行相应的操作，否则输出登录失败信息。

5. Login(res.code).then((res) => { ... });：调用名为 Login 的函数（假设是一个异步函数或者返回 Promise 的函数），将 res.code 作为参数传递给它。成功获取到返回结果后，使用 .then() 处理返回的数据。

6. console.log(res.data); 和 console.log(res.data.access_token);：打印登录成功后返回的数据，包括 access_token。

7. 条件编译块：

   • /*#ifdef MP-WEIXIN*/ 和 /*#endif*/：这部分是条件编译的语法，用于区分不同的平台。在微信小程序平台下执行 wx.setStorageSync 存储 token。

微信h5登录

先写一个样式

     <button  @click="getWeChatCode">微信授权登录</button>

在网页中创建一个可点击的按钮，创建一个回调函数getWeChatCode。

代码实现

主要分为两个函数：checkWeChatCode() 和 getWeChatCode()。来逐步解释这两个函数的作用和实现细节：

1. checkWeChatCode()

checkWeChatCode() {
  let code = this.getUrlCode("code");
  let http = this.getUrlCode("http");
  console.log(22, code, http, encodeURIComponent(location.href));
  if (code) {
    // this.handleToLogin(code)  //该方法如果回调页面是在本页面才使用 我这里的实例没有使用回调页面使用了
    console.log(23);
  }
},

• 作用：用于检查当前页面 URL 中是否包含名为 code 的参数。
• 详细解释：
  • this.getUrlCode("code")：调用 getUrlCode 函数获取 URL 中名为 code 的参数值。
  • this.getUrlCode("http")：获取 URL 中名为 http 的参数值。
  • console.log(22, code, http, encodeURIComponent(location.href));：输出日志，显示 code、http 参数的值，以及当前页面的 URL。

2. getWeChatCode()

getWeChatCode() {
  uni.setStorageSync("wechat_login_tag", "true");
  const appID = "wxqweqweqwe123123"; // 公众号appID
  const parsedUrl = new URL(window.location.href);
  const basAAA = parsedUrl.origin;
  const redirectUrl = basAAA;
  const callBack = `${redirectUrl}/user/index`; // 回调地址 就是你的完整地址登录页

  window.location.href =
    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
    appID +
    "&redirect_uri=" +
    encodeURIComponent(callBack) +
    "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
},

• 作用：用于发起微信授权登录请求，如果当前页面没有 code 参数，则重定向到微信授权页面。
• 详细解释：
  • uni.setStorageSync("wechat_login_tag", "true");：在 uni-app 中设置一个本地存储标记，用于退出登录后不再自动触发登录。
  • const appID = "wxqweqweqwe123123";：设置微信公众号的 AppID，确保请求授权时使用正确的应用标识。
  • const parsedUrl = new URL(window.location.href);：解析当前页面的 URL。
  • const basAAA = parsedUrl.origin;：获取当前页面的域名部分。
  • const redirectUrl = basAAA;：设置重定向地址为当前页面的域名部分。
  • const callBack = ${redirectUrl}/user/index;：拼接完整的回调地址，这里将重定向到 /user/index 页面。
  • window.location.href = ...：构建微信授权链接并进行页面重定向。
    • "https://open.weixin.qq.com/connect/oauth2/authorize"：微信授权登录接口地址。
    • appid=：传入公众号的 AppID。
    • redirect_uri=：传入经过 encodeURIComponent 编码的回调地址。
    • response_type=code：要求微信返回 code 类型的授权码。
    • scope=snsapi_userinfo：获取用户的基本信息。
    • state=1：状态参数，用于防止 CSRF。
    • #wechat_redirect：微信要求的固定参数，表示重定向到微信授权页面。

页面获取登陆后的code

  onLoad(parm) {
    let code = this.getUrlCode("code");
    console.log(code);
  },

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。