uniapp 微信小程序启动页

<script>
    export default {
        onLaunch: function(options) {
            console.log('App Launch');

            this.handleToStartPage(options);
        },
        onShow: function() {
            console.log('App Show');
        },
        onHide: function() {
            console.log('App Hide');
        },
        methods: {
            // 跳转启动页
            handleToStartPage(options) {
                // 如果本地缓存有令牌就不跳转
                if (uni.getStorageSync('token')) return;

                // 跳转前先缓存下启动数据
                uni.setStorageSync('start_data', options);
                // options = {
                //     path: "pages/index/index"
                //     query: {}
                //     referrerInfo: {}
                //     scene: 1001
                //     shareTicket: undefined,
                // };

                // 跳转
                return uni.reLaunch({
                    url: '/pages/index/start',
                });
            },
        },
    }
</script>

<template>
    <view class="container">
        <view class="action">
            <button type="default" open-type="getUserInfo" plain @getuserinfo="handleGetUserInfo">
                <view class="icon">
                    <image src="https://i.loli.net/2021/01/23/yf3ZFkCsQLMulcE.png" mode="heightFix"></image>
                </view>
                <view class="name">微信登陆</view>
            </button>

            <view class="other" @click="handleTo">去逛逛</view>
        </view>
    </view>
</template>

<script>
    export default {
        onShow () {
            // 隐藏返回首页按钮
            uni.hideHomeButton();
        },
        methods: {
            // 授权用户信息回调处理
            handleGetUserInfo({
                detail
            }) {
                if (!detail.hasOwnProperty('encryptedData')) {
                    return uni.showToast({
                        title: '拒绝授权',
                        icon: 'none',
                    });
                }

                uni.setStorageSync('username', detail.userInfo.nickName);

                // 调用接口上传数据

                // const self = this;
                // uni.request({
                //     url: 'login',
                //     success: function() {
                //         self.handleTo();
                //     },
                // });

                this.handleTo();
            },
            // 离开跳转处理
            handleTo () {
                // 获取进入启动页之前传递的数据
                const data = uni.getStorageSync('start_data') || {};

                uni.removeStorageSync('start_data');

                // if(!uni.getStorageSync('username').length) {
                //     this.$store.commit('set_has_login', false);
                // }

                // 不存在跳转指定路径就默认跳首页
                if (!data.hasOwnProperty('path') || !data.path) {
                    return uni.switchTab({
                        url: '/pages/index/index',
                    });
                }

                const tabbar = [
                    'pages/index/index',
                    'pages/personal/index'
                ];

                //  跳转是 tabbar 页则不能传递参数
                if (tabbar.includes(data.path)) {
                    return uni.reLaunch({
                        url: '/' + data.path,
                    });
                }

                return uni.reLaunch({
                    url: '/' + data.path + '?' + this.handleEncodeSearchParams(data.query),
                });
            },
            // 参数拼接
            // https://www.cnblogs.com/kbinblog/p/11557741.html
            handleEncodeSearchParams (obj) {
                const params = [];
                Object.keys(obj).forEach((key) => {
                    let value = obj[key];
                    // 如果值为undefined置空
                    if (typeof value === 'undefined') {
                        value = '';
                    }
                    //使用encodeURIComponent进行编码
                    if (Array.isArray(obj[key])) { //类型为数组的时候
                        value.forEach(item => {
                            params.push([key, encodeURIComponent(item)].join('='));
                        });
                    }
                    if (Object.prototype.toString.call(obj[key]) === '[object Object]') { //类型为对象的时候
                        Object.keys(obj[key]).forEach(item => {
                            params.push([key, encodeURIComponent(obj[key][item])].join('='));
                        })
                    } else {
                        params.push([key, encodeURIComponent(value)].join('='));
                    }
                });
                return params.join('&');
            },
        },
    }
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        padding-bottom: calc(64px);
        padding-bottom: calc(64px + constant(safe-area-inset-bottom));
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        background-size: cover;
        background-image: url('https://i.loli.net/2021/01/23/oRxZiP9d6ebwVar.png');
    }

    .action {
        width: 100%;

        >.other {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            margin-top: 12px;
            text-align: center;
        }
    }

    button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 47px;
        line-height: 47px;
        border: none;
        border-radius: 24px;
        background-color: #fff !important;

        >.icon {
            display: flex;
            align-items: center;
            margin-right: 12px;
            font-size: 0;

            image {
                height: 20px;
            }
        }

        >.name {
            color: #38674D;
            font-size: 14px;
            font-weight: 500;
        }
    }
</style>