uni-app引导页

第一步：建3个页面文件。在pages目录下，新建index/init.vue、index/guide.vue、index/home.vue。

1.对应pages.json

{
    "pages": [{
        "path": "pages/index/init",
        "style": {
            "navigationBarTitleText": "入口页"
        }
    }, {
        "path": "pages/index/guide",
        "style": {
            "navigationBarTitleText": "引导页",
            "titleNView": false,
            "app-plus": {
                "bounce": "none"
            }
        }
    }, {
        "path": "pages/index/home",
        "style": {
            "navigationBarTitleText": "首页",
            "navigationBarTextStyle": "black"
        }
    }]
}

注意排放顺序，init一定要第一个，作为入口页面。

2.init.vue

onLoad() {
  // 从本地缓存中同步获取指定 key 对应的内容，用于判断是否是第一次打开应用
  const value = uni.getStorageSync('launchFlag');
  if (value) {
    // 如何已经有，直接去home首页
    uni.navigateTo({
      url: '/pages/index/home'
    });
  } else {
    // 没有值，跳到引导页，并存储，下次打开就不会进去引导页
    uni.setStorage({
      key: 'launchFlag',
      data: true
    });
    uni.navigateTo({
      url: '/pages/index/guide'
    });
  }
}

注意：

 注意 switchTab 只能跳转到带有 tab 的页面，不能跳转到不带 tab 的页面跳转不带 tab 的页面是用 redirectTo 或者 navigateTo 我这里是因为跳转的不带 tab 的页面，但用的是 switchTab ，所以跳转报错

之前的代码：

wx.switchTab({
     url: `/${path}`
})

现在更改完的代码：

wx.navigateTo({
     url: `/${path}`
})

3.guide.vue页面就可以写引导页的内容了。

<template>
    <view id="guide">
        <swiper
      class="swiper"
      circular 
      :indicator-dots="true" 
      :current="tabIndex"
      @change="changeTab">
            <swiper-item
        class="item"
        v-for="(item, index) in guidelList" :key="index">
                <image :src="item.src" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

pages.json里面引导页去掉头部标题栏，同时设置样式使swiper全屏。

"titleNView": false,