UniApp开发H5接入微信登录的全过程

UniApp是一个基于Vue.js的跨平台开发框架，可以使用一份代码，在多个平台上运行，包括H5。微信登录是一种比较常见的第三方登录方式，很多应用都会集成，下面详细讲解一下使用UniApp开发H5接入微信登录的全过程。

1. 注册开发者账号

首先，需要在微信开放平台注册开发者账号，然后创建一个应用，获取到应用的AppID和AppSecret。

2. 配置应用

在微信开放平台创建应用成功后，需要在应用详情页面中配置回调URL。在H5接入微信登录时，需要使用到微信登录授权接口，该接口会在用户授权后，将授权码回调到我们配置的回调URL中。

具体操作如下：

登录微信开放平台，在应用管理页面中找到当前应用，点击“开发->基本配置”。
配置“网页授权域名”，必须与我们后面要配置的回调URL保持一致。
配置“授权回调页面域名”，同“网页授权域名”，两个域名必须一致。在该域名下必须有我们要使用的回调URL，否则微信登录授权无法正常进行。

3. 引入Wechat-JS-SDK

UniApp需要使用Wechat-JS-SDK来实现微信登录授权功能，所以需要在页面中引入js文件并初始化。在引入文件之前，需要先获取到微信登录授权的配置参数。配置参数的获取需要调用微信开放平台提供的接口，具体可以参考官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。

获取到配置参数后，在页面中引入Wechat-JS-SDK并初始化即可，代码示例：

import wx from '@/common/js/wx.js'

export default {
    name: 'WechatLogin',
    mounted() {
        let url = location.href.split('#')[0]
        wx.getJsConfig(url)
            .then(res => {
                wx.init(res.data.data)
            })
    }
}

4. 实现微信登录

在页面中实现微信登录的主要步骤如下：

调用微信登录授权接口，获取用户授权code。
使用获取到的code，调用微信开放平台提供的接口，获取用户的access_token和openid。
将获取到的access_token和openid发给后台，后台通过access_token和openid获取用户信息并进行业务处理。

代码示例：

// 实现微信登录
export const wechatLogin = () => {
  let state = 'wechatlogin'
  let redirectUrl = encodeURIComponent(`${process.env.VUE_APP_BASE_URL}/wechatlogin`)
  let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.VUE_APP_WECHAT_APPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`

  window.location.href = url
}

// 获取用户信息
export const getUserInfo = (code) => {
  return new Promise((resolve, reject) => {
    // 使用code换取access_token和openid，具体可以参考官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
    let url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${process.env.VUE_APP_WECHAT_APPID}&secret=${process.env.VUE_APP_WECHAT_APPSECRET}&code=${code}&grant_type=authorization_code`

    axios.get(url)
      .then((res) => {
        let access_token = res.data.access_token
        let openid = res.data.openid

        // 使用access_token和openid获取用户信息
        let userUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`

        axios.get(userUrl)
          .then((res) => {
            resolve(res.data)
          })
          .catch((err) => {
            reject(err)
          })
      })
      .catch((err) => {
        reject(err)
      })
  })
}

示例1：在登录页面中集成微信登录

在登录页面中添加一个微信登录按钮，点击登录按钮后，调用微信登录授权接口进行授权。

页面代码示例：

<template>
  <div class="login">
    <button class="btn" @click="wechatLogin">微信登录</button>
  </div>
</template>

<script>
import { wechatLogin } from '@/api/user.js'

export default {
  name: 'Login',
  methods: {
    // 微信登录
    wechatLogin() {
      wechatLogin()
    }
  }
}
</script>

示例2：在设置页面中集成微信绑定

在设置页面中添加一个微信绑定按钮，点击绑定按钮后，跳转到微信授权页面进行授权。授权成功后，把获取到的用户信息发送给后台，进行绑定操作。