霍常亮淘宝客app开发系列视频课程第31节：小程序顶部导航效果原创

啊，那我们你看现在真的是丑的不能再丑了，这个就是我们在H5中调试的非常OK的，对吧，咱们在H5中就是在。网页时或者在APP中看上去都已经完美无缺了，但是呢，我们在小程序里面，因为它顶部有一个状态条对吧，就是这个什么电量啊，时间的有一个这个东西，所以说我们。显得就非常不美观了。那么我们想要。让它变得美观对吧，咱们就需要把它往下挪一点对吧，把这个状态条的位置给它留出来不就好了吗？对不对。那么我们在这里可以放一个占位符啊，有一个站位符呢，把它往下挤一挤，看看行不行。在这边对吧。我们挪到这边。

那么我们来看一下整个模板里面，下边的是咱们的文字。然后呢，上面的这些就是咱们的添加的这个。啊，说好框。对不对。我们想要把它往下挤一挤，可以再建立一个六。我们在这啊，来建立一个。UY。这里呢，因为咱们只要一个占位符，就是只要一个高，所以咱们就不整class了，写class的话太麻烦，还要往下面写，那咱们直接。好。高呢可以给一个，比如说20，咱们先试试，不一定可以到时候再调。然后我们保存一下。哎，那我们保存之后你会发现，诶好像没什么区别对吧，没什么变化。

为什么？因为我们对它里边就已经有了一个关于高的。限制。对不对，我们往下倒一倒。对吧，只有一个高四15，那我们暂时把它先屏蔽掉，然后我们再来保存一下。跟刚才相比已经发生了变化，但是好像变得更丑了，对不对？那我们还得接着调。那咱们呢，在这。再建一个。后呢，咱们把下面的这个搜索框啊。给它装在这个块里。之后我们再保存看一下效果。对吧，现在呢，比刚才要好看一点了，对不对，至少说。

这个位置好看一点了，但是豆浆机啊，这个搜索框呢，还是需要进行进一步的调整。我们在这里给它复制一个类名啊，起个类名。就是这个的内容。这个肯定也是新的，下面应该没有重名的吧，啊没有，因为你看这只有一个绿色点说明没有重名的，那么我们就需要对它进行一个class的描述啊，就是这class都有什么特点啊，搞框呀之类的，对吧，点击一下保存。对吧，那么我们这里咱们给它装在了一个content里边，那么下面呢，我们也得调整一下。

啊，前面也有一个点点是class。警示ID，然后我们来个推车之后呢，你得把下面这些东西得给它装进来啊。这个是一个文字的，这个是图标的，这个是整体的。这样我们好像看着行有点乱，我们格式化一下。啊，这样看着就舒坦对吧。这个是图标的，这个是文字的。它对应它，它对应它，它对应啊，那么这里就是我们。

整体的是关于这个图标加文字的，我们把它装到这里面，然后我们再保存开始效果。装完之后呢，我发现诶好像变化还是不大。啊，咱们下面再检查一下对吧，把它装在了它的里边，那么它原先对应的class也得放在它的里边。之后咱们把这边隐藏的这个高。就可以放在下面了。对吧。喷的，咱们现在要这个高。现在肯定是。没有人取消一下再报。对吧，现在这个高可以了。高已经出来了，咱们改成45。还有就是这个，因为之前呢，它是相当于是最外层的元素，然后我们现在呢，多加了一个，我们把它也放出来。高的下面。

然后再报。现在变化还不大。然后我们上面的这些啊，我看一下。这两个也可以拿下来。然后还有这个盒子。好，我们再保存一下。诶，现在呢，咱们看着好像就比刚才要舒坦一点了，对吧。这个。这个是居中啊。好，我们现在呢，看起来要比刚才的好看一点了，刚才咱们操作呢，就相当于是调整了一下相关的类啊，就是把那些never fast里边的部分内容，然后放到了content里面。

好的，然后我们再来看一下我们的不同的设备，它可能显示的效果也不一样啊，比如说我们调一下机型。IPhone叉。这个时候好像看着就不那么好看了吧，然后再换一个。这个就更不说更不好看了啊，那么我们现在想要表示的就是说。你在不同的设备，它这里的这个高度可能是不一样的。

对吧，这个咱们先不管它，这个报错先暂时不管，那么我们没有办法说要求用户啊，你必须用，比如说IPHONE5必须用IPHONE6不行，那么我们就需要对不同的设备都要实现一个兼容，对吧，那么我们。所说的说不同的设备状态条的高度不要在咱们代码里面体现在哪里，就是它就是这个20。对不对啊，你你你可以对比几个看一下，这里是IPHONE5，它是这么搞。然后呢，找一个IPHONE678对吧，明显好像就变高一点了。IPhone叉。这里呢，就变得更高了，对不对，这明显就变高了，所以说呢，我们要根据不同的机型进行对应的一个调整，那么这个时候也就相当于是这个20，它不是一个固定的，它这是一个变化，根据不同的机型，这里显示不同的高度，对吧？那么就出现一个新的问题了，就是我们如何获取到。

用户。手机的。状态条的高度。那么这个时候我们试想一下，你想要获取用户的呃，状态条的高度，那么我们就要等他。进入了加载这个状态，对不对，那我们在这里。是里面可以写一下。那么这个呢，就是说用户诶开始加载了，那么我们就可以获取到它顶部的这个位置啊，就跟那个。啊，我们APP里面是同样的意思啊，这就一个生命周期啊，只不过呢，在这我们是为了获取它的这个状态条啊，这个高度。

在这里我们要做的什么？获取。手机的系统信息。通过API获取啊，我们之前课上讲过API对吧，也带着大家看过。那么如果忘了没关系，咱们可以再复习一下。我们打开啊，给大家准备的幻灯片的资料啊。第二章啊，如何获取用户手机高度得得得，那么在这里呢，有一个API，我们把它这个链接啊，我们复制下来。然后啊，在这粘贴打开。这个时候呢，我们就可以在左边找到关于一个设备啊，设备信息的。一个API的相关的介绍页面对吧。那么我们就可以直接用它做一个调用。

Sister对吧。点。Get。System，找找有没有？好，这里呢，还有一个对吧，我们再仔细看一下，在这边这两个呢，都是获取信息，然后呢，区别就是它是同步。他是。啊，他就是获取信获取系统信息，然后下面呢，这个是获取系统信息同步接口啊，说是有点绕嘴，就是说我们现在需要调用的是这个接口啊，我把它也写下来了。

对吧，啊这个接口，所以说我们在这边。应该使用的是音。他。同步获取系统信息。之后在这里边儿我们就能够获取到信息了，然后无外乎就是成功失败呀之类的那几个可能。可能性对吧。然后我们看它的返回，返回里面应该有很多肯定，其中就包括我们想要的这个高度，导航的高度。这样啊，我们。我这样。我们给它整体都输出一下。咱们给他赋个值。

然后名字。随便起一个吧。之后呢，我们现在呢，就能够获取到这个值，这个值我们把它的内容赋值给了引后，我们可以把以后进行一个输出。获取的手机信息。设备信息。这个词高大上一点。设备。太快了。信息。

然后，嗯。好的，我们现在保存一下。嗯，有个报错老生常谈了，一有这种报错，十之八九是少了个逗号。我们看一下第。A26行，26行这里啊，应该这少了一个逗号。好，我们现在再保存一下。这个时候就没有问题了，对吧，然后呢，我们在。小程序里面啊，我们来看一下它的输出。这边我们清空一下。

好，我们现在呢，应该就可以获取到了，对吧，获取设备信息，获取设备信息，那我们找到这几个字，那我们往下看啊，现在呢，它展示的就是我的这个设备的信息。啊，IPHONE5是因为我们这边选的是IPHONE5对不对。然后。我们要找的是高度啊，导航的就是这个这个状态条的高度。啊，像我们上面这些是SDK的版本，这iPhone设备的型号高度高度高度高度。导航栏的高度，眼神还不太好使。啊，这里对吧。状态，状态条高度20对不对，那恰好。

在这里就是20，那我们如果说换一个设备，我感觉换一个设备应该就不是20。这个也是20吗？我们再换一个。啊，还是20。啊，我知道了，因为我们现在是写死的啊，对对吧，因为我们现在这里是写死的，所以说这这肯定显示的是20，但是呢，我们真正说投出投入用户市场，投入使用的时候，那用户的手机型号不一样，这里的状态条就是实际对应的状态条也是会变化的啊这里是20是因为我们这块是写死的，但是你实际用户使用的时候，它的状态条是会变的。

我们需要赋值一些变量对吧，先定一个变量名啊，咱们可以写在这里。呃，咱们看一下啊，这边。设备信息里边，咱们要找的这个词叫做他对吧，咱们扣一下。之后把它给写在这。默认值可以是多少？可以是20。对吧，默认值可以是20，那么我们把它写在这行不行。

格式肯定是不行的，对吧。对吧，不是放在这儿。那么我们要替换的是这个20是不是？那我们直接把它放在这行不行，肯定不行，要不然的话，人家会直接当成一个单词，那我们直接放后面加上一个P叉呢，那也不行，对吧，你后面这个P叉它是一个字符串，所以说呢，我们需要用一个引号把它引起的。对不对，那到这里三太可以了，还是不可以，为什么你既然说把它当成是一个动态的，那你前边就得有一个冒号，没有冒号它就会当成是一个静态啊，现在就不会认为你是变化。这样的话就可以了，然后我们现在再保存。好，我们现在保存之后，诶，你会发现，呃，默认这里是20，但是呢，它这里还是出现了异常。

我们再来检查一下。那么我们来检查一下啊，这个代码之中，对吧，你要这样写的话，第一个错误，第一个错误。我们那已经有一个双引号了，这里面呢，你就不能再用双引了，你得改成这。啊，然后啊，后面这个冒号就没有用了啊，这个三号就没有用了。之后我们再来帮我们看一下效果。得这么一整的话，啥都不出来了，还不如刚才的，为什么？因为我们把它当成一个变量，你得用一个大括号给它括起来。然后我们再来保存一下。诶，你会发现他还没有出来，为什么。

因为我多了一个括号，我们把它删除掉。这个时候就已经可以了啊，那么我们刚刚所折腾来折腾去，其实就是把这个我们写死的这个20给他更改为根据不同的设备来获取这个高度，对吧。那么它相当于它前面有一个冒号，然后还有一个大括号，比如这里面含有动态的变量，那这个变量呢？初始值在return里面有一个初始值，初始值是20，然后具体说是多少，在它加载的时候，你能够通过这个API获取到它的。音，然后我们在音里面。能够获取到具体的这个状态交流值，那我们现在还得写一下它的后半部分。

那么我们怎么负这个值呢？啊，直接来一个回车之后。啊，就是正。他的。我们要的什么，咱们这个变量是什么啊。对吧，来这里这指的就是这个date里面，这个date里面，这里面的所有的东西都可以用date点点出来，然后。它的值等于什么？是我们前面的这个东西，这个东西呢就等于info，而info它指的是什么？是这些对吧。这些所有的，而我们所需要的。只是里面的一个。里面的一个。啊，对吧，一个状态还是高度，我们不需要所有啊，那现在我们大家保存一下。

对吧，那么到这我们就已经成功的说获取到了这个状态条的一个高度，然后把它和咱们的机型相结合，不同的机型会有不同的状态栏的一个高度啊，就是这样的一个功能。就目前来说呢，咱们还没有对不同的平台不同的端进行区分，对吧，我们现在呢，在小程序里面啊，它这个高度是已经正常的，屏幕状态条是正常的了，然后呢，我们再看这边的H5啊，也就是APP里面也是正常的，对不对。因为我们现在它是根据一个动态的。激情来获取的状态条。那我们这边为什么没有，因为这边的状态它就是零。明白吗？咱们在这边。看一下我把它拉大一点。

也会有一个获取设备信息，因为咱们这个已经日志打印出来了，那么甭管是小程序还是说这个H5都会打移，这个时候我们来看一下它为什么没有往下移。没有站位，因为你看这辆车的状态，它本身就是零对不对。它本身就是零，所以说在这边它其实也下移了，只不过下移的高度是是多少，是零啊是零明白了吧。好的，那么我们继续往下讲，你。根据API获取到了顶部的状态条的高度啊，因为我们之前所说的，你不同的机型状态条不一样，那么除了状态条以外啊，你会发现在这个位置对吧，就是这个啊，我们管它叫叫叫胶囊啊，就是这三个点和这个这个圈，它的位置也会受到机型的影响，不同的机型这个东西的位置可能也会变化，对吧，那么我们接下来呢，就需要接着调整它。

不过好看咱们讲到这里呢，已经。有重复的内容吗？什么重复内容，就是说咱们关于这个设备信息。这个API我们讲完之后，你再调用它的时候，调用这个API的时候，也能够以同样的思路获取到它的这个位置。好的，呃，那么我们。在这加个分号下面。下面是获取小程序的。胶囊的。信息。然后呢，也需要调到一个API。用你。点二。

应该是他吧，第一个吧。获取小程序下菜单按钮布局位置信息，应该就是挺长的啊。

啊，那么我们获取到这些胶囊的信息之后，然后我们再想算这个。高度啊，就这个状态条这个高度啊，不是就状态条下面的这一部分的高度，那就简单了，对吧，这不就是小学的加减法吗。那么我们怎么算呢？下边的这个高度。下边的高度就是它。点。能不能？这个高度。对吧，就是这。看好鼠标从这到这，然后再减去一个。

状态条的高度状态条。之后。我们再加上一个。这个按钮。加一个括号。顶部。顶部的高度。减去。状态小组。之后我们把它整体进行一个赋值。

这个是什么？是导航条的高度。之后啊，咱们把它输出一下。

好的保存。啊，又一个报错，看看又哪少了个逗号是不是？四这里。语法错误。没打错吧？

它的底部。它的底减去导航加上。他的。顶减去点应该没问题啊。孩子。一个输出。为什么会有一个语法错误呢？逗号逗号我都加了呀。上面吗？

哎，呼呼了。人家这边是。一个大括号啊，这里到这里是一个大括号啊，我们这个日志输出的位置错了。我们应该放在这里，这样应该就可以了。对吧。这样的话啊，我们可以看一下咱们要输出的这个高度。应该是40，应该是这个数对吧。我们再加一个中加一个信息。导航条的高度。越着急越出错，现在保存一下对吧，导航条的高度40，然后有了它之后。

我们把上面那个导航条对吧，咱们一开始给的写的是45吧，好像是。对吧，那我们需要把这个45改成40啊。

那我们现在找到上面的导航条，导航条是这对吧。那我们在这里。加上一个。高度对吧，我们如果说直接写一个40，那不就等于写死了吗？对不对，我们直接写个40，这就等于死了。

对不对，那么我们。要模仿上面的这种方式，咱们对它进行一个替换。是不是？在这里。加上一个冒号。然后。这里。散，我们直接把拷起来。高度。是什么？是我们在下面给它定义的这个信息。对吧。哎，我们这好像是给多删了一个。

多了一个号。好，我们现在再保存一下。OK，然后我们现在再看呢，是不是比刚才要好看一点了。对吧。然后呢，咱们到这呢还没完对吧，你看我们在APP中这边是没有问题的，但是在这头呢，他还是。挡着了，我们想要把这个框给它往左边移一点，就说这个呃，宽度让它缩小一点，这个怎么着。那么这种怎么办，其实也好算，对不对，我们都知道了，这个按钮的左边对吧，按钮左边你看。下面。LIFE226对吧，我们都知道了，从这到这这段距离，那么我们只需要把它设置到226。不就可以了吗？对不对，那么我们所需要获取到的就是一个life，我们继续在这边。

咱们也整一个。变量啊。这里我们可以给一个初始值啊，随便给一段，比如说300，反正他也没有实际用处，因为我们马上就会给它一个呃变量一个替换对吧。然后。点一下保存。啊，在这没有影响对吧，我们要的是这个。

求的是它之后呢，咱们在下面就可以给他一个赋值点看S。应该他们出了一个W出来吧。对吧，这是咱们刚才整的值，然后等于。就是这个左边对不对。我们这个左边胶囊的信息。好，我们现在再保存一下啊，现在呢，因为还是没有对这个变量在实际使用中进行一个嵌套啊，进行一个调用，所以说目前呢还是没有作用的。好，那我们获得到了这个导航栏的宽度，对不对，那我们把它放在宽度的对应的位置，咱们之前呢。对这个导航栏已经有了一个这种这个高度的限制，那我们现在再给它加一个宽度的限制。

我直接把这块注意。然后把它。替换成我们刚刚获取到的。调到这个变量。好，我们再保存一下。这个时候你会发现他呢，已经。往左边移动了一点，对吧，就是这个，呃，横向的宽已经降低了，那降低了多少呢？我们在这里就能够看到，咱们再捋一下这个逻辑。这里的这个宽度我们给他一个初始是300，但实际上没有用，因为我们只要一加载就能够获取到它的这个屏幕的信息，我们所要的就是这个胶囊的左边啊，那么它的宽度就等于是胶囊的左边啊，现在我们看起来呢，就算是比较OK的了啊。

然后呢？我们来看一下啊，它的顶部对吧，我们这里显示的字体呢，是黑色，但是有的时候我们觉得诶好像白色更适合，那我们能不能调整对吧，也不贵。我们再配置。你。对吧。加上一个。字体字体颜色。然后我们改成。

改成白色啊，然后我们现在看一下啊，看一下。对吧，这里呢，就变成白色了啊，当然说白色跟黑色，其实我觉得就是看个人的一个习惯啊，不能说白色一定比黑色好，看你个人的一个习惯。好的，那么我们在这边啊，已经搞定了，OK了，但是我们拉回来拉到这头这个时候。我们刷新一下。在H5里面，你会发现它现在会有报错。为什么？因为我们在。微信这边所调用的。某一个API在H5里面没有。对不对，那么这个时候我们就需要怎么样。

对。整段代码进行一个条件编译，咱们之前也讲什么叫条件编译，就是说有些API呢是通用的，所有的平台都可以。但有些API它只有在小程序里面才有，对，你想一下人家调用这个。按钮。我们在获取按钮。哪去了？对吧，我们在获取这个胶囊的信息，那你只有小程序才有这个胶囊，对不对，那我们H15里面它就根本就没有胶囊，所以说像这种情况，那肯定是H5里面会报错的。明白吗？那么我们是不是就需要对它进行一个条件编译？什么叫条件编译？就是说某些情况我们只在小程序里面运行，然后某些情况只在H5里面运行，就是这个意思，就是要调节变异。那我们在下面就可以把下面这对对吧，咱们给他。

仅在微信小程序里面运行，那么我们怎么写？人家直接死了。那么这个呢，是一个取散的意思，就是说我们下面所写的这些是没有的。比如说是五，再比如说。再比如说。你在微信里面调用的，在淘宝里面也是啊阿底，那么我们把它给它关上，那有开头有结尾对不对，要不然呢，人知道你这堆是到哪结束，那我们再下面再加上一个件。行。And。好，我们现在再保存一下。然后啊，我们看这边没有了，那就说明咱们这个条件编译好像还有点儿问题，我们来检查一下。

是咱们这个格式不对吗？多个之间我想一想啊，应该是可以有一个竖线双竖线。双线，哎，这个对了。好，我现在报价。OK啊，这次没有问题了，我们再看看这边。啊，上面这个红色的是粉丝的，还是之前咱把它删空掉，然我们来看一下。后这样停止一栏开机。

OK，没有问题了啊，这次呢，这边也没有报错了，那么我们现在呢，就已经实现了一个双向的啊，多端的一个展示正常，这边也正常，然后这边也正常。然后呢，当在H5中啊，因为咱们这个值给他给他屏蔽掉，对吧，咱们这个这个位置只在小程序微信小程序里面啊进行展示，所以说。出于严谨的角度啊，咱们把它在这上面也给它增加一下。啊，有人说，诶那老师现在这儿有一个，这儿有一个会不会冲突，不会啊对吧，你就相当于说像他先给了一个赋值，然后又用他给了一个新的赋值，这会会以最后的这个赋值为准，会把前面的给它覆盖掉。

好的。好，那到这为止呢，咱们。第二个关于制作导航条，导航栏才算是完成，包括APP和小程序。好的，呃，这节课呢，就跟大家分享到这里，感谢您的关注，我是霍小亮啊，欢迎您加我的QQ和微信，期待以后有更多与您交流合作的机会，就算说您没有做APP啊，对APP不感兴趣，咱们加个好友，以后总归也有可能会有合作的机会，对吧？好，感谢您的关注，拜拜。