03. 尚硅谷_mpVue_主页面部分搭建.avi原创

好，我们接着上一节课来讲，那么上一节课呢，给大家介绍了一下这个map view这个初始化项目里边所有这个文件的一个构成，那么这节课呢，我们来试着去写一些简单的。案例好，那因为这个src下面的东西呢，是他呃默认给我们创建的，那这个时候呢，我们自己去写一个，所以呢，我会先把这个src呢去改一下名字，那么右键右键了以后呢，我们找到这有个啊，我们把这个呢改成一个DEMO，嗯，就是他上来给我们的一个案例回车，那在这他不让改的本质原因是因为。我在这儿也就在这个小程序的开发工具呢，打开了这个项目，他们有，哎有关联，所以呢不让改，那这个时候呢，我会先把这个关掉，然后呢，来到这一块呢，咱们再去试着去修改一下，好，那在这儿呢，还是把它改成DEMO回车，哎，这个时候呢，我们就可以改了，那把这个src修改了以后，咱是不是需要一个我们自己的src啊，因为他这个项目在打包文件的时候，找的是不是就是src这个文件，OKSRC有了，那我们第一步呢，应该去创建一个应用。

诶，我们上来可以叫他APP，或者说在这我们不这样去创建，右键找到这个模板，我在这写个。APP1回车，回车以后，我们之前看过在app.view哎这个组件里边是不需要template结构的，因为它代表的是整个应用，哎，是整个应用好，那么这个app.view有了以后，在这儿呢？写什么啊，在这儿呢，我们可以去写注释呢，应该不是这一个啊，应该不是这一个，它呢应该是什么？应该是这个。

OK，好，在这儿呢，我们去写，哎，公共的样式又叫全局的样式，那么这呢，是全局的那个GS文件，在这儿呢，我们先不去写任何的东西，好接着我们来考虑一下，有了这个APP，这没有还写什么，哎，对，是不，我们需要一个入口文件，而且呢，它叫什么？哎，叫mind.gs。那么在这呢，首先我们应该去引入一下view from view没问题，然后呢，我们需要把当前这个APP是不是引入进来，这呢，应该是小写好，接下来我们回顾一下它那个初始化的APP里边都有什么，首先是不是有一个view点，哎，Config。点有一个叫production，是不是等于false，那么在这呢，给大家写一下注释，哎，这一步呢，它是去设置啊，View的提示功能关闭关闭啊，因为有时候你开着这个提示，对于我们开发人员来说还是挺烦的，OK，那这个设置完了，还有一步，哎，叫声明当前组件的类型怎么写呢？呃，首先我们是不是有个APP点我们叫它map type map type等于什么呢？等于APP，那这一步呢，是声明这个组件的类型，为什么为应用，OK，那写完这个以后呢，我们去生成一个APP的实例，等于另一个，哎，然后呢，我们需要把这个APP放进来。

接下来app.dollar符mount，那么这一步是干嘛呢？是挂载整个应用，也就让整个应用生效，那这一幕呢，是哎，生成应用的实例。

OK，那这就是它里边每一步的一个作用，那么有了这两个文件以后呢，我们就可以去创建一个页面，我呢在这儿去写一个pages，在它的下面呢，去放置我们的页面，那为了分别的清楚一点，我会再去创建一个文件叫index。注意这是个文件夹，然后呢，我们在这个下边去创建我们的页面，注意一个页面呢，它通常分为这么几部分啊，我们那个默认的案例里边，它是不是有一个叫点V的文件啊，还有一个叫叫什么叫win.gs注意每个页面都有什么，都有一个入口文件，那么我们先把这个写了port view，这的套路是固定的，然后呢，这个index from，哎，当前路径下的。

index.view接下来呢，是去生成这个index的实例，等于另一个，然后呢，我们去把这个index放进来，然后呢去挂载。当前的页面，诶注意了，这一步呢，是去挂载当前的页面，而不是整个应用了，而不是整个应用了，那接下来我会在这写一点东西，注意这个模板我们得要吧整个div啊在这呢，我们就来个P标签吧，好，那这个呢是我们表示一下是index组件。OK，没有问题，那么写完这些以后，有的同学可能想看一下效果，想看效果的话，那这个时候呢，我们去把这个项目呢，再重新启动一下啊，这个项目呢，是我用那个map又写好的整个项目来，我再找到我刚刚。

关关掉的那个项目，再重新给他打开。那这个时候呢，我们会发现一个奇怪的问题，你会发现我打开这个项目，这儿是不还是关，最起码它显示的是不是以前的那个界面啊，但是呢，我这个src明明是不是咱们刚写的呀，诶那为什么这个还是以前的呢？哎，在这儿大家要注意一个问题，这显示页面的内容是跟谁有关系，他是看的谁呀？是看的src吗？不是他是看的这个。而现在这个Dis是不是根据我们原来的src打包生成的，所以呢，你要看到最新的效果，你应该是先把之前的Dis给他干嘛。

哎，删除掉，然后呢，让他重新去打包，那在这儿呢，我们去执行一下n PM start回车。好，这边启动了以后，打包完我们点一下是不是又生成一个新的Dis，那这个时候呢，来到我们这个界面，我们让他去重新编译一下。OK，我这儿刷新一下，诶，我们这儿看到的还是原来的这个界面，那这就是不对的，我们看一下这边，哎，Pages下边是不是只有个index啊，只有index，那这个时候呢，它应该显示的是新的界面才对，因为它没有显示呢，那这个时候我会把它关掉，然后呢，我们重新去，哎，找一下我们这个项目。找之前呢，我们我会先把之前这一个这一个map test，我们给它干嘛，给它删掉来删掉。

OK，来在这儿呢，我们去新建一个吧，点击新建，然后呢，还是找到我们test下边，哎，我们刚刚写的这个项目确定进来。OK，那这个时候最起码我们看到的界面是吧，不是刚刚那个也是它初始化的那个界面了，但是呢，又看不到其他东西呢，这是为什么呢？你可以打开调试器，哎，在这儿呢，我们会发现这是不是有一个报错呀，他说未找到APP点杰森，哎，其实这个错误呢，之前我们也遇到过，相信大家也都懂，那是因为在这儿除了这些文件是不还少一个很关键的文件，就是全局的配置文件，叫APP点哎杰森，那在这儿呢，都写什么呢？首先呢有一个配S，它呢对应的什么？应该是一个页面的路径啊，在这儿呢，我们写一下pages index下边的。

Index下边的，我们之前在原生的小程序是不是写的是这样呀，但是在这一定要注意，我们最终找的是index下边的谁。哎，是吧，Mean点微信ma这个文件，所以呢，路径在这会这样写，当我们写完了以后啊，你按个CTRLS让他重新编译一下，但是我们动的是配置文件。你会发现它下边根本没有动啊，这个时候呢，最好是什么？最好是来到这些它能检测到的文件里面，重新去干嘛去编译一下，那这个时候呢，我们再去刷新一下。再去刷新一下，现在我们是不是能看到这个页面了，能看到这个页面了，诶，没有问题啊，页面能看到了以后，我们来看一个东西，他说这个index.dollar mount is not function，那么其实应该有问题的是在哪呢？

是在这个下边，在这个下边在这儿，他说我的Dollar mount。Is not function，那还记不记得，哎，这呢，是不是应该是小写来重新编译走你这儿是不是就没有问题了，哎，没有问题了，那这个时候呢，为了保险起见呢，我们应该看一下我们主文件，这这是不是也是一个小写呀？那通过我们以上的操作呢，我们已经看到了这个页面，哎，这就是我们自己写的内容，好，那。既然我们已经写出来这个页面，那首先我们可以把这个窗口的配置是吧，去改一下呢，哎，窗口的颜色大家看一下我写好的这个是吧，这个颜色啊。

OK，那还记不记得，怎么去改它呢？那这个时候诶，大家一定要学会去官网上去找，来到我们小程序的开发文档，点击一下框架，那这个时候呢，我们注意在这儿有一个全局的配置，那下边这个window里边的配置是不是就是窗口的配置啊，所以往下我们找到window，好它跳转过来，首先这一个就是配置什么，就是配置我们那个窗口的颜色，来我们在这儿去写一下，那在这呢是window，它呢是一个对象。首先先配置窗口的呃，背景颜色，那这个颜色呢，我们要和之前的一样啊，要和之前的一样啊，那这个时候呢，我直接去找一下这个颜色吧，因为之前我们也用过它，那这个颜色呢，应该是它，哎，应该是它。OK，我先把这个放进来，我们来看颜色是不是，它是不是出来了呀，哎，是出来了，好，那这个窗口的颜色虽然说出来了，那大家还记不记得以前我是在这儿写的不。

是在这写的不啊，注意在这写的，这是不是全局的窗口配置啊，而这个颜色是不是应该单独属于index这个页面啊？哎，对，那也就是说，那这个颜色我们可以搬到哪呢？搬到我们index这儿，它也可以有一个自己的配置文件，那在这儿呢，我们叫他in杰森啊，至于说为什么之前上节课是不是给大家讲过，然后呢，把这个填进来，OK，那这个时候我再刷新是不是还是它呀，还是它好颜色有了，接下来是不是还应该有一个。文件，哎，文字还应该有一个文字，那这个文字的话，我们可以继续写，叫title text，哎导航标题栏文字内容，OK，那在这呢，我们继续写，把这个贴过来，那首先呢，在这儿呢，我们叫它什么，就可以叫硅谷哎周刊CTRLS1保存来我们来看一下效果，来这个文字是不是就出来了呀，来出来了OK那。

这节课呢，我们就到这儿，呃，通过以上的讲解呢，我们了解了自己如何去下手去开发，哎，这个map view的项目，OK。