微信小程序开发之开发引导页面

一时失言乱红尘 2022-01-31 09:51 1200阅读 0赞

# 一、开发思路 #

做过app开发的都知道引导页面需要使用本地存储、第一次用户安装的用户点击进入首页的时候会进行一个数据的存储，那么微信小程序思路是一样的，你可以设置一个启动页每次小程序打开的时候都会去加载这个启动页面，可以在启动的时候校验存储的数据、如果存储了数据就表示不需要再次打开引导页面，直接进入首页。

# 二、具体实现流程 #

### 1、新建一个启动页 ###

在app.json中新增一个启动页面保存后在pages下生成对应文件夹和文件

![20190516123706457.png][]

我这里启动页就是white页面

这个页面可以是个白板也可以是加载动画或者欢迎类似的东西

### 2、设置启动跳转代码 ###

在界面加载的时候检测本地存储中的数据

使用wx.setStorageSync('welcome',true);进行存储

使用wx.getStorageSync('welcome');进行获取存储数据

/**
       * 生命周期函数--监听页面加载
       */
      onLoad: function() {
        const welecome = wx.getStorageSync('welcome');
        if (welecome) {
          console.log(welecome);
          wx.redirectTo({
            url: "../index/index",
          })
        } else {
          wx.navigateTo({
            url: "../welcome/welcome",
          })
        }
       
      },

![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]

## 3、引导页面的实现 ##

新建welcome界面、在界面中放一个点击跳转的Button

welcome.wxml中

<view class='journey-container' bindtap='onBindTap'>
        <text class='journey'>开启就业之旅</text>
      </view>

![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]

welcome.js中

/**
    
    * 点击开启就业之旅
    
    */
    
    onBindTap: function() {
    
    wx.setStorageSync('welcome',true);
    
    wx.navigateTo({
    
    url: '../index/index',
    
    })
    
    },

![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]

上述内容中就看到了保存数据的时候。

以上就是小程序中实现引导页面的实现思路。

还有一种方式是在app.js的onLaunch中实现、但是有个问题是onLaunch会出现、界面先展示再跳转的问题

[20190516123706457.png]: /images/20220131/c2f2085961bc4467b44337ad513dd28a.png
[wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]: