关于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）

             跳过     

    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'                 });             }         }     }

    .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;     }

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

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

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