之前經(jīng)手的一個(gè)uniapp開發(fā)的app剩下一個(gè)微信登錄的功能，之前沒有獨(dú)立搞過這一塊，在網(wǎng)上查了很多資料已解決。記錄一下實(shí)現(xiàn)的步驟，方便下一次copy。

一、首先在Hbuilder中配置微信授權(quán)登錄
App模塊配置中勾選OAuth -->微信登錄 ：填寫appid和appsecret

二、獲取appid和appsecret
1、appid和appsecret是在微信開放平臺(tái)中獲取的。首先需要去微信開放平臺(tái)注冊(cè)賬號(hào)，創(chuàng)建移動(dòng)應(yīng)用(下圖)

2、 創(chuàng)建移動(dòng)應(yīng)用需要填寫包名和簽名(后續(xù)會(huì)介紹如何獲取)，按照提示填寫完成 創(chuàng)建應(yīng)用。

3、查看應(yīng)用的appid和appsecret

三、獲取第二步中的應(yīng)用包名和應(yīng)用簽名
1、應(yīng)用包名是HBuilder打包時(shí)的Android包名：隨便填寫,遵循 xxx.xxx.xxx各式，不允許大寫字母

2、應(yīng)用簽名：點(diǎn)擊上圖的使用自有證書選項(xiàng) 點(diǎn)擊前往生成證書頁(yè)面

這一步也比較簡(jiǎn)單，按照文檔上步驟來就行。特別需要注意的是上圖中的md5碼就是第二步中需要使用到的簽名,忘記了可以利用上面查看證書信息的指令查看。密碼也不要忘記了，打包app的時(shí)候需要輸入密碼。

四、登錄按鈕代碼
上面的步驟都是為了獲取微信授權(quán)的，下面開始寫頁(yè)面代碼，比較簡(jiǎn)單

<template>
    <view class="page">
        <view class="login">
            <!-- <view class="header"><image src="/static/img/weixin.png"></image></view> -->
            <view class="content">
                <view class="title">legao 申請(qǐng)使用</view>
                <view class="info">你的微信頭像、昵稱、地區(qū)和性別信息</view>
            </view>
            <button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="handleThirdLoginApp">授權(quán)登錄</button>
            <button type="default" class="refuse" @click="goback">拒絕</button>
        </view>
        <u-toast ref="uToast" />
    </view>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
        goback() {
            uni.navigateTo({
                url: '/pages/login/login'
            });
        },
        //app第三方登錄

        handleThirdLoginApp() {
            var that = this;
            uni.getProvider({
                service: 'oauth',
                success: function(res) {
                    if (~res.provider.indexOf('weixin')) {
                        uni.login({
                            provider: 'weixin',
                            success: function(loginRes) {
                                // loginRes 包含access_token，expires_in，openid，unionid等信息
                                //這里只需要把這些數(shù)據(jù)傳遞給后臺(tái)，讓后臺(tái)去請(qǐng)求微信的接口拿到用戶信息就可以了，
                                //然后返回登錄狀態(tài)
                                that.getApploginData(loginRes); //請(qǐng)求登錄接口方法
                            },

                            fail: function(res) {
                                that.$refs.uToast.show({
                                    title: '微信登錄失敗',
                                    type: 'warning'
                                });
                            }
                        });
                    }
                }
            });
        },

        //請(qǐng)求登錄接口方法

        getApploginData(data) {
            var that = this;
            //這邊是前端自己去調(diào)微信用戶信息的接口，根據(jù)接口需要請(qǐng)求，如果不需要前端去獲取的話就交給后端，可省去次操作
            uni.request({
                url: 'https://api.weixin.qq.com/sns/userinfo?access_token=' + data.authResult.access_token + '&openid=' + data.authResult.openid,
                method: 'GET',
                dataType: 'json',
                header: {
                    'content-type': 'application/x-www-form-urlencoded' // 默認(rèn)值
                },

                success(res) {
                    console.log('【登錄回調(diào)啾啾啾】', res);
                    //前端調(diào)用微信接口，獲取到微信用戶的基本信息，傳遞給后臺(tái)
                    that.$api.wxloginThred({ unionid:data.authResult.unionid,image:res.data.headimgurl, nickname:res.data.nickname,}).then(res=>{
                        console.log(res)
                        if (res.statusCode == 200) {
                            uni.setStorageSync('userInfo', JSON.stringify(res.data));
                            uni.setStorageSync('logined', 1);
                            that.$store.commit('SET_STATE', ['logined', true]);
                            that.$store.commit('SET_STATE', ['userInfo', res.data]);
                            uni.showToast({
                                title: '登陸成功',
                                duration: 2000
                            });
                            //登錄成功 跳轉(zhuǎn)到首頁(yè)
                            that.checkFirst()
                        }
                    });
                },
                fail() {
                    that.$refs.uToast.show({
                        title: '微信登錄失敗',
                        type: 'warning'
                    });
                }
            });
        },
        checkFirst(){
            this.$api.checkFirst({}).then(res=>{
                if(res.data == '1'){
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/login/begin'
                        });
                    }, 2000);
                }else{
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/index/index'
                        });
                    }, 2000);
                }
            })
        },
    }
};
</script>

來源：https://blog.csdn.net/weixin_40305713/article/details/115126662