uniapp开发App引导页

App的引导页是当用户第一次打开一款App时所展示的3-5精美的图片，用于告知用户产品的功能及特点。好的引导页会促使用户对产品增加更多的兴趣，当然这是UI设计的能力体现了，尽管很多人都会快速的滑过。对于开发人员怎么去添加这几张图片只有在用户第一次打开app时展示呢。

以uniapp开发的项目为例：在onLaunch函数中，检查flag是否为false，如果为false,则跳转到引导页面，在引导页中可设置跳转到首页。注意，最好用reLaunch，避免，用户物理按键返回；为true，则存储flag到本地。原理既是如此；但是实际开发时，会发现，存在闪屏现象，这样用户的体验就不太好，所以比较关键的地方就在于这块，还是以uniapp为例，需要在uniapp的源码视图下将splashscreen的设置进行修改，将autoclose改为false，在onLaunch中通过设置延迟时间调用plus.navigator.closeSplashscreen方法来关闭启动图。delay设置为0。这样启动图的设置就ok了。

以下封装了检查是否进入引导页的方法，仅供参考下：

Tip:在多次的应用中发现，如果在手机本身比较卡的情况下，用户在第一次开启app时，还是会存在首页在引导页之前出现，这种情况的处理方式是将引导页默认设置为主页，即在路由管理中，将引导页写在第一个，然后通过flag去判断是否跳转到首页；

以上的引导页开发只是提供一种思路，还有很多其他的方式，比如后端去控制是否展示引导页，引导页的动态变化。当然问题本身不难实现，关键在于实际应用时所存在的问题。

1. 请问首页标头图片怎么更换

更换整体页面背景的源代码： body {b （博客整体页面背景图片） repeat scroll!important；} 更换页面题图logo图片的源代码： 。

logo {b （博客最上方题图logo图片） no repeat no scroll!mportant；} 更换页面横幅题图的源代码： 。 banner {b （横幅题图大图） no repeat no scroll!mportant；} 更换页面横幅题图下面的菜单图片的源代码： 。

menu{ b （"题图下的长条菜单图片"） no- repeat center；} 更换页面文章标题栏上翻时的图片的源代码： 。 feeds 。

up{ b （"文章标题栏上翻时的图片"） no- repeat center；} 更换页面文章标题栏下翻时的图片的源代码： 。 wn{b （"文章标题栏下翻时的图片"） no- repeat center；} 更换页面文章结尾处评论阅读菜单栏的图片的源代码： 。

feeds 。function{ b （"文章结尾处评论阅读菜单栏的图片"） no- repeat right；} 更换页面空白面板标题栏上翻时图片的源代码： 。

links 。up{ b （"空白面板标题栏上翻时图片"）；} 更换页面空白面板标题栏下翻时图片的源代码： 。

wn{b （空白面板标题栏下翻时的图片）；} 更换页面空白面板的背景图片的源代码： 。links 。

mid{ b （空白面板的背景图片）；} 更换页面形象照片处的背景图片的源代码： 。photo 。

mid{ b （形象照片处的背景图片）；} 更换页面自定义空白面板背景图片的源代码： 。 label 。

mid{ b （自定义空白面板的背景图片）；} 更换页面日历面板的背景图片的源代码： 。calendar 。

mid{ b （"日历面板的背景图片"）；} 更换页面公告栏标题栏上翻时图片的源代码： 。callboard 。

up{ b （"公告栏标题栏上翻时图片"）；} 更换页面公告栏标题栏下翻时图片的源代码： 。 wn{b （"公告栏标题栏下翻时图片"）；} 更换页面公告栏的背景图片的源代码： 。

callboard 。mid{ b （"公告栏的背景图片"）；} 更换页面正文背景图片的源代码： 。

bodyBg{ b （"正文背景图片"）；} 更换页面正文背景图片的源代码： 。bodyBottom{ b （"正文背景图片"）；} 更换页面正文文章页数图片的源代码： 。

ge{b （"正文文章页数图片"） no-repeat center；} 更换页面留言板标题栏上翻时的图片的源代码： 。 gbook 。

up{ b （'留言板标题栏上翻时的图片'） no-repeat；} 更换页面留言板标题栏下翻时的图片的源代码： 。 wn{b （'留言板标题栏下翻时的图片'） no-repeat；} 添加方法： 第一步、登录新浪博客，输入“登录名”“密码”和“验证码”后点击“登录”。

登录新浪博客 第二步、点击进入主页上方的“控制面板”。 进入“控制面板” 第三步、进入“个人首页维护”。

进入“个人首页维护” 第四步、进入“自定义空白模板”。 进入“自定义空白模板” 第五步、点击“新增”新增一个空白面板。

新增一个空白面板 第六步、在“面板标题”写好面板的名称，勾选面板下方的“显示源代码”勾选框，此处注意一定要勾选，否则将不能成功。将以下代码贴入文本框中，点击“保存”。

贴入代码，点击“保存” 系统提示添加成功，点击“确认” 第七步、点击“控制面板”左侧“BLOG信息设置”中的“定制我的首页”。 点击“定制我的首页” 第八步、点击“添加模块”。

点击“添加模块” 第九步、勾选刚刚建立好的面板，点击下方的“选取”。 第十步、刚刚建好的显示对联面板出现，点击“保存设置”。

2. 怎么修改标头图片

更换题图图片 body {b （背景图片） repeat scroll!important} .logo {b （题图上） no repeat no scroll!mportant} .banner {b （题图下） no repeat no scroll!mportant} 1、登录博客 2、打开控制面板 3、点开“个人首页维护”里的“定制首页的内容板块” 4、点击“添加模块” 5、在“自定义空白面板”中点开“创建新的空白面板” 6、输入“面板标题”——** 7、将“显示源代码”前的方框点一下 8、上面的空白处即出现“” 9，在 间写几个字，什么都可以 10，复制上面的代码，把红色的地方换成你图片的网址，必须是发布到网上的。

图片大小你自己把你博客上的复制到电脑里看看就知道多大了。

---