13. 尚硅谷_微信小程序_template模块基本使用.avi原创

OK，来，我们接着上节课，咱们继续来讲，那么上节课呢，我们已经把这个轮模图这个讲完了，那么下节课呢，我们，呃，这节课呢，我们主要是做下边这些东西啊，下面这些东西，OK，那下边这呢，我们主要去学习的内容叫模板。数据绑定咱们整了，事件也整了啊，这个引用正好跟模板那是一块的，我们先来看这个模板啊，列表渲染这些，待会我们就来讲啊，好，来看一下模板，首先大家要对模板有一个概念，你得明白什么是模板。嗯，最简单的模板用来干嘛的，渲染渲染，哎，其实你比如说是NOEGS，它不是有EGS模板吗？包括前端它也有自己的模板引擎，你比如说art template。哎，那这些东西呢，它是我们抽取出来的一个独立的片段啊，模板最终是要渲染的，而且模板它是可以复用的，复用的OK，那我们往下来看，首先我们要先呃学习这个如何定义模板，那这不有示例吗？啊，这个模板的组件就叫template，特别好理解，而里面的内容那就是随便你自己去写，随便你自己去写。

注意模板这是不是有个name啊，大家可以看使用name属性作为模板的名字。哎，这个name有啥用呢？往下来看，这有个叫使用模板。使用模板，你也是用的time place，注意这你完全可以用什么字节数标签。懂吗？OK，还有一个属性叫A，那这个属性值对应的是什么呢？

你会发现它俩一样，哎，那你想我定义的时候是可以定义多个模板，那我在使用的时候，我应该是只使用一个才对，我到底使用哪一个呢？就是看你模板的名字来看你模板的名字，OK来，那这个时候呢，来到我们的项目里边，我去关闭其他的标签，来我们把这个收一下，我呢在这个下面我去创建一个文件夹，我就叫它template回车，文件夹有了以后，那接下来我要创建一个模板啊，这个时候我要说一下，我们一个模板页面其实只有一个结构和样式就够了，因为模板主要是页面的片段嘛，有一个结构有一个样式，那也就是说按理来说我们需要有一个微信mail这个文件，还有一个叫微信SS文件就够了吧。那其。

它那些GS还有监测文件，我们要吗？不要啊，两种方式，要不然你自己去单独的去创建一个结构，创建一个样式啊，有的同学变成省事的话，他会这样去做，看着我选的是page这个创建页面的选项，那这个时候呢，我先给他起个名字叫list template1回车。当我回撤完了，你会发现这里边这是不是有四个键呀，哎，有的同学是这样做的，他回头再再给他干嘛商呃，GS择卡卡卡到这个地步了吗？来右键把JS的文件我也给它删掉，现在是不是留两个啊，留两个以后有同学删到这，他会发现这有个报错，哎，他又搞不明白到底是为啥呢。来，我们来看一下，他说未找到APP点阶层中PD里面的这个路径对应的GS文件，本质原因是啥？是不是我一回车他写了一个路径进去啊？

对的吧，我们现在还要这个吗？不要删掉它就好了，CTRLS保存。来首先报错没有了，来我们把调试器先收下来，好整完这个以后呢，我们来到模板，这首先至于外层应该写一个什么呢？叫template，在这吧，大家看我在这写了，按理说我们按一个table键，比如说我们在web storm里边，你按tap键什么出来一个标签才对啊，在这它不出来啊，所以呢，如果说我自己写的话，我拿双品一个，我用we去开发一个，拿这个工具去看样企。特别快。嗯，那这个时候呢，我就去研究了一下，说怎么在bam里面写小程序。

嗯，来，那我呢，先打开我的web。我这电脑也快退休了，这快来，首先这是我要导入这个程序的话，我说把这个路径拿过来就OK，好打开web open放进来。等它自动去跳转，那假如说不跳转，你最好是把这个收起来，这这不是出现这个了，那我要导的是不是这个项目，OK，这个项目导入进来以后呢？哎，这就是我们刚刚写的东西。呃，大家可以看一下，这是不是咱们三个界面啊。这是我马上要写的东西。我马上要写。OK，我要写的内容，你比如我在这，我去写一个叫template键，这不就出来了吗？啊，我其实就为了省这点事，但是有个问题啊，有的同学在weto里面导入小程序的文件，你这肯定会报错一堆红线。

为什么会出现这个问题？我们web或者h builder这些看编辑工具他们认识的是不是叫HTML，你这很明显不是一个HTML文件吧。而你想让我。Web去解析的话，你得提前告诉我你写的是小程序文件吧，包括你这个样式。那你这不写的话，你说我这怎么能认识呢。啊，这个时候教大家去配置一下啊，这有个feel，这不有个setting思吗？设置设置呢在哪？在这个in detailor下边，注意在这个下边点开有一个叫fill type啊，文件类型这个右侧我们去找一个东西往下翻，这是什么？

Cading style样式表其实对应的就是我们的CSS，没发现这个首字母是CSS吗？OK，好在五敌雪中他注意下边给了一些东西。你们打开肯定没有这个。那是什么意思呢？这是告诉web，嗯，当你遇到以这些后缀名结尾的文件的时候，你把它当做一个样式表去解析。啊，这我就等于告诉他了，那如何去添加这个呢？注意你可以选中右侧这儿不是有个加号吗？来点击一下新点，如果说叉叉叉的文件，我也让他。当做样表解析，这不就进来了吗？当然你也可以点解号去把它删掉，这是样式，光去设置样式还不够，你还得再往下找一个东西。

是不是过去了呀。是吧？呃。这不HT吗？那不用说，最后是不是加一个这个微信mail的文件，同样道理，点击加号添加进去就OK啊讲完这个以后，你这个看上去才会不报错不报错。嗯，OK，那我们可以用这个来感受一下吧。那web来写，那这个时候呢，呃，Web storm，这我们要写的内容是哪一块呢？是这个啊是这个，就是它下面这些东西，我们就挑这一个看，首先这是它的一个结构，哎，至于说下边的和上边的结构一模一样，无非不过是数据发生了变化，我们先来看它纵向有几几行，一个两个图片，这是不三个，这一堆文字是不是四个，再加这一行，这是不是五行相当于，那你先在这去搭一下结构，不用。

没问题，那么接下来我们可以再整一个VU，哎，这个U是最外边的容器，哎，这个V用呢是第一行的内容，懂吗？那第一行，因为它也是个小个体，那这有个image s RC，没问题，那接下来还有什么呢？还有个text的文本，那这呢，我先写斯塔may，那这是192018，知道我在干嘛吗？OK，那我们是不是也可以把这个引入它杠1IMAGE下边的，呃，维塔下边的，来找一下头像，下边叫0.png。嗯。其实用webw写的话，要比用那个开发工具要快一点，文章呀，包括这些呃，也挺好的，不过各有各的优点，那正好我对比一下大家看啊，用这个编辑工具有什么好处啊，它有一些会自动补全，而且你看你用哪个，注意看移上去，这不有个查看文档吗？我点击一下它会自动打开这个。

自动打开，那这样的话，Webto肯定肯定是没有这个功能了啊，你移上去再等会它也没有，OK，那这是它俩的一个小区别啊，注意看我那边ma some写完了，这边是不是也同步了呀，也同步了，嗯，OK，那我们再往下写，还有什么，这第一行呢，讲了第二行其实就那个教育理念，那那它其实就是一个普通的文本啊，这儿呢，我去写个上规故事，那么再往下是不是又是一个意味着src走，那这个呢，是一张大图，哎，啊，我呢，先去detail下边的，呃，Car so so c so car下边我们去找一个，那在这个下边我随便拿一张，就第一张吧，先都写成啊静态的，那再往下是不是又是一个文本。

呃，我们把这个复制一份。OK，来换行再往下还有什么，注意有两个小图片，还有两行文字吧，那你说我应该怎么写啊，看大家有没有感觉我是直接去引图片吗？那最好是吧，也给他一个容器啊，因为他们是一个整体嘛，好，那这个下面呢，有个image s RC，走呃，然后再往下text的文本，这是88，那这个时候呢，我先复制一份。

是不是两份啊，嗯，没有问题，那再往下我们再去以这个图片，首先在这应该是images下边这个图片呢，在这个icon里面。IO下边IO下边我就直接去找了这个星星，这个我们可以用这个，嗯，这些倒不是，倒没什么技术含量啊，诶IQ下边的它那再往下还有个叫什么来着，其实拿这个就行，小眼睛看到这边。嗯。来一看这个图说明它是什么格式啊，为什么你们说偏啊可以好那接下来我那我在这去找一个images下边好，IO下边我们找一下这个view点偏近，那现在我们的结构就搭好了，你结构搭好了以后是不是要应用到当前这个页面。

OK，那web感受完了我就关了吧。嗯，主要是这咱们条件有限啊，如果双屏的话就用它特别爽，OK，那整完了以后，那我这是一个模板，我接下来是不是要考虑如何用到我对应的页面里边，那这个时候呢，就有一个东西叫import。那这个时候我只能是这样去写import import是不是引入的意思，好，它里面呢，有个src属性，那在这要写的就是那个引，要引入到模板页面的路径。怎么写怎么写都行，你比出发点是格斗机下边的page下边呃，Temp下边的list，呃，我们叫它list template点微信慢。

可以吧，引入了以后你是不是要去使用啊，哎，使用的话呢，我就挨着这个sweper往下去写，那这个时候呢，我先给他个V，给他个容器，呃，我的光标呢，OK，那在这那首先在这要用的话，是不是还是叫temp雷，只不过是这个应该是一个他。OK，那在这还记得有什么属性没在这去用内吗？注意啊，这是我回头要说的，首先你写到这里应该能想到的东西，Is，我这是不是要放一个模板的名字啊？那也就是说我们当初定义的时候，这是不是应该有一个属性叫类码，OK，我这叫它list来解写time类，那这个东西就不能瞎写了，你这是不是必须叫它才对？CTRLS保存一下。

进来了。只不过结构有点乱嘛，慢慢调。OK，模板结构现在我们已经应用上来了，那么接下来我们要写的是什么模板的样式啊，写这个之前呢，我的习惯还是去给它添加什么类，这是最外边，那我可以起个类别叫time plate container，那接下来就是头部那个。日期对吧，还有个什么A贝塔是头像的意思嘛，那我们也可以给他一个类比，你比如说就叫A贝塔下划线date。对吧，再往下class，这个叫做company。公司，那这个呢，Class，那这个class是中间这一张大图，我们可以叫它内容的一位。啊，再往下这一个呢，这一个就是下边。

这这一个啊，一个收藏，一个是爱好吧，都可以，那我在这儿，我比如说啊，我可以给它这个起一个叫收藏的意思，这个大家知道吧，啊再来个love，呃，少了什么。啊，少个t collection OK，那这些类别加完了以后，我们去写样式就好写了。首先你看现在的布局多乱啊。你立马要想到一个东西，我刚刚是吧，说纵向我们一共这样往下排，就一行一行的去往下捋，一共不是五个吧，我为什么要这样捋。哎，对，他能想到这个，哎，因为我要用什么那个弹性布局，那所以呢，我们在这complete container在给最外边的容器来整一个flex，并且你flex的direction是。

没问题。那接下来我们在这其实还看不到钥匙，那我再写一个，我写谁呢？我写这个D的下面这个图片，就这个家伙太大了。你看我写好的这个。是不是就这么点啊，它的大小是多大呢？来，移上来30乘30，也就是说我设置RPS的时候应该是60乘60才对，好，那通过这里找到它下边的image，我们先来个Y，那这应该是60RPX高度呢，同样也是60RPS。我这编译了一下，很明显样式是不是没有生效啊，千万别忘了一个事情，你的模板结构，你在我的历史页面是不是引入了，但是样式我是没带过来。

嗯，别忘了引样式，那这个时候样式在哪引呢？你的结构在list结构引，你的样式呢，就得在list样式里面引。这能懂吧，一对一的关系嘛，就是它以它的结构，这个呢，以它的样式。啊，这比较烦的是什么，刚刚我们我们引结构是怎么引的，是不是要是一个标签的形式啊，哎，引样式的时候是这样的it。这个应该也好理解，特别像你们学过的last路线，对吧，OK，那这个路径写一下到pages下边，哎，算了，咱们直接是不是可以把这个。搂过来，搂过来的话，我只需要换换什么东西啊。是他吧，注意下边为什么飘红。

我没写完。是不是加一个分号啊，那这个时候要说一下小程序的这个开发规律，其实挺严谨的啊，挺严谨的，OK，来这个时候大家看。什么生效了呀，没有问题，既然生效了，我们就开始怎样是吧？来到这个，首先这个图片有了，但是有没有发现文字在下面啊，我先问一下大家为什么会出现这个原因机来有同学立马想到机械，就他们是不是都基于机械对齐啊啊所以啊，机械大概在哪呢？在这。对，我这个画笔太粗了。对的吧，那想让他俩在同一行怎么办？对我take米来CTRLS保存一下。哎，对的吧，然后呢，我还可以啊，因为它这个呢，离那个文字太近了，怎么办？Right，来个十个RPX往右去把文字推一推。

对的吧，然后呢，给它这个容器呢，加一个pad。呃，比方就来个12PX，就上下左右都有，那这样的话看上去没有那么挤。嗯，差不多OK，那还有什么，它下面这个文字，其实我们也可以去设置一下，比如说我们这来个size。稍等卡住了，哎，来个32RP。自己稍微小一点点。OK，那再往下这个上硅谷，那这些类我就直接写了啊，我是不是叫它company公司，呃，那这个呢，首先与左边有个距离，Mark left12PX，这个十呢，应该是不是和上面这个对应啊。

答，布局这一块应该没问题吧，啊，这些呢，至于说为什么是十，这我就不解释了，我随便写了，嗯，OK，那接下来我们可以让这个字体大一点，比如说来个36RPX，再给他去加粗一下，来个700吧啊。你为了好看一点，你还可以干嘛，你比如说给他来一个啊，那这个时候呢，我们应该是mark一下，让它上下都有一个外边距推一下嘛。OK，那再往下这个图片，那这个我们叫它content image OK，那在这首先二话不多说，这个是不是应该是100%，好，还有一个叫高度，高度的话我没记错的话，应该是460。也就说在这上面要显示230。230OK，那再往下这个文字这点content，那这个文字这呢，FO3人，我直接写32R PS，我问大家一个问题，我们通常看到这些描述性的段落，它的首字母是不是要缩进啊？用哪个手机啊？

叫text，缩进一个字的话，是不是正好是一个字的大小。嗯。按理来说，我我这不已经设置了吗。呃，我得确认一个东西类名。我的你看这没有加，要不然他就生效了，是不是康德的走。对的吧，嗯，没问题，那再往下就是图片和文字了，那这个图片呢，来我们整一整，呃，首先那个图片我们叫他啥来着。

Collection，那它下面的宽宽是多少呢？我们来看。16乘16那对32R PX高呢也是32R PX，然后呢，Ver呢密这不用说了，C保存一下。OK，文字有点大，那怎么办？让它小一点。首先在这我们来个也是这我估计32的有点大。28，嗯，我们来个left吧，来个十个。向左。呃，右边我能不能拿这个推啊，可以吧。

这，这更丑了。我都给他一个这个不就行了吗。对的吧，啊，同一个方向大家统一往右推一下，只要是后面有人就推啊，OK，那这样的话，其实我们这个东西呢，就啊我首先一个模板我已经使用上了，来我呢先把这个视频停一下。