uni-app微信登陆如何拿到授权回调及插件编写方法,有没有大佬教教

发布于 1周前 作者 vueper 来自 Uni-App

uni-app微信登陆如何拿到授权回调及插件编写方法,有没有大佬教教

1 回复

在uni-app中实现微信登录并获取授权回调,以及编写相关插件,可以通过以下步骤进行。这里假设你已经有一个uni-app项目,并且已经在微信开放平台上注册了应用,获取了相关的AppID和AppSecret。

1. 微信登录授权回调

首先,你需要在manifest.json中配置微信登录的相关信息:

"mp-weixin": {
  "appid": "YOUR_APPID",
  "setting": {
    "urlCheck": false
  }
}

然后在你的页面中,比如pages/login/login.vue,使用微信提供的SDK进行登录:

<template>
  <view>
    <button open-type="getUserInfo" @getuserinfo="onGetUserInfo">微信登录</button>
  </view>
</template>

<script>
export default {
  methods: {
    onGetUserInfo(e) {
      if (e.detail.userInfo) {
        // 用户已授权
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            if (loginRes.code) {
              // 发送 res.code 到后台换取 openId, sessionKey, unionId
              uni.request({
                url: 'YOUR_BACKEND_API_URL/wx_login',
                method: 'POST',
                data: {
                  code: loginRes.code
                },
                success: (res) => {
                  // 保存 openId, sessionKey 等信息到本地或全局状态
                  console.log('登录成功', res.data);
                },
                fail: (err) => {
                  console.error('登录失败', err);
                }
              });
            } else {
              console.log('登录失败!' + loginRes.errMsg);
            }
          }
        });
      } else {
        console.log('用户拒绝授权');
      }
    }
  }
};
</script>

2. 插件编写方法

假设你要编写一个简化微信登录流程的插件,可以创建一个plugins目录,并在其中创建weixin-login.js

// plugins/weixin-login.js
export function weixinLogin(appid, onLoginSuccess, onLoginFail) {
  uni.login({
    provider: 'weixin',
    success: (loginRes) => {
      if (loginRes.code) {
        uni.request({
          url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=YOUR_APPSECRET&js_code=${loginRes.code}&grant_type=authorization_code`,
          success: (res) => {
            if (res.data && res.data.openid) {
              onLoginSuccess(res.data);
            } else {
              onLoginFail(res.errMsg);
            }
          },
          fail: (err) => {
            onLoginFail(err.errMsg);
          }
        });
      } else {
        onLoginFail(loginRes.errMsg);
      }
    }
  });
}

在你的页面中引入并使用这个插件:

<script>
import { weixinLogin } from '@/plugins/weixin-login';

export default {
  methods: {
    onGetUserInfo(e) {
      if (e.detail.userInfo) {
        weixinLogin('YOUR_APPID', (data) => {
          console.log('登录成功', data);
        }, (errMsg) => {
          console.error('登录失败', errMsg);
        });
      } else {
        console.log('用户拒绝授权');
      }
    }
  }
};
</script>

以上代码展示了如何在uni-app中实现微信登录授权回调以及编写一个简化登录流程的插件。注意,实际应用中应妥善保管AppSecret,避免在前端代码中直接暴露。

回到顶部