uniapp微信授权登录指南

一、uniapp微信授权登录流程

微信登录授权是开发一个App必备的功能之一，uniapp也不例外。在uniapp中，微信授权登录的流程通常包括以下几个步骤：

1、用户点击登录按钮，调用uni.login()方法获取到code值；

uni.login({
    provider: 'weixin',
    success: function (loginRes) {
        // ...
    }
});

2、通过code值向后台服务器发送请求，获取到微信用户的OpenId等信息；

uni.request({
    url: 'https://your.backend.api.com/weixin/login',
    data: {
        code: loginRes.code
    },
    success: function (res) {
        // ...
    }
});

3、后台服务器返回值，返回给前端，前端通过逻辑处理将用户信息展示在页面上。

二、uniapp微信授权登录获取手机号

在微信授权登录之后，我们还可以调用微信的getUserInfo接口获取用户的基本信息，包括微信号、昵称、头像等。同时，如果用户已经绑定了手机号，我们还可以通过getPhoneNumber接口获取到用户的手机号码。

wx.getUserProfile({
    desc: "用于完善会员资料",
    success: function (res) {
        console.log(res.userInfo);
        console.log(res.encryptedData);
        console.log(res.iv);
    }
})
wx.login({
    success: res => {
        console.log(res.code);
    }
})

三、uniapp微信一键登录

为了提高用户的操作体验，我们可以使用uniapp提供的nvue组件来实现微信一键登录的功能。在nvue页面中，引入WeChatAuth组件，通过配置相关参数就可以很方便地实现微信一键登录的功能。

  
 

<script>
    import WeChatAuth from "@/components/WeChatAuth.vue";
    export default {
        components: {
            WeChatAuth
        },
        data() {
            return {
                authVisible: false,
                appId: 'APPID',
                scope: 'snsapi_userinfo',
                successUrl: 'SUCCESS_URL',
                authCode: '',
                authUserId: ''
            }
        },
        methods: {
            getAuthCode() {
                this.authVisible = true;
            },
            onAuthSuccess(authResult) {
                this.authCode = authResult.code;
                this.authUserId = authResult.auth_user_id;
                this.authVisible = false;
            },
            onAuthCancel() {
                this.authVisible = false;
            }
        }
    }
</script>

四、uniapp h5授权登录

在h5页面中，我们可以直接调用微信开放平台提供的JS SDK来实现微信授权登录的功能。在调用JS SDK之前，需要向微信开放平台申请AppId，并在页面中引入JS SDK代码。在调用JS SDK时，需要注意在移动端和PC端的表现是不同的。

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
  wx.config({
    appId: 'YOUR_APPID',
    timestamp: 'YOUR_TIMESTAMP',
    nonceStr: 'YOUR_NONCESTR',
    signature: 'YOUR_SIGNATURE',
    jsApiList: [
      'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage',
      'getNetworkType', 'openLocation', 'getLocation',
      'hideOptionMenu', 'showOptionMenu', 'hideMenuItems',
      'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',
      'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd',
      'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice',
      'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage','downloadImage',
      'getLocalImgData', 'previewFile', 'chooseWXPay','openBusinessView',
      'openEnterpriseContact', 'openEnterpriseChat', 'launchMiniProgram',
      'getInstallState', 'scanQRCode','openWXDeviceLib','closeWindow','openProductSpecificView',
      'addCard','choose_card','openCard'
    ]
  })
  wx.ready(function(){
    // ...
  });
</script>

五、uniapp微信小程序授权登录

在微信小程序中，我们可以使用uniapp提供的uni.login()接口向微信服务器请求code值，再通过code值向后台发起HTTP请求，获取用户信息。代码示例：

getUserInfo: function (cb) {
    var that = this
    if (that.globalData.userInfo) {
        typeof cb == "function" && cb(that.globalData.userInfo)
    } else {
        wx.login({
            success: function () {
                wx.getUserInfo({
                    success: function (res) {
                        that.globalData.userInfo = res.userInfo
                        typeof cb == "function" && cb(that.globalData.userInfo)
                    }
                })
            }
        })
    }
}

六、uniapp微信授权登录新方法

为了提高用户的登录效率，我们还可以使用新的方式实现微信授权登录的功能。这种方式是通过微信开放平台提供的组件直接在页面中实现授权登录。

  
 

<script>
    export default {
        data() {
            return {
                userInfo: {},
                isAuthorized: null
            }
        },
        methods: {
            getUserInfo(e) {
                uni.getUserProfile({
                    desc: '用于完善会员资料',
                    success: res => {
                        this.userInfo = res.userInfo;
                        this.isAuthorized = true;
                    },
                    fail: () => {
                        this.isAuthorized = false;
                    }
                })
            }
        }
    }
</script>

七、uniapp微信登录的界面设计

在实现微信授权登录的过程中，页面的设计也是非常关键的。为了提高用户的体验，我们可以从以下几点入手：

1、页面布局：授权登录页面应该简洁明了，不要添加过多的元素，以免用户分心。

2、颜色搭配：页面的颜色搭配应该与App整体风格一致，避免视觉上的冲突。

3、按钮样式：授权登录按钮要醒目易触，提示用户注意登录的重要性。

4、授权说明：要在页面上书写授权的说明，让用户了解授权的具体作用和可信度。

八、uniapp微信授权登录未弹出的解决办法

当我们实现微信授权登录时，有时可能会出现未弹出授权窗口的情况。这种情况通常是因为微信过期或者微信服务器故障导致的。解决方法如下：

1、检查微信是否过期，尝试重新登录微信；

2、检查微信服务器是否正常运行，排除服务器故障的可能性；

3、升级微信版本，更新最新的微信JS SDK。

九、uniapp微信授权登录无法弹起的解决办法

有时候我们会在实现微信授权登录时，发现无法弹起授权窗口的情况。这往往是由于微信App或JS SDK版本过低导致的。要解决这个问题，我们可以尝试以下几个方法：

1、检查微信App和JS SDK版本是否最新，尝试进行升级；

2、尝试重启微信App，清除缓存和Cookie值；

3、检查授权参数是否正确，通常情况下，导致弹窗无法弹起的原因是因为授权参数中的appid或scope值不正确，需要仔细检查。