uniapp打包App实现微信授权登录（详解）

1.前言

开发中我们常常遇到，微信，QQ等第三方登录在App上进行授权登录，便于用户快速登录，今天将详细讲解app实现微信授权的登录流程，话不多说~~

2.真机调试与打包

1. 手机配置

手机打开开发者模式，基本就是打开手机设置---> 关于手机--->软件版本或版本号--->点击5到6次直到出现如下图即可：

同时手机需要开启USB调试，找到系统更新--->开发人员选项--->开启USB调试

数据线连接电脑和手机，在弹出页面中选择文件传输

2. 打包

一切准备就绪打开HBuilder X运行项目：

这里就不在开发调试了，为了避免每一次调试都进行打包，会造成时间与资源的浪费，我们直接打包自定义基座

详细见官方文档

3. 生成签名

详见官方文档

打开下载的软件

3.微信授权

1. 授权基础配置

声明：实现微信授权需要 app应用包名 ， app应用签名 和 appid

完成上图的后台配置。

打开HBuilder X,打开manifest.json进行配置

2. 代码实现

这里使用H5+plus实现App的微信授权

export const wxloginHook = () => {
  return new Promise((resolve, reject) => {
    plus.oauth.getServices((services) => {
      if (services && services.length) {
        services.forEach((item) => {
          if (item.id === "weixin") {
            item.authorize((event) => {
              // event.code传递给后台获取token，请求用户信息
              resolve(event)
            }, (fail) => {
              reject(fail)
              Toast('none', '取消授权')
            }, {
              scope: "snsapi_userinfo",
              state: "authorize",
              // 后台配置的appid
              appid: "",
            });
          } else {
            Toast('none', '当前环境不支持微信授权')
          }
        })
      }



    }, (fail) => {
      Toast('none', '无微信授权服务')
      reject(fail)
    })
  })
}

详细见官方文档

最后运行代码弹出授权页面点击同意授权获取code

4.写在最后

APP端的微信登录使用的是h5+的api，个人也是查阅相关文档，实现了微信授权登录，没涉及技术难点，仅供刚刚接触到授权业务的翻阅，如有不对欢迎指出