uni-app实战仿微信app开发

Uni-App 引导页，引导页很多都是安装app，第一次打开才会显示，后面打开都不会出现。大多显示内容是，告诉用户如何操作，或者核心介绍app作用等。

下面我们就来实现一个超级简单的Uni App引导页。uni-app实战仿微信app开发

Uni-App 简单引导页示例

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

对应：

{
    "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一定要第一个，作为入口页面。

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

然后我们页面就可以写引导页的内容了。

<template>
    <view >
        <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="" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

假设我们引导页时一个swiper轮播试的方式

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

"titleNView": false,

现在很多app，都加了广告视频，作为app引导页，Uni-APP如何实现了，其实和上面swiper一样，但是还是有很多需要注意的地方。