uniapp开发微信小程序登录机制

首先我们要进行接口封装

//设置基地址
const BASEURL = "填入你的基地址"
//封装一个请求,路径,方法,参数,请求状态
const query = ({ url = "", method = "GET", data = {}, tisName = "加载中..." }) => {
    //请求头携带token
    const header = {
        token: ""
    }
    //判断是否拿到token,如果拿到就给
    if (uni.getStorageSync("token")) {
        header.token = uni.getStorageSync("token")
    }
    //加载动画
    uni.showLoading({
        title: tisName, //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
    });
    //返回一个promise对象
    return new Promise((resolve, reject) => {
        uni.request({
            url: `${BASEURL}${url}`, //仅为示例，并非真实接口地址。
            method,//传入方法
            data,//传入参数
            header,//请求头
            //成功回调
            success: (res) => {
                resolve(res)
            },
            //失败回调
            fail: (res) => {
                reject(res)
            },
            //无论成功和失败都执行结束加载动画
            complete: (res) => {
                uni.hideLoading()
            }
        });
    })
}
//暴露出去
export default query

获取微信小程序用户code

export default {
    //小程序启动执行
    onLaunch: function() {
        // console.log('App Launch');
        //启动执行拿到该用户code
        uni.login({
          provider: 'weixin',
          success: function (res) {
            console.log(res)
          }
        });
    }
};

code.png

拿到code之后去获取用户openid

拿到openid之后去获取用户个人信息和token,用token去请求数据,渲染数据

<script>
    import query from '@/utils/query.js'
export default {
    //小程序启动执行
    onLaunch: function() {
        // console.log('App Launch');
        //启动执行拿到该用户code
        uni.login({
          provider: 'weixin',
          success: function (res) {
            console.log(res)
            //调用后端获取openid接口
            query({
                url:"接口",
                method:"post",
                data:{
                    code:res.code
                }
            }).then(res=>{
                console.log(res)
                //拿到openid之后,用openid去拿到token与用户个人信息
                //调用后端三合一接口
                query({
                    url:"接口",
                    method:"post",
                    data:{
                        openid:res.openid
                    }
                }).then(res=>{
                    console.log(res)
                    //拿到res里面的token用户信息
                    //保存token到本地
                    uni.setStorageSync('token',res.token)
                    //保存到vuex
                    this.$store.state.token=res.token
                    //拿到用户个人信息
                    this.$store.state.userInfo=res.data
                })
            })
          }
        });
    }
};
</script>

用户登录授权

<template>
    <view>
        <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">获取用户信息</button>
        <view>{{ userInfo.nickName }}</view>
    </view>
</template>
 
<script>
var rawData, _that;
export default {
    data() {
        return {
            title: 'Hello',
            userInfo: []
        };
    },
    onLoad() {
        _that = this;
    },
    methods: {
        onGotUserInfo: function(e) {
            console.log('aaaaa', e);
            rawData = e.detail.rawData;
            if (e.detail.iv) {
                _that.userInfo = e.detail.userInfo;
                uni.login({
                    provider: 'weixin',
                    success: function(loginRes) {
                        console.log(loginRes);
                        // console.log(rawData)
                        uni.request({
                            url: 'http://localhost/myUniApp/php/login.php', //仅为示例，并非真实接口地址。
                            data: {
                                rawData: rawData,
                                code: loginRes.code
                            },
                            header: {
                                'custom-header': 'hello' //自定义请求头信息
                            },
                            success: res => {
                                console.log('返回', res.data);
                            }
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '用户拒绝授权',
                    icon: 'none'
                });
            }
        }
    }
};
</script>