uniapp 安卓app 调起微信app 授权登录

要在UniApp中实现调起微信授权登录，需要使用微信的SDK以及UniApp提供的插件功能。以下是实现步骤和示例代码，包含详细注释。

第一步：准备工作

1. 注册微信开放平台并获取AppID和AppSecret：

   • 前往微信开放平台，创建一个应用并获取对应的AppID和AppSecret。

2. 配置微信开发环境：

   • 下载微信SDK并集成到你的UniApp项目中。

3. 安装UniApp微信插件：

   • 使用以下命令在你的UniApp项目中安装微信插件：

     uni add plugin wx-auth
     

第二步：配置项目

1. 配置manifest.json： 在UniApp项目的manifest.json文件中进行配置。

   {
     "mp-weixin": {
       "appid": "YOUR_WECHAT_APPID"
     },
     "app-plus": {
       "modules": {
         "oauth": {
           "description": "社会化登录"
         }
       },
       "oauth": {
         "weixin": {
           "appid": "YOUR_WECHAT_APPID",
           "appsecret": "YOUR_WECHAT_APPSECRET"
         }
       }
     }
   }
   

2. 配置微信开放平台：在微信开放平台中配置授权回调域名

第三步：实现微信授权登录

以下是实现微信授权登录的详细代码和注释。

1. 引入微信SDK和UniApp插件

在项目的main.js中引入微信SDK和UniApp插件。

import Vue from 'vue'
import App from './App'

// 引入微信SDK
import WeixinSDK from 'weixin-js-sdk';

// 引入UniApp微信插件
import wxAuth from 'uni-wx-auth';

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

2. 编写微信登录逻辑

在需要触发微信登录的页面或组件中编写登录逻辑。以下是示例代码：

export default {
  data() {
    return {
      code: '',
      userInfo: null
    }
  },
  methods: {
    // 调起微信授权登录
    wxLogin() {
      // 检查微信环境
      if (this.checkWeixin()) {
        // 调用UniApp微信插件进行授权登录
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log('登录成功', loginRes);
            this.code = loginRes.code;
            // 获取用户信息
            this.getUserInfo(loginRes.code);
          },
          fail: (err) => {
            console.error('登录失败', err);
          }
        });
      } else {
        console.error('请在微信环境中打开');
      }
    },
    // 检查是否在微信环境中
    checkWeixin() {
      const ua = window.navigator.userAgent.toLowerCase();
      return ua.indexOf('micromessenger') !== -1;
    },
    // 获取用户信息
    getUserInfo(code) {
      uni.request({
        url: 'https://api.weixin.qq.com/sns/oauth2/access_token',
        data: {
          appid: 'YOUR_WECHAT_APPID',
          secret: 'YOUR_WECHAT_APPSECRET',
          code: code,
          grant_type: 'authorization_code'
        },
        success: (res) => {
          console.log('获取access_token成功', res);
          const accessToken = res.data.access_token;
          const openid = res.data.openid;
          // 获取用户详细信息
          this.getUserDetail(accessToken, openid);
        },
        fail: (err) => {
          console.error('获取access_token失败', err);
        }
      });
    },
    // 获取用户详细信息
    getUserDetail(accessToken, openid) {
      uni.request({
        url: 'https://api.weixin.qq.com/sns/userinfo',
        data: {
          access_token: accessToken,
          openid: openid,
          lang: 'zh_CN'
        },
        success: (res) => {
          console.log('获取用户信息成功', res);
          this.userInfo = res.data;
        },
        fail: (err) => {
          console.error('获取用户信息失败', err);
        }
      });
    }
  }
}

3. 用户界面

在相应的页面中添加按钮来触发微信登录。

<template>
  <view>
    <button @click="wxLogin">微信登录</button>
    <view v-if="userInfo">
      <image :src="userInfo.headimgurl" mode="aspectFill"></image>
      <text>{{ userInfo.nickname }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      userInfo: null
    }
  },
  methods: {
    wxLogin() {
      if (this.checkWeixin()) {
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log('登录成功', loginRes);
            this.code = loginRes.code;
            this.getUserInfo(loginRes.code);
          },
          fail: (err) => {
            console.error('登录失败', err);
          }
        });
      } else {
        console.error('请在微信环境中打开');
      }
    },
    checkWeixin() {
      const ua = window.navigator.userAgent.toLowerCase();
      return ua.indexOf('micromessenger') !== -1;
    },
    getUserInfo(code) {
      uni.request({
        url: 'https://api.weixin.qq.com/sns/oauth2/access_token',
        data: {
          appid: 'YOUR_WECHAT_APPID',
          secret: 'YOUR_WECHAT_APPSECRET',
          code: code,
          grant_type: 'authorization_code'
        },
        success: (res) => {
          console.log('获取access_token成功', res);
          const accessToken = res.data.access_token;
          const openid = res.data.openid;
          this.getUserDetail(accessToken, openid);
        },
        fail: (err) => {
          console.error('获取access_token失败', err);
        }
      });
    },
    getUserDetail(accessToken, openid) {
      uni.request({
        url: 'https://api.weixin.qq.com/sns/userinfo',
        data: {
          access_token: accessToken,
          openid: openid,
          lang: 'zh_CN'
        },
        success: (res) => {
          console.log('获取用户信息成功', res);
          this.userInfo = res.data;
        },
        fail: (err) => {
          console.error('获取用户信息失败', err);
        }
      });
    }
  }
}
</script>

<style scoped>
button {
  width: 200px;
  height: 50px;
  background-color: #1AAD19;
  color: white;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  margin: 20px auto;
  display: block;
}
</style>

结论

通过上述步骤，你可以在UniApp中实现调起微信授权登录的功能。这包括了微信SDK的集成、UniApp插件的使用以及相关的代码实现和详细注释。通过这些步骤，你的应用可以方便地实现微信登录功能，为用户提供更加便捷的体验。