04. 尚硅谷_Mpvue_firstView页面搭建

好，我们接着上节课继续啊，那从这节课开始呢，我们要正式的去写我们这个慢朋友的项目了，那在写项目之前呢，我们先来的课件这一块，那这个课件呢，嗯，就是针对于我们当前项目的一个说明，首先呢，我们要写的项目呢，是参考的是豆瓣图书啊豆瓣图书，那下面这儿呢，是我之前写好的一些截图。那这些截图呢，我们现在可以，嗯，不用去看，因为之后呢，我们都会一一的去给他实现好，那嗯，为了效果好一点呢，我还专门去登录了一个GIF的动图，当然可以了，那提前去看一下，我们接着往下来看吧，那这个项目的技术架构说明，那本成本项目呢，主要是。参考的是豆瓣图书来去创建的，那技术选型这一块map用加原生的小程序API以及fly IO，那这个空呢，是专门用于加请求的，和大家熟悉的F这些是一样的，但是呢，它比他们要强大一点，这个稍后呢，我们用到的时候会说，那除了这些呢，还有QOAQOA呢，是我接下来会带大家去用它去搭一个NOEGS的服务器啊，它是对应的一个框架，是X express的一个升级版。

那再往后呢，这写的是豆瓣开发了一个接口，那大家都知道啊，豆瓣图书呢，哎，不止是图书啊，还有电影都为我们开发人员提供了一些免费的API，呃，之前呢，我在写这个项目的时候呢，就是用它的接口，但是呢，近期我发现这个豆瓣图书的接口呢在维护，也就说这个接口应该是用不了，那不过没关系啊，我这儿呢扒了一些。嗯，豆瓣图书的一些数据，我们可以用note GS自己去搭接口返回数据来，我们接着往下来看，当前的项目呢，为模块化、组件化，工程化的项目。

哎，使用的是ES6的模块化啊，用star作为宾语语言，Vapa项目构建ES link语法检查。那再往下看，那这儿呢，是给大家写的启动项目，哎，之前这些步骤呢，其实我们都执行过啊，如果说有的同学还不熟的，你就可以参照我这儿的步骤去按启动你的项目。那再往下呢，这呢是针对于src下面所有文件的一个说明啊，其实呢，之前我们讲过了，但是呢，在这我担心有的同学还是不是太熟啊，所以呢，我对每一个重要的文件呢，都去进行了，呃，相应的说明。啊。那知道了这个以后，那再往下就是我们要去写项目啊写项目，那要写项目的话呢，我们需要有一个参照物，那这个时候呢，我需要把我写好的那个项目导入进来。

好，在这儿呢，我去open打开我们硅谷图书资料下面的这个项目，来，来到一个new window，那在这里呢，我们需要先去启动一下我们的项目。首先呢，打开命令行，我们先去把对应的map view server这个文件目录啊，拖到命令行里，因为呢，它是我们我写好这个项目的服务器啊，在这儿呢，我先去启动一下我们的服务器。好，那服务器这一块启动了以后，我们再去启动一下我们的客户端n PM start。客户端项目启动了之后呢，我们就可以用我们小程序的开发工具去给它打开好，启动了以后来到我们的开发工具，那这个时候呢，新建一个项目，然后呢说一下对应的路径。找到MY豆瓣。啊，所点击这个目录以后，打家看这自动填了APPID，那是因为我们写好的这个项目。

哎，在哪呢？在我们的相片软件，我这儿已经有了。APID，所以它的索引，那紧接着再往下我们来看，这呢写了个map为豆瓣啊，这是以我们项目的根目录的文件名作为当前项目的名称，点击一下确定。好来到了，我写好这个项目以后呢，我们可以先来看一下啊，上来第一个页面是一个全屏的轮播图，那在这呢，我点击一下开始它就跳到了啊图书。哎，主页在这里呢，这些数据呢，其实都是我们后台服务器，哎，返回的数据，然后呢，我点击这个箭头呢，我们可以来到的是这叫列表页，通过列表页呢，我们能来到什么？这叫图书的详情页，然后呢，大家要注意，那这些标题的内容呢，也都是动态的啊，然后呢，这个时候我去后退一下再后退。

来到这儿通过啊下面的板块也能来到我们的详情页面。好，再后退一下。然后呢，这是搜索图书的功能，看有会车，哎这个时候呢，大家看我们是能查到一个列表的，在这儿本意是我这输入关键字，然后呢，我们把请求呢，发给豆瓣投诉的API，由他来返回投诉内容，但是呢，因为近期它那个接口不能用了，所以大家看我这返回的内容其实是固定的，跟我输入什么内容，其实哎不相干不相干，不过这个没关系啊，大家真实开发的时候，如果是要做这个功能，你们公司的后台一定是会给你提供对应的接口的。还有什么个人中心验啊，在这这个弹窗呢，在原生的小程序，其实我们讲过啊，讲过，那为什么出现这个弹窗，是因为我们用到了里边的一个原生小程序的API，叫微信点get your info，他说了这个接口不再出现授权弹窗啊在这儿呢，没关系，我们点个继续使用，因为大家都知道我们可以利用一个button，是不是可以出现这个授权弹窗呀，好点拒绝，没有任何反应，然后呢，点允许，诶是不是能拿到当前用户的登录信息呀，再往下这有个扫码看书。

来我给大家点一下，在这呢，跳到一个页面叫扫码看书，我一点来，它是打开了我电脑本地的一个文件夹，在这儿呢，其实是让你去找找一些图片，你比如说我进来，所以来个毛选扫码呢，它是会扫你那个二维码啊，以及条形码。在这呢，其实大家看我这就是打印了一行内容啊，这个内容是啥呢？这就是扫图书能拿到你图书的ISBN码。

什么是SBNR呢？大家看你旁边有书的话，你可以看一下你们图书，哎，后面右下角那应该是有这个SBN码，如果是没有这个码的话，那你那本书一定是盗版，这个ssb码呢，相当于是图书的唯一标识，图书的ID啊，ID在这呢，也是我们之前我拿到这个码以后发给豆瓣，豆瓣根据这个ID呢，查询图书的内容返给我，但接口现在同样不能用，所以呢，我只做到这一步，就是能扫码来拿到ID，然后呢，在真机上这个扫码呢，其实就是打开我们本地手机的摄像头啊，手机的摄像头好，那这是大概的功能，以及一些看不到的功能，那稍后呢，我们做的时候我再大家说啊，再给大家说。那看完这些以后呢，我们上来先去把第一个页面去，哎，给它实现一下来来到我们的项目里面，先把之前的关掉，嗯，控制台也关了，在这呢，把我们之前写的内容给它撤掉，首先呢，我们知道第一个页面它是不是一个全屏的轮播啊，那这个时候呢，我们应该用到一个啊swa以及搭配使用的swa item那里边，那要用到的就是图片，那至于说图片呢，在这儿呢，大家可以来到我写好的这个项目里面，哎，图片放置的位置呢，是在sta下边有个images，其他的不用管，我们可以先把这个images拿过来，来到我们当前的项目呢，咱们也来到这个static下边，然后呢，把它项目默认的这些图片呢，我们去给它删掉，Delete，然后呢，在static下面来把我刚刚复制的这些图片拿过来。

首先上来我们先去找第一个first view下面的这四章，那在这呢，来static下边，Images下边，然后呢，First view下边的啊1.gbg，因为有四张呢，我给它复制一下，在这呢，我们就写成静态的了啊第二个好，第三个，那这呢，这叫爱女神，OK，那这四张图我们引入了以后，来来到我们的项目，大家看其实一个基本的轮播图呢。已经做好了，可能没有，哎，看过我们之前原生小程序的视频的同学。好奇，这是哪儿来的呀？哎，这个swaper以及swaper item，它呢是原生小程序为我们提供的一个组件，那这个时候呢，我们来到哎小程序的官网，在这呢有一个文档，这个文档就是开发文档，我们来到组建这个选项，在这呢，第一个视图容器里边，我们就能看到这个外per，哎，滑块视图容器，好，那写完这些以后呢，了解了这个，我们就可以去写下它的样式啊，在这呢，我先去给他一个对应的ID，比如说就叫first view，嗯，Contain，好。

来来到下边的样式这一块，首先我们应该先给这个laper买一个WISE100%，嗯高呢也应该是100%，包括它下面的那种图片是不是也是一样的外100%，然后呢，嗯，高呢100%，写完这些以后呢，我们先来看一下能不能生效啊在这哎，你会发现除了没有生效，你会发现图片看不见了，那在小程序里边遇到样式的问题怎么调试呢？首先大家看这一个选项叫微信ma啊，这个呢是专门用于显示小程序的结构的，哎，跟我们Chrome浏览器其实很像啊，在这呢，我们看一下为什么图片没了，大家看waper的高度为零啊，我们刚刚不是写了高100%吗？那你这的为零只能说你继承的上面是为零，那我们就可以。

继续往上看，你看它的容器是不是也为零啊，最起码我们能想到咱们这个宽高是不是应该给它的容器也加上，好加上以后来看一下照样不起作用来，这是为什么呢？因为大家看外边这是不是还有个配置呀，那在我们H5的页面，我们一直是不能继承到body这一块。嗯，一直往上继承，那现在这个配置。这是小程序为我们自动添加的文件，那也就是说我们项目的最外层的文件是不是要继承这个配件，这个时候大家看配件的高度是多少呢？也是为零，这就是我们看不到图片的原因，那在这种情况下呢，我们要设置的话，你一定是得先给这个配置设置，因为配置它是默认给我们添加的一个组件标签，那也就是意味着我们接下来的所有页面是不是都有配置这个标签啊，而其实这个页面啊，默认都是宽高100%，所以呢，我就给它加上了。

在这呢，我们最好是有一个缩进关系啊，有一个缩进关系，那这个时候呢，大家看我们项目的这个。哎，图片是不是出来了，但是吧，在这我们分析一个问题，这个配置。你想你当前的页面有，那其他的页面要不要用。那肯定也要，那现在呢，我把它放到了这个组件里面，那其实它只能对当前组件生效啊，我们回想一下，我们在原生的小程序里面需要写什么，写这种公共样式，就是每个页面都要用的样式，我们应该把它放到哪。

哎，是不是要放到全局的APP点微信SS呀。那现在在我们当前的页面里面是没有那个文件的，但是我们在点view里面是不是有style啊，它呢扮演的角色就是原生小程序里面的全局样式文件，所以呢，这种情况我可以把它呢啊提到我们app.view有这个样式文件里面，那这个时候呢，所有的页面是不是都可以享受了啊，来让他重新编译一下，大家看是不是这样是好的呀。诶没问题，那这个时候呢，基本的样式搭建完，我们再看，还有什么东西，大家看下面是不是有一些小点啊，那这些小点的话呢，来来到官方文档这我们往下看，那这个swaper组件呢，下边都有的啊，都有很多它的标签属性，其中有一个你看第一个是否显示面板指示点，那这个呢，其实就是对这个小圆点的一个设置说明，那来到我们当前的项目去给他加上，那一说到这种是符写示呢，通常对应的是不尔值，这个时候打卡来，果不其然就是不尔之默认这方。

啊，False，那也就是意味着我们要显示的话，是不是应该给人家设置为处呀，但是大家看啊，在我们的项目里面是不是已经出来了，哎，其实是这样的，你这这样设置一个触也可以，就算不设置，我们直接写上也相当于为触啊，所以它就能出来，那效果出来以后，大家看跟我写好这个，呃，还有点区别的是啥？是这个小圆点这样式不对，对吧？那也就是意味着我们还需要找到对应设置样式的。

来选项，紧接着往下看，来指示点的颜色，那这个是我们能用得上的，来把它拿过来。来，当我们的外去给它加上来，那那个样式呢，我这设的是pink。那我们看一下哎。大家看小圆点是不是平格了，但是当前项目对应的小圆点，而且当前页面对应的小圆点是黑黑色的，我们想要的是另外一种颜色，哎，Green，好，那这个时候再来看下面，这还有一个叫active color，哎，当前选中的只是点颜色，那这个就是我们想要的啊，那那这个时候呢，我们把这个也给它拿过来，这呢就写个green来，我们看一下效果。好，那这样的一个小清新的风格是不是就出来了啊，那这节课呢，我们就是对这个。

主页，哎，全屏的一个轮播效果进行了设置，有的同学说我们项目假如说要那种无缝轮播怎么办呀。继续看下边一定会有配置，包括打卡自动。播放呀，还有什么呀，再看这个circular是否采用斜接滑动，那这个呢，就是嗯，无缝萝卜的一个配置，我们继续往后写，比如说来一个出我们看一眼。好，来到我们大街下膀走走再走，这不就是一个无缝龙波的效果吗？那通过这呢，也能看出来小程序对我们。这个组件呀，以及API的分装是相当完善的啊，在这呢，最后和大家说一下，我们在map view里边说的是可以用VGS的语法，对吧，但是现在很明显我是不用。原生小程序的组件啊，啊在这呢，它两者是都可以用的，哪个方面你可以用哪个，在view里边我们也可以用一些第三方的库，比如说LA呀，是不是也能实现同样的效果效果呀。

但是啊，那个是不是还得需要下载安装呀，那这个很明显不用啊好，那这节课呢，我们先讲到这里。