关于uniapp中动态设置启动页的方法

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

大家都知道hbuilder里面开发APP，启动页直接是可以设置的，但是很多小伙伴想要实现后台获取启动页，显示在APP端；如何实现这个功能呢？

接下来由我来详细介绍下实现方法：

1、新建一个index文件夹；里面新建一个vue文件，如pages/index/index.vue

这里默认我的APP主页是pages/home/index;

我们的原理是用户第一次进来先进入index/index.vue，判断是否有启动页缓存，如果有直接进入主页（pages/home/index）, 如果没有先读取服务器端启动页图片，一定时间后跳转到主页；

2、代码分析（index/index.vue）

<template>
    <view class="ydarea" :style="bgStyle">
        <view class="tg" @tap="goindex">跳过</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                qdimg: ''
            };
        },
        
        computed:{ //处理
            bgStyle:function (){
                return 'background-image:url('+this.qdimg+')'
            }
        },
        
        onShow: function () {
            console.info('Index--111---重新显示首页onSHOW, ------');
            var first = uni.getStorageSync('first');
            if(first){
                console.info('直接跳转到home首页');
                uni.switchTab({
                    url: '/pages/home/index'
                });
            } else {
                //uni.hideLoading();
                uni.setStorage({
                    key: 'first',//首次登录
                    data: 1,
                    success: function() {
                        console.log('首次登录缓存success');
                    }
                });
                
                console.info('查询启动页面');
                let url = 启动页获取远程地址;
                uni.request({
                    url: url,  
                    dataType: 'json',
                    data: {},  
                    success: (result) => { 
                        console.info('获取启动页图片');
                        console.info(result);
                        var data = result.data.data;  
                        console.info('img:'+data.qdimg);
                        this.qdimg = data.qdimg;
                        var timeoutID = setTimeout(function () {
                            console.info('关闭当前页面, 跳转到首页－－－－－');
                            uni.switchTab({
                                url: '/pages/home/index'
                            });
                        }, 5000);
                        this.timeoutID = timeoutID;
                    }  
                });  
            }
        },

        onLoad() {
            console.info('onload---------------------');
            console.info('URL=='+this.websiteUrl);
        },
        methods: {
            goindex(){
                //去掉setTimeout
                clearTimeout(this.timeoutID);
                console.info('取消定时器');
                console.info('启动页跳过到首页----');
                uni.switchTab({
                    url: '/pages/home/index'
                });
            }
        }
    }
</script>

<style lang="scss">
    .ydarea {
        width: 750upx;
        height: 100%;
        position: fixed;
        left:0px;
        top: 0px;
        z-index: 10000;
        background-position:center;
        background-repeat: no-repeat;
        background-size:cover;
    }
    .tg {
        background:#666;
        color: #fff;
        padding: 4px 15px;
        position: fixed;
        right: 30upx;
        top: 30px;
        z-index: 10001;
        border-radius: 15px;
    }
</style>

以上就是启动页部分的全部代码，大家可以根据这个进行优化；

如有不足请大家留言评论，一起交流成长；

技术员：冰心无痕-律动科技