07. 尚硅谷_微信小程序_主页面静态页面搭建.avi原创

来，咱们接着来上课，呃，大家注意一下，从现在开始，就是你们接下来要敲的东西，首先我们要新创建一个项目，我点击项目新建啊，还要注意一个东西啊，你看我在这是不是能查看所有的刚刚我是不是启动了两个啊，没有问题，来把这个关掉它，我在这儿项目新建，那么在这的话呢，我还是找到刚刚这个文件来确定进来。现在是不是要有APPID啊，那这样的话，我去这边去把这个捞过来。OK，放进来，注意现在如果说自己写的话，你就把它取消掉，取消掉，那这个时候呢，我可以点击一个确定，呃，这样是不是让我整一个名字啊，让我整一个名字的话，我们就来个迷你。然后呢，叫他个program study。确定。

OK，你看我当前这个新创建的项目，先看这是不是只有一个配置文件，而也没有什么页面了，下面呢，也给你报了一堆错。啊，如果说你自己去创建个项目，你看啊，你说我上来现在要去创建什么文件了，对papp哪个文件啊。GS是我先去传这个C那个样式文件啊。你上来第一步是不是应该先去注册小程序啊，所以呢，我们应该先去创建一个叫app.gs的文件，来教大家怎么去创建，注意看这是不是有个加号呀，点击一下这个加号，哎，这有很多可选的东西，那现在比方创建的是GS文件，那我就点它，哎，他让你起个名字，那肯定是叫APP了，那上来二话不多说，你是不是应该先把这个东西写上，里面是不是传一个配置对象进去，那么在这我们是用来去干嘛呢？注册啊干嘛？小程序没有问题，来我CTRLS保存一下，大家自己看看能不能发现什么问题。

你看控制台这是不是有个报错呀，那他说什么未找到，哎，一看这个说明我们是不是少了接S文件来走，你再去创建一个，注意选中这个接字文件。是不是还是。我现在创建了个监测文件，然后你看到控制台报错不一样的。Expecting什么意思来期望，也就是我这个接字文的期望，是这这一堆东西，但是呢，你没有给到。注意看，战士们飘红啊，其实我告诉大家，我只需要写他就好了。首先不飘红了，我再CTRLS。

又报另外一个错误啊，撇接S组未定义配。PAGE4干嘛了？还记得它里面是不是写页面路径的呀？那我那我们去写一个PAGE4对应的是一个数组，为什么是数组的很有可能有多个页面啊。没有问题，把这个写好了以后，我里面是不是需要个页面路径啊，你现在是不是少页面，那那这个时候我们去创建页面。啊，首先习惯来说，我应该先去创建一个文件夹去管理这些页面，注意在这文件夹就叫目录，那在这呢，我给它起一个名字叫pages。然后下边创建页面的话，也不要直接在下边创建。你应该是一个文件夹去管理一个页面。对，那样的话结构清晰一点，所以呢，我会再去在它的下边去创建一个文件夹。

这个时候大家注意啊，因为之前有的同学又在这，他是先选中了一下这个，然后呢，又在这去点添加注意，我在这去创建的目录都是根目录下面的东西。懂吗？然后我需要在这个配置下边创建文件夹，怎么办？选中它右键，这是不是也有个新建呀。诶，你会发现这个开发工具，这是不是少了点东西啊。你没发现我上面那看不到了啊，反正能够到他将就着用吧，啊这呢，我叫他1OK，文件夹有了来。我现在要创建页面了啊，有一种比较简洁的，呃，简洁的方式啊，可能有的同学上来是一个一个挨个去创建结构样式行为杰森啊，但是呢，他给我们提供一种方式，这里有个东西叫配景。

注意它就是页面的意思，注意看我点中这个我的门，呃，页面的名字也叫它我回车。这么四个文件激活吗？都有，哎，那这四个文件我们上来上来大家就能看到，这是不是有窗口颜色，有页面的内容啊，刚刚的报错也没有了，注意看我刚刚这故意没写东西。你会发现，当我一创建页面，一回车那一下，它自动的把我页面的路径时放进来了，而有了页面路径，小程序应用它会自动的去这个配置文件里面去找，然后给你显示对应的页面。OK，那我们来看这个结构里边，这不就是一个text吗？那这个东西其实我不说大家应该也能懂，它里面主要放什么。什么放文本内容啊，你会发现这儿的内容什么正好跟我页面的是一样的，我可以去改一下它，你看啊，我前面加点东西随便加ctrle保存，注意这边是不是就变译了呀。

嗯，这边编译了，OK，那这是我们基本的页面有了，那我们先去做一些操作，我呢去把这个这吧，把所有的关掉，它接下来我们要做的是什么呢？是这个页面。是这个页面，那首先第一步我们应该先去把窗口的颜色以及窗口的文字是不给人家设计好，那设计这些东西呢，你就得去在阶层的文件里面去配置了。嗯，JS的文件去配置，注意啊，这个时候有一个你们需要去分析的东西，app.js，这是个全局的配置。而页面里面是不是也有个接S文件啊，那这个叫什么页面的配置，那这个里边的配置是不是只能给他用啊，全局的配置呢，所有的页面都可以用，哎，那这个时候你们以后拿到一个项目需求，不要着急去写，你去分析它。

你看着啊，这是我的第一个界面，我一切换，有没有发现我这个窗口颜色变了。对吧，我再切换一个页面窗口颜色变了吗。没变，那我切换到电影频道窗口颜色变了吗？没有说明啥，说明当前这个小程序应用除了。第一个页面窗口颜色不一样，其他什么都一样，那那些窗口颜色我问你我还需要分别在它们页面里面去配什么，不需要，你是不是放到全局里面就行来，那这个时候我们来到我们的这个全局配置啊，这个地方呢，有点挤啊。

这不是咱们群里配置吗？那接下来我要配置窗口颜色，哎，教大家怎么去找，哎从这开始我会讲的慢一点啊，嗯，OK。切换到浏览器，这不全局配置吗？注意看你们以后看什么东西，看到这个，这是参考的一些案例，事例，下边都有一些说明，刚刚这个P是干嘛的，页面路径的一个列表，而下边这有个window，往右侧看。全局默认窗口的表现，那注意看它是个链接，也就是意味着我可以点进去，来，我们点过来看一下。哎，这么问一下呢，刚刚那个怎么跳的，你们觉得用什么可以实现啊，哎很好，网链接呢，锚点来那过来我们来看窗口都有哪些配置。这一长串我就不读了，直接看这。

背景颜色对吧，其实我们刚刚也是过来，我们来配置一个，注意首先它最外层是么，一个是window啊，哎，在这呢是个对象，那现在我们要配置什么东西，叫它的背景颜色来吧，整到全屏吧，后边要跟一个颜色啊，这个颜色的话呢，你们可以拿取色器也行，是拿那个取色器大家有吧。嗯，可能你们跟我的不一样啊，有一个用的就行都行来啊，其实就这个颜色，我把这个颜色拿走，那这个颜色呢，我要设置到哪了，放到这CTRLS1保存，首先背景颜色是不是换过来了，OK，第二步配置什么呀，这什么没有文字啊，没有文字怎么配，不用写去找官网。

哪个呢？是不这个，哎，后边也写的一清二楚，OK，来，我们把这个配置也给他拿过来，那接下来在这，你比如我们叫它welcome at at规律CR保存。这个文字是不是就上来了啊，还有一个其实我们可能要用的叫什么。导航栏的标题颜色navigation。但是要看这。啊，这个是限量版的，也说它只有两个颜色来，我们可以去测一下是不是这样，注意我刚刚没有配置，它默认是不是一个白色，那也就现在你想换的话，只能换成这个了。框保存一下，我看是不是黑色啊啊，有同学说我喜欢红色。

嗯，对的是pink是吧，小老师带过来的啊，现在上我前端的老师都喜欢粉色了，来，那这个如果说用其他颜色的话，哎，那这个呢，我们只能用什么啦。Black OK，那这样的话，窗口的配置呢，我们就整的差不多了，嗯，注意现在我是不是在全局配置呢？啊，那当前页面为什么有，是因为它用的全局的配置啊，那再往下来我们去整一下当前的页面吧，首先我自己写的话，我上来肯定不用他的示例。咱们是不是写自己的结构啊，哎，那这个时候呢，给大家去讲一个组件点过来。先来看第一个V。这个组件呢，叫视同容器啊，可能你们看这还不太好理解，我直接说一下，这个像我们写结构里面的div一样，它没有任何的含义啊，就是用来布局的，所以呢，我们上来通常会去写一个，没有在这里边我们去写我们的内容。

什么时候用到不用呢？哎，你要写的内容它是一块一块的，对，你就可以包一个糖。那在这个里边写上，我们得看这边来，我这个时候呢，把这个打开，我把这个也打开，往这边拉一点，首先大家看这是不是有个图片，有一行文本，下边看上去有一个按钮，对吧，那这些呢，我就不想我先把这个模拟器给它关掉啊，空间大一点。在这呢，我直接就说了图片的话用一味着这好理解吧，是src，那下边这还有个文本，那就是text text用来写文本，比如说hello，呃，小程序吧，再往下，哎，注意啊，在这其实我不是用的是一个button，我用的是就是普通的，你比如说我先给它包一下，这是个view，在这个前面呢，我给了他一个什么文本，叫text，这呢叫开启小程序来之旅，外边这个边框其实就是拿这个容器设置的。

啊OK，那写完这我们这是不是差图片了呀，啊注意在这里是没有办法往这放图片的，你想有图片想法进放，你得在你的硬盘里面去放。那这个时候呢，我打开我的项目，打开这个小程序相关资料，诶大家看这是不是你没意思啊，先不要管理别的东西，你复制一份拿到你当前的项目。里面呢，有很多的图片啊，咱们用什么，我带大家去找什么就行，当我在硬盘里面放入图片的时候，那这个时候我们来到小程序这看一下。

暂时不进来了，呃，现在我们随便去找一张，我要找这张图。啊，我要找这家头，OK，那怎么找的啊，在这儿呢，我给大家说一下，我推荐的是在小程序里面，你去找东西，用绝对路径去找好一点。当然了，有时候他不让你用绝对路径的时候，你只能用相对路径啊，小程序内容本来就不多，用绝对路径的话，方便也能保证我们找的是对的，决斗路径什么意思啊。它的出发点是不是在根目录啊，根目录下呢，Image下边index下边的car.gpt啊，这是index没问题，写完了以后CTRLS保存一下，我们可以来看一下我们写完的长什么样。

这不有了吗？啊，有了，现在我们差的是什么？差的是样式了吧？哎，那写样式的话，我的习惯是什么？先给他们去添加类。而且这个最好是统一啊，Class，你比如说这个是index界面，我最外边，那我就叫它container index container，那这个是index里面的这个用户头像，我们可以叫它贝塔阿凡达，其实啊，又叫用户头又叫头像嘛，OK，那这个呢是什么？Hello，其实后边跟的是用户的名字啊，再往下这个是开启小程序，那我们class叫做勾，呃，比方叫googlego study吧，OK，类名设置完了你就可以写对应的样式，那这个时候我打开index，点这个样样式文件，首先第一步我可以点直接去找那个index，呃，Container，这是么外面的容器啊，上来我去做一件事情，This display flex，为什么要让它变成伸缩核模型呢？你可以看一下这边这个不就三件布局吗？纵下来吧，而且是不居中的，用flex的话很容易去搞定的。

OK，来到我们的界面，首先它是纵向布局的，那我能用默认的吗？你是不是要修改它那个主轴的方向叫flex direction叫color。Colu是它吧，CTRLS保存一下，我们来看一下。这是不是跟刚才就不一样了，然后是不是居中的呀，那怎么办呢，It center。

这不居中吗？让里面的每一个元素。嗯，如果说大家放了的话，把这个解起来CTRLS来保存一下是不是来到中间了，那接下来我们只需要去设置一些东西，你比如设置那个维塔叫用户头像要来个宽啊，外宽是多少呢？哎，教大家怎么去拿控制台去看，相信也会，这不有个血中吗？点击一下这个移上来。多大？100乘100，那这个时候我要说一下，你们在控制台去看到页面的大小是CSS像素级别。对吧，那我现在是不是要用RPX去分啊。注意现在是100乘100PX，我想问一下大家，那我在这应该怎么去设。

我的单位肯定是他。前面放多少还是100乘100多少，是不是200？没理解吗？来，我们来看一下是不是CTRL保存一下。对的吧，嗯，没有问题，然后这个圆角，这个知道吧，Border radiOS，它是整个都是一个圆，那怎么办？是不是取一半走OK，这不就出来了吗？然后上下有一个边距，那这呢，我就直接写了，因为其实这这些样式也是我自己写的，哎，所以就随意发挥了100，呃，我们来个100吧，RPX啊，上下100RPS左右为零，CTRLS，这是上下有点距离啊，那么接下来再整一个这个username的点2USER，对这个大写name，那在这呢，我们要设置一个东西叫photo size32，比如说来个RTX，字体加粗会把方和位置，那在这呢，哎，有一道最基本的一个那个笔试题啊，就是说字体加粗的话。

都有哪些车？这个知道吧，然后还有什么。其实更多的是那些数字，一百两百一十到几百900是吧，好，我问下大家哪个是，就数字的话哪个最粗，加粗程度最重。这他们加粗的程度肯定不一样吧，哪个用上去自己最粗呢？最起码这一到九，你说哪个最大呀。

是不是900最大，但是要注意一个问题啊，我问一下你，我如果设个900的话，肯定要比你设个300要大要粗，但是我问你，我假如说我设个200，我这个字体是变粗了还是变细了，相对于原来的基础。变粗了，变细了，变细了，那我写多少是正好不变呢？哎，很好，400的话是不是相当于还是原来的字体大小，400朝上是开始加粗，其实400吧，下的话是不是变细了，这个是最基本的一个，大家知道它，我用它吧。这不加粗了吗？然后我们来一个market，那在这呢也来一个吧，100RPX啊就上下推一下它啊下面这这个开启小程序之旅，这个大家看我这这个类我是不给它外边的容器了呀，OK，那在这一块点一个go study，那首先我在这我去设置一下它的字体应该是28RPS啊，然后呢，它是不是有个边框8ERPS，然后solid，我们来个井号999。

嗯，当然了，边框有圆角的话也能来一个，比如来个10RPS，因为这个就带点弧度吗？Yeah。我们应该设置什么呀？比如说来个200RPX，来一个高度80RPX。差不多吧，呃，宽度再稍微大一点，220，那现在让字体水平垂直居中，首先水平居中text来对啊center，那垂直呢，哎很好，我是不是可以设置行高啊，让它为80。

这不就出来了吗？哎，但是还差点意思，差个什么东西呢，我这个外边是不是有个整体的背景颜色啊，哎，现在问题来了，你说给谁去加。嗯，可能有的同学上来是不是说给最外边的容器加不就行了吗？那我们来整一个，呃，Background，那这个呢，我直接去全局里边什么拿一下这个颜色就行了。是不是就是它OK，拿过来CTRLX，我们来看一下。少了我要我要问一下大家为什么少了对你没有指定固定的宽高，而它这个伸缩和模型是被我内容撑开的吧，所以就到这是正常的。

那这样的话肯定是不能交给用户的呀，太丑了。那怎么办？这个时候大家看一下。我再演示一遍啊，你把调试器打开，我们想要看它的结构，看哪个选项呢？这有个微信麦对应的是不是它的结构啊，哎，咱们来点击一下这个，这个时候你再看一下我之前写的我的最外层是不是就是一个V，看这。哎，它会自动的，是不是给你页面的最外边又加了一个组件标签叫配置啊，这个配置是最外边。哎，那这个时候我们能不能利用它呢？首先我是不能通过标签属性的形式，我去选中它啊，通过标签的形式。对的吧，首先我能不能指定它的高度，我让他为百分百，那其实我应该把这个给了他就完了嘛。

对的吧，走。哎，这不就出来了吗？嗯，那这个呢，就是我们当前这个页面的一个基本的一个布局来，我呢先把这个视频听一下。