16. 尚硅谷_微信小程序_detail详情页静态页面搭建.avi原创

来，咱们接着把这个项目做完，那么我我打开这个页面。咱之前做的就是到这个页面，那么接下来大家看着我随便找个地方，我一点击它是不能跳到一个文章详情页，那所以我们先去整一个页面啊，整一个页面，那这个时候呢，我还是先去给他创建一个目录。稍等一下。你们那看到的也是黑屏吧，你们是白屏，我这黑屏没有来，我呢给他创建一个detail OK，那这个时候呢，我再去新建一个页面，注意啊叫detail回车。现在又多了一个页面啊，我们先不去管这个跳转，我们单独先去做这个页面。那为为了提高我们这个开发效率呢，我通常会把这个他写入的T这个路径呢，先去提到最上面啊这样做的好处呢，是它你保存刷新上来是不先加载式D跳这个页面，嗯，没有问题，OK，那往这边拖一下，我们就照着这个来去整一下。

来，我们先把这些干扰项关掉，打开，这是结构。嗯，这结构，呃，其实我们写结构之前呢，可以先去做一些事情。把那个窗口的文字是不是可以改一下呀，OK，那这个时候呢，我们可以来到这个接字文件，现在它是一个空对象。哎，至于说怎么写，你完全可以参照之前咱们写过的，我其实可以把这个直接捞过来，哎，只不过在这呢，我们叫它这是文章，哎详情啊，字体呢，也给它换成白字，CTRLS1保存，哎，上面这个是不是就换了，那这个时候呢，我们把接SL文件关掉啊，我们开始专注的去写它的结构，OK，那写结构的时候，首先这个咱们说不要，那么接下来呢，我们来一个容器，没用啊，OK，呃，大家想这样的话，我们应该怎么去考虑这个布局，就是设计你的代码。

那这一次我听大家的，你们看你们觉得怎么样去布局比较合理。拎出来对image是一行对吧？啊，这是一个整体，再往下大家看这是不是有一行呀，那这是不是大家又拎出一行，然后就这几个。又是一个，哎，这个button其实不应该加在这啊，我刚开始写的时候是没要它的，哎，在这呢，我只不过是想再给大家单独说一下button那个组件，所以咱们留一个，那button这是不是也可以加一行，那么接下来剩下的这个就是文字了，哎，所以我们呃，分析完这些呢，我们再考虑一个来，为啥要这样去一行一行数呢？小程序里边是不是比较推荐使用flex布局啊，哎，那这个时候我们先来一个image，那么接下来呢，给它来一个src。

OK，那这是上面的大图，因为现在还没有数据，那我就给他写死images，下边我先随便，呃，我们应该是去那个DP下边它有一个那个呃，Car c，它下边应该是有个零一.jpg我们看一下不是。是它吧，哎，先留一个图片，那么再往下走，呃，大家看下边这既有图片又有文字，那这个时候我是直接写吗？咱们是不是可以给它一个容器啊，哎，所以在这咱们是不是先来个view OK，接下来它有一个呃，Image，那在这儿呢，Src这是一个头像，所以呢，我们去images下边，它有个叫A维卡下边，哎，那这个呢，我得去看一下了。

我们找到A维塔啊，找一个这应该是零点啊，平G没问题，那就再往下，首先有个text，注意这边的它是三部分啊，其实这个是动态的，这是我随便写的，呃，前段时间改这个数据的时候，正好是那个复联三比不是比较火吗？我就把数据都换成这个，呃，只有发布，于是固定的，那后边这个呢，是一个时间，呃，那我们复联三看我们的。一个都没，一个都没看过，那那我先就照着这个写一下，那这个呢是发布于OK，那这个呢，我们就来一个写死的时间吧，幺九得2018没问题，那再往下呢，比较显眼的它是一个单独的文本，叫上硅谷OK留着，那么再往下就是。

这个结构大家看啊，千万不要忽略了中间这条线啊，这个也是得你去设计的。有同学是不是看不清楚啊，应该能吧啊，有同学这个颜色太淡了，但这个颜色不能太亮了，太亮了的话特别突兀，显得特别丑，哎，那因为他们除了这条线是不是还有两个图片啊，所以还是一样的，来一个容器啊，其实我还可以再来一个容器，那这个容器里边我专门去放什么呢？放那个图片。比如说我们来个image啊，那这个时候我们先把模拟器关了，哎，这点地方太小了，来我们来一个src，那在这个下边呢，我去找image下边注意看啊，我先把这个这些收起来，Detail也收起来，这有一个IO icon下边呢，有一个借给大家看一下，叫collection，注意它俩是一对。

一个是灰色的，一个是么高亮显示啊啊，那其实还有一对share share分享啊，我们需要的就是这这些图片，那这个时候呢，我去先去找一下它啊，首先我们在image下边，在icon下边要找的是click，呃，我们先来一个它吧，Am呢ti.pngok，那这个时候呢，我给它复制一份，这个时候我们把这个换一下，把这个换一下。或者说这个我们直接用它那个高亮的吧。叫share OK，那这是我们图片的内容，那么接下来我单独的去给他，哎整一个兄弟元素，那在这呢，里边没有任何内容，没有任何内容，其实我可以把它收起来，我这个呢，专门去实现一个试验的功能，那所以我直接给它加一个来，哎标识一下OK，那再往下是不是就是一个button，哎叫转发，哎此文章。

最后，那就是康了。在这呢，我们来一个text，先写一个站位的。来，咱们给他多复制几份，框出S保存一下，我们先看一下我们这边大概的一个结构，哎，东西是不是都有了，东西都有了，那接下来我们就开始去写一下样式，OK，那这个时候来还是给这些收起来，免得大家搞混，OK，把这个图片关了，写样式的时候是不是先可以给它添加一些类啊，来有没有发现我这些都类定义的结构是一样的。就差不多统一一下，大家以后上班也是。

去公司的时候，你们去不管是定义变量还是定义类名的话，那都是有一定的规范的，就算你们公司没有，你也应该给自己去设计一套啊。我之前见过有的同学，尤其你们在写样式的时候，先是杠left。Left杠完了，然后got left go right。没得杠到最后杠right，杠top，最后杠一个bottom，说老师我不会定义类名了啊，就是没有自己的规范，最起码我们定义的变量或者类名的话，建名之意，尤其是GS里面的变量，嗯，正好我说一下，这个就公司里边，呃，稍微正规一点，它是有命名规范的，这个命名不是你自己随便瞎写。啊，我们就拿GS里面定义变量来说啊，它的命名规范最起码有一个，就是你定义全局变量的时候不能随便写。首先定义那些局部变量，你最起码得建明之意，或者是用小坨分辨民法，这个大家知道吧？

全局那个变量为什么不能随便定义啊。对，覆盖其实指的就是全。那你比如说你上边有一个变量已经定义好了，你开发的周期长，比如说一个月以后你又在写，你突然忘了你上面定义过变量，或者说别人定义的，那你不注意的话，把人家的变量污染了，或者叫覆盖了，那肯定会有问题，肯定会有问题。所以公司通常会这样去做，你比如说呃，我们三个人协同开发一个项目啊，大家一个人做三个页面，最后这些项目，呃，代码是不是要整合到一块儿，那这个时候分别开发的时候，我也不知道你定义的什么变量，你也不知道我定义的，如何能有效的避免这个问题呢？哎，我们会创建一个，你比如去整一个Excel表格，在这专门去用来记录什么全局变量的。

啊，全局变量，那这个表格应该是人手一份。人手一份，开发人都有谁定义变量，尤其是全局变量之前，你先去看一下这个表格里边有没有影响定义的那个名字。如果说没有，你是不是就可以定义啊，如果说有呢。你就不能用了，如果有说明啥，之前有人定义过，大家懂这意思吗？哎，当然了，如果说他之前没有，你可以定义，但是不要忘了，你定义完你给人家登录进去。你如果不登记的话，那别人一看没有，他是不是有可能定义这个啊，这样的话能有效的去防范这个命名冲突的问题。啊，还有我们CSS类名啊，这个通常来说也不能随便去定义。因为很有可能，因为尤其是class这种类名。啊，会有冲突，那怎么整呢？你比如说啊，员工ABC他们三个人开发，那可能定义类名的话，我要求你A这个人，我后边不管你写什么，你首字母必须以A开头，甚至是可以加一个下划线，后边写你想要定义的类名。

就是A这个人，他写完的类名有一个特点，都是以A下划线开头。那这样的话，这什么就是他自己独有的，同样的啊，员工C这个人以C下划线开头，嗯，这也是避免这个冲突的一种方式，嗯。OK。并且呢，如果说哪个环节出了问题，我能快速的找到是谁那儿的问题。啊，学这的问题OK啊，大家对这个了解了以后，咱们继续，那首先在这呢，因为这个是详情页，我这起一个detail，哎，Computer，这是外边的容器，那么再往下这个class啊，我就叫它的head image。

啊，呃，咱们之前是不是定过这个类。有印象吗？那我为啥我在这还可以定义它呢？我为啥还可以，还敢去电影呢，说明啥？对，说明我当前页面的这些类跟其他页面是不是隔离的，哎，就是它每个页面里面的数据是私有的，就好像我们组件一样，OK，那再往下在这class，因为这个呢，还是有个A维塔，还有个什么date，那我就这样写，那再往下这这些就不用去管了，我们待会直接写样式，那这上微谷这同样的，那这就叫它come play公司，OK，那这个呢，这是一个整体，这个line呢线这我已经定义了，接下来我们先给他们容器去整一个class，这呢叫click，哎，再来一个叫share container。

那整完这个以后，那这个其实不需要怎么整了，我们待会直接去找到他去，或者说给他一个类也行，那class，呃，这个就叫。OK，再往下八寸不需要，哎，还有最后一个内容class，来个content OK，那这些类名整完了以后，那我就去找对应的样式，首先第一个我们先把最外边的容器拿过来，嗯，上来第一步我们应该先去做的事情是display flex，然后注意横向按纵向做一下，那也就是意味着我是不是就要去修改一下它主轴的方向啊，OK，把这个整完以后，我们接着再往下整，那就是上面首先先把上面那个大图我们整一下had image OK，那在这呢，Y，那肯定是百分百高的话应该是460，也就对应的是230个像素。

懂吗？嗯。这不这个图出来了吗？那么再往下应该是叫做为它下边有个点t date，哎，那在这个下边首先是不是有个一面角。没问题吧，我们来个宽，呃，宽是多少我们记不住的话，就可以去之前这个去看60乘六十来移上来。多少对，64乘以64对吧？嗯，正好我说一下这个，呃，咱们现在这种开发方式是啥？我是不是照着我写好的一个项目去写的，其实大家你们上班以后是没有写好的项目让你参照了，那个时候你说根据什么对UID的设计稿啊，不过那个设计稿其实要比我们看这个还要方便。

嗯，因为设计稿上你们在那个写那个订餐项目的时候，就在用的时候，是不是也有一个设计稿没有，设计稿是什么啊，有一个界面展示图是吧，上面有没有标那些没有是吧？因为咱没有UI啊，就是你们上班以后经常对接的一个工种就叫UI啊，什么叫UI，叫UI interface，嗯，专门去用来设计图的，嗯，这个时候我们要区分一个工种，UI和美工不是一个人啊UI的。呃，UI的本事要比美工要厉害得多，美工只是做一些静态图的，而我们UI是设计，既可以做图切图的是最基本的，他们也可以去，就是给我们出那种设计稿，并且UI做的图可以是动态的。

什么叫动态啊，他做的图里面可以带交互。嗯，对。比如UI出的一套图里边对不对，给我们前端人展示你们，哎，你们下面要开发几个页面，第一个页面上面有个button，你点击可以跳转到哪个页面都给你整好。它也可以点击，而且大家要注意啊，UI，它一般的HTML这些样式它都会写。啊，他们写，他们写一些基本的基本UI出的图啊，我就打个比方，大家看一下，假如说UI给我们这幅图，它会给你两套图，一套叫圆形图，圆形图就是看到这个样子，哎，告诉你，你给我实现成这样，还有一一幅图，这一幅图跟这一幅图长得一模一样，只不过这一幅图上有尺寸。

他这会给你标，哎，这到这是多少，四百六懂我的意思吗？啊460，然后这个呢，也会给你标，哎这是多少？32，这是多少？32距离左边的边距是多少？十个像素全部都有，嗯，全部都有，那这样的话，其实我们看着这个去开发的话，也是很快的很快的。嗯，好，那来回到正题上面，我们现在来到我们的项目里面，首先这个呢应该是64，诶RPS高呢也是64RPS，那CTRLS保存一下，那这个因为它后边有文字，所以呢，我在这上来直接写个line。李总，嗯。没问题，然后呢，让它距离。我们可以这样吧，不在他身上，是我们待会拿文字往这边去推一下，那因为这个贴的上面这个太紧了啊，太紧了，我们可以找到啊，就叫塔date，就是拿这个容器，我们去给它加一个T是不就可以。

嗯，拍我们来个12PX。OK，这不是有点嗯距离了吗？好看一点，那么接下来呢，我们再找到这个，诶，那比较这个点它下边的text，首先呢，我们可以给它来个fo啊，同一32R PX，然后呢，我们来一个MU left，我们都来个十个像素看一下。这不是往这边推了吗？好像是不是还有点儿大。来个。28。嗯，差不多，呃，我再说一下，有的同学显示器说他只能看到一部分。他看不见这个窗口在哪，下边也看不到，你可以去调这个，这个和C那个特别像，你们之前有的同学是百分百，你看。

我是不是看不到下边了，那把这个调成小一点嘛，75OK，呃，再往下，下边呢，有一个我们叫它company，就是那个公司啊，那这个呢，我们来一个fo size我们大一点啊，38RX，那再来一个fo。OK。嗯，文字出来了几挨个左边，那么上边这留了十个像素，十个RPX的内边距，那这个你最好是和它对齐才好看一点，那这个呢，在这我们其实可以使用market。12TX往这边推一下，嗯，OK，那再往下我们要写的是啥呢？是这两个，还有这个，还有那条线还没出来呢，对吧？啊，那首先这两个图片太大了，太大了，我们是不是可以通过它这个容器找到下面的图片啊，所以在这来点它一个image，首先先来个Y，那在这我直接就写了，应该是92PXOK，让它小一点。

嗯，首先这个已经变长了，但是大家看一下我写好了，这个人家在哪放着呢右边。那怎么整？嗯，首先你这个文档流对吧，默认的排序是不是从左到右的，你想让它到右边，你说我们可以考虑哪些方式对浮动定位，可能有的同学用个比较笨的办法，我一直拿拿那个猫往后推，他那那样不太好啊，不太好，那其实在这呢，我们可以用什么用浮动，哎，那这个时候呢，你就不要让图片也为一个浮动了，它外面这是不是有个容器啊，直接让这个容器。

浮动啊float注意这是不是right呀啊，那这样我一保存的话，它应该是紧贴着右边的，这个就比较简单了，右边稍微来一点距离，你比我记得是应该是52PS。这不推过来了吗？然后两个图片之间挨得太近，我们可以给他留点啊，距离market right，比如来个20 20个，相差不多。嗯，这不有距离了吗？那么接下来我们得把那条线整出来叫来，OK。那首先这条线大家可以看一下啊，它左边和右边。

没有占满对吧，左边右边没有占满，嗯，那那应该怎么写，而且它是居中的，那我可以这样把，对90%高呢，我们直接就来个1RPS，然后呢，给它来一个背景色是不是就可以出来，刚开始我们颜色重一点好看，免得大家找不到它。来，还有什么？对，你是不是要考虑居中啊。要考虑居中，哎，那这个时候我们这个居中，一个是水平居中，而且竖直方向是不是在这两个图片的中间啊，这个时候可以考虑用什么去做呢。我可以先保存一下，大家看一下。这不线出来了吗？这很明显不对啊，首先水平居中对于我们来说不难，你就考虑水平居中的话，让他market left，你说为5%是不是就完了？

懂我的意思吗？但是我们还要考虑一个东西，就是它得在竖直方向居住，就是从这两个图片的后边过来。对的吧，那怎么做？嗯，这个时候咱们是不是可以用定位啊，嗯，用定位OK，那在这呢，我们来一个pre是UT，那定位的话无非不就是top嘛，Top往下挪的话，我们大概其实就是45R TX。因为它总共是把92PX啊嗯。Left我们也可以写left的话，应该就是百分之多少。5%。OK，写对了吧？这不在这吗？为什么会出现这种情况？哎，对，注意啊，这也是一个常问的问题，就是说present absolute，嗯，它绝对定位，它相当于属于定位的不一定是负元素吧，相当相对于离它最近的开启定位的那个负极元素，或者叫阻先元素。

我现在是不是上面没有开启定位的，所以它是不是相当于在外面了，OK，所以呢，我们得在这，哎，它的容器是不是这个呀，我们可以在这啊，来个present rather。嗯，不是他吗？我来看一下，找一下这个容器是不是这个价法来。拿过来。

在这写一下。Two。快。是不是下到了，但是这个这里对于大家来说应该不难了。这不横，它是压在那个上面了，这肯定不能这样吧，是不是把它的层级降下来啊，叫index，比如说我们来个负一就行了。啊，CTRL保存。OK，从下面过来了，那这条线太重了，那怎么办？换一下11CTRLS保存。嗯，那就是这样，OK，那么下面这还有个button啊，这个button呢，我们就随便给他写点吧，220RPX。嗯，然后呢，来一个高度吧，高度给他个80RPS。80，呃，两百二有点小是吧。

来个280。嗯，大概就是这样，我们放在这儿啊。其实这个八字放在这是有点突兀的，而且我要说一个事情啊，大家看我是不是就写了这两个样式，有没有发现它居中啊？这不水平居中了吗？我我我有时他那样式没有吧，呃，为什么会这样，你可以看一下。移上来，这不是个八字吗？大家看可以看啊，右侧是它的样式。说明它是不是有一些内置的样式啊，哎，如果你要写的话，肯定是你的优先结构，你要不写的话，是不是就用人家这个内部默认的样式啊，哎，这个我们要知道啊，要知道OK，那就让他在中间放着吧，接下来我们去写一下，哎，下边那个content的样式。

OK，那在这首先来一个photo 32r PX，然后呢是还有什么呀，对32R PX。嗯，差不多，哎，这样看着只不过是因为它的文字都一样，我们还可以做一件事情，然后来来个market top，让他离上面那个巴远一点。OK，那这是一个静态的样式，我们就整完了，静态的样式整完了，来，我们先把这个停一下。