一、开发思路

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

二、具体实现流程

1、新建一个启动页

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

我这里启动页就是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",})}},

3、引导页面的实现

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

welcome.wxml中

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

welcome.js中

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

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

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

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

微信小程序开发之开发引导页面相关推荐

上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
4.1【微信小程序全栈开发课程】个人中心（一）--页面样式、用户信息展示
第四章,我们来完善个人中心,主要操作是src/pages/me文件夹中的me.vue文件,先看看个人中心页面的效果: 1.将个人中心页面放在首页在讲解app.json文件时,提到过在pages数组中 ...
微信小程序公众号开发
微信小程序&公众号开发一.什么是微信开发二.微信开放平台三.微信公众平台四.小程序与公众号的区别 1. 用途不同 2. 运营方式不同 3. 操作方法不同 4. 用户体验不同(公众号操作 ...
微信小程序直播间开发抽红包功能
1.前言微信小程序直播间开发抽红包功能微信小程序直播是微信官方提供的商家经营工具,商家可通过在小程序内直播实现用户互动与商品销售的闭环,无需任何的跳转,提高下单转化率,直播更是成为链接商家和消费者 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
微信小程序——账号及开发工具
1. 注册微信小程序账号点击我进入微信公众平台进入后点击立即注册注册成功且登录后进入小程序管理后台 2. 安装开发者工具点击进入开发文档进入安装开发工具(稳定版本) 一路默认下一步进行安装 ...
为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
微信小程序应该这样开发
微信小程序应该这样开发帐号相关流程注册范围企业政府媒体其他组织(换句话讲就是不让个人开发者注册) 填写企业信息不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的 ...
微信小程序经典案例开发(微信开发)
课程介绍: 非常值得推荐的一套微信小程序开发视频教程,来自极客学院全套的微信实战开发程序,值得学习 -------------------课程目录------------------- ├<; ...

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