uniapp怎么设置桌面图标和启动页

1. uniapp介绍

uniapp是一个基于Vue.js框架的跨平台开发框架，使用uniapp可以开发手机端和Web应用，尤其是对于小程序开发非常友好。uniapp支持将同一份代码转换成微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序、H5、App等多个平台的代码，可以大大减少开发工作量。

uniapp的框架特点：

基于Vue.js框架，使用Vue.js语法进行开发

支持多端编译，开发一次，部署多端

支持原生能力开发和组件扩展

支持vuex、vue-router等Vue.js生态库的开发方式

本文将介绍uniapp如何设置桌面图标和启动页。

2. 设置桌面图标

在uniapp中设置桌面图标非常简单，只需要在manifest.json中添加下面的代码：

"icons": {

  "src": "/static/favicon.png",
  "sizes": "512x512",
  "type": "image/png"
}

其中，src属性指向图标的路径，sizes属性指定图标的大小，type属性指定图标的类型。

这里我们需要特别注意图标的路径。如果使用相对路径，要注意相对路径的基准路径是什么。在uniapp中，可以在App.vue的created钩子中使用uni.getSystemInfoSync()方法获取设备信息（详见uni.getSystemInfoSync()官方文档），然后根据设备信息来确定当前应用的基准路径。

2.1 实例代码

下面是一个示例代码，代码中使用了uni.getSystemInfoSync()方法来获取设备信息，并通过判断设备宽度来确定了当前应用的基准路径。

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['systemInfo'])
  },
  created () {
    if (!this.systemInfo) {
      this.$store.dispatch('getSystemInfo');
    }
  },
  computed: {
    baseSrc () {
      if (this.systemInfo && this.systemInfo.windowWidth > 750) {
        return '/';
      } else {
        return '/static/';
      }
    }
  },
  methods: {
    getFavicon () {
      return this.baseSrc + 'favicon.png';
    }
  }
}

3. 设置启动页

在uniapp中设置启动页也非常简单，只需要在manifest.json中添加下面的代码：

"splashscreen": {

  "image": "/static/splash.png",
  "backgroundColor": "#FFFFFF"
}

其中，image属性指向启动页的图片路径，backgroundColor属性指定了启动页的背景颜色。

3.1 实例代码

下面是一个示例代码，代码中使用了uni.showNavigationBarLoading()方法来显示导航栏加载提示框（详见uni.showNavigationBarLoading()官方文档），并在onLoad钩子中执行加载启动页图片，在图片加载完成后再隐藏导航栏加载提示框。

export default {

  data () {
    return {
      showLoading: true
    }
  },
  onLoad: function () {
    let that = this;
    uni.showNavigationBarLoading();
    uni.getImageInfo({
      src: '/static/splash.png',
      success: function (res) {
        that.showLoading = false;
        uni.hideNavigationBarLoading();
      }
    })
  }
}

需要注意的是，在uniapp中，启动页的大小需要和设备的屏幕大小一致。所以在设置启动页图片的时候，需要选择适当的图片大小来保证适配各种设备。

4. 结束语

uniapp是一个强大的跨平台开发框架，它可以帮助开发者快速地开发出能够在多个平台上运行的应用，极大地简化了开发工作。在本文中，我们介绍了如何在uniapp中设置桌面图标和启动页，希望对您有所帮助。