“生活资讯网”项目血泪教训莫让后人再踩坑

最近一直被“生活资讯网”这个项目困扰着，几个页面做了快一个礼拜了！😭几度怀疑自己之前学移动端的制作时是不是没带脑子学…

我先来给你倒倒苦水哈！

一开始在制作这个导航栏就先给了我一个下马威，此话怎讲呢？就是说我做那个样式花了我两天😢具体这个样式是个什么样呢？我下面会放一个gif动态图展示出来。

**还有！！!**对于应用Bootstrap（栅格系统）这个响应式布局从一开始接触到现在使用我都还在叫错它的名字…什么栅格化系统、删除系统…不仅学的没到位，名字也喊不对😅

**还有还有！！！**学的解决方法多了选择恐惧症的我就开始害怕了…这个用起来布局很方便，那个代码打起来能简单些…反正诸如此类的问题就让我纠结了好久害生活不易潘潘叹气…😢

**哦！对了！还有！**在布局完后基本展现出效果后，里面许多参数也是要不停的调整，一会儿这个图标掉下来了，一会儿这个图标不见了，一会儿那个图标被影响了…反正就是不停在和它玩躲猫猫…

**哦哦！还有一个！**就是这脑子呀总是把以前学的搞忘，就还需要花时间往前复习一哈…

这书读的我真的一个头两个大！啊啊啊啊啊啊~~~

---

问题描述：

====================================================================

导航栏在不同窗口下有不同的样式呈现：

我算是明白了，越是花里胡哨越是好看的东西背后绝对没有看到的这么简单

一开始我第一反应就是利用Bootstrap来制作！额，首先就是给一个container大容器盒子。

但是我发现一个问题，里面的子盒子会在屏幕挤压下会改变样式动来动去的不按我的要求来💢

原因分析：

====================================================================

首先要弄明白Bootstrap时栅格化系统原理：它将版心分成12份，然后当屏幕压缩了就会一行放不下变成两行。

解决方法：

====================================================================

解决方法：需要用媒体查询或者在Html下面写你想要的样式，不想要的样式在（大屏、中屏、小屏…）中隐藏hidden-lg、hidden-md、hidden-sm

导航栏框架代码如下：

/

不需要container 这样才能占满整个窗口/

//左边的logo

1

//中间的一列导航栏

2

//右边的图标

2

//

方法延伸：

====================================================================

对于这种适应不同窗口的方法（统称为响应式布局）flex、流式布局（百分比）、max-width来表示、Bootstrap栅格化系统。

像这种（三张图）平分版心的就可以用flex来完成：

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？