小程序引导页开发

需求描述

1. 引导页以轮播图的形式展示，滑动图片，点击【立即体验】使用程序
2. 只在初次使用程序时才展示，之后不再展示

实现步骤

在pages.json添加一个新页面guide.vue

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/guide/guide",
      "style": {
        "navigationStyle": "custom"
      }
    },
		{
			"path": "pages/home/home",

在App.vue的onLaunch中判断进入哪个页面

缓存isFirst，代表是否看过引导页

• isFirst=true，表示已经看过引导页，进入首页-home页面
• isFirst=false，表示已经没过引导页，进入引导页-guide页面

onLaunch: function() {	
	let isFirst=this.$common.getFirstuse();
    if(isFirst){
        uni.switchTab({
          url: '/pages/home/home'
        });
    }else{
        uni.hideTabBar();
        uni.redirectTo({
          url: '/pages/guide/guide'
        });
    }
},

在guide.vue的点击【立即体验】时，设置缓存isFirst为true

<template>
  <swiper indicator-dots="true">
    <swiper-item v-for="(item,index) in imgs" :key="index">
      <image class="swiper-image" :src="item"></image>
      <button class="button-img" @click="start" v-if="index == (imgs.length - 1)">立即体验</button>
    </swiper-item>
  </swiper>
</template>

<script>
  export default {
    data() {
      return {
        imgs: [
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3488277290,2629434387&fm=173&app=25&f=JPEG?w=640&h=480&s=BDA4CB11840AD34D181ABDC10300F0BF",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2161074131,1615497748&fm=173&app=25&f=JPEG?w=640&h=480&s=ABCA27D3064052EC0EB1EF5403005072",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2724095192,3893371048&fm=173&app=25&f=JPEG?w=640&h=802&s=AD10A454EC57704D152A7B980300C09E",
        ],
      }
    },
    methods: {
      start() {
        this.$common.setFirstuse(true);
        uni.switchTab({
          url: '/pages/home/home'
        })
      },
    }
  }
</script>

<style scoped>
  swiper {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .swiper-image {
    height: 100%;
    width: 100%;
    opacity: 0.9;
  }

  .button-img {
    height: 40px;
    width: 120px;
    position: absolute;
    opacity: 0.6;
    left: 50%; 
    bottom: 5%; 
    transform: translate(-50%, -50%);
  }

</style>

微信、支付宝小程序和微信公众号均可使用