00:00
好的,我们继续啊,那到上一节课为止呢,其实这个啊硅谷音乐啊,就是我们原型是网易音乐的这个项目啊,里边的页面呢,就都带着大家写完了啊,那么这节课呢,我们来看一下啊,在我的课件里面呢,第六章微信email语法里面呢,有一个叫啊模板使用。那么这个模板使用的话,我大概看了一下,在我们的项目里边没有合适的场景把它设计进去,所以呢啊,我决定啊,放到最后呢,单独的去给大家讲一下啊,如何去使用这个模板。好的,那么呃,使用之前呢,来到官网啊,在框架微信ma语法下面呢,这也有这个模板啊,这是官网的,哎,出处在这个里面呢,我们说了啊,微信ma呢,提供这个模板的语法,可以在模板中定义代码的片段,哎,这儿呢说到啊代码的片段了。那这个呢,其实等同于我们之前用过的什么呀,我们的自定义组件。
01:03
哎,差不多,然后呢,可以在不同的地方调用,说白了它是不是可以复用呀。啊,那下面呢,是告诉大家如何去定义模板。嗯,你看啊,定义模板的时候注意看里边这儿呢,需要写的是template。哎,有句话也很明确,而每一个模板呢,需要有一个自己的模板名字,Name模板名字,那么里边写的内容跟我们正常写页面一样。那么定义完这如何去使用呢?注意啊,使用的时候呢,必须要用到一个template标签,然后这里面有个is。A字后边这儿不能乱写,这个呢,必须要写你指定的模板名字,只有这样他才能找到它。啊,那这是这个,那么看完这以后呢,来我们玩一把啊,来到我们的项目这。啊,因为是扩展语法,我就给他再建一个文件夹呢,在这里呢,我就叫它一个other吧,嗯,然后来到我们啊开发工具里边找到这个other,我呢去新建一个。
02:10
什么呀,我们再整一个页面吧,那就叫它一个other走好的,那other的页面创建完了以后,为了方便的话呢,我们还是把它调到上边,同时把这个逗号啊,我们移到上面去啊,要不然会报错。啊,确定。好的,那现在呢,来到了other的页面了,来,我们把这个结构打开啊,在这里边呢啊,我们上来啊,我们来一个啊other啊contain吧,上来我们去干嘛呢?去测试模板啊,测试模板说白了,我们最终定义的模板呢,啊,我们在这去使用它啊我呢这来一个V用啊里边呢,我们就写啊使啊测试使用模板,那么你要使用之前呢,啊,你一定得先去干嘛,先去定义一个模板啊,要定义模板的话,它同样不是一个完整的页面,那么我就像我们之前玩组件一样啊,我呢也给他单独创建一个文件夹,这里面呢,我叫他一个time plate。
03:16
表示是模板的意思,在这个下边我们可以定义一个啊模板相关的一个页面啊,比如说我在这里呢,我起一个叫MY,哎,Template吧,哎,这有个目录对不对?模板的话,哎,模板的话,我们其实只需要结构跟样式就够玩了,所以啊在这个里边来,在这呢,我们是直接创建不了小程序的页面的,对不对?所以呢,我们来到这个开发工具这找到刚才的template下边我呢右键啊,我去新建一个结构,比如说就叫它一个MY啊template。好的结构有了啊,对应的我们甚至是可以再去玩一个什么样式啊,比如说呢,也叫它MY啊,Temp点微信SS,那么这个结构有了以后,来我们在这一侧去玩一玩啊,这个呢,相当于是我们定义的模板啊,啊这呢是定义模板,那如何定义呢?按照官方人家的说明,外层标签是不是需要使用这个temp template标签。
04:27
对吧,哎,这是固定的啊,这是固定的好过来,然后呢,在这里边呢,需要起一个名字啊,我就叫它一个MYTMP吧,Template的缩写啊,这里边写啥都行啊,来我这呢啊,我们来一个view。比如来一个title吧,啊,那这个呢,是啊,这是我自定义的模板啊,内容好的,那现在啊,我们这有一个模板了,那么在other的页面,假如说我想要用这个模板,我们应该怎么做呢?
05:02
嗯,首先啊来到官网。官网上说了,呃,这说了使用模板的话呢,直接用这个标签就好了。对吧,那我拿过来,那么对应的这个is呢,这必须要跟我们当初的模板名字一致,后边这个data我先不讲,我们先看前边,那这样是不是就能用呢?大家看啊,其实这并没有。啊,并没有,那你要注意啊,我是在一个页面。去引入一个模板。他们都不在一个目录下呀,他怎么能找到呢?所以啊,在正式的使用之前呢,我们还需要干嘛啊,需要去引入这个模板,引入了以后啊,我们才能去使用它。那么引入的话,在官网上呢,其实它放到哪儿了?放到这个引用这儿了,在这儿,哎在微信ma中要引入另一个微信ma,也就说模板页面,我们可以通过import这个标签组件标签去引入,后边这呢,哎,我们要放置的就是它的模板页面的路径。
06:11
OK,在这儿呢,我们去找一下啊,因为啊从others others下边呢,后退出去找他不方便啊,所以呢,我直接从哪从根目录去出发去找,那就是根目录下的谁呀,Template对吧?哎,下边的my template,对了,不再往下的my temp template点微信慢我们先要引入结构。哎,那这个时候呢,我们再看一眼。大家看这是我自定义的模板内容,我们的模板是不是就好使了呀?嗯,没有问题,那当然那一个基本的模板使用我们就说完了。那么接下来呢,假如说啊,我要去设置一点这个样式啊,比如说我要给这个title标题,嗯,我呢来一个size吧,啊比如说啊我们来40RPX,同时呢,我们来color为red。
07:12
这个时候大家要注意啊,你看着我这儿刷新它并没有对应的样式,哎,模板的结构你要使用,你需要在微信ma中呢引入,那么模板的样式要使用,你也同样需要在目标页面中,在样式文件中去引入它。那么要引入这个模板样式啊,嗯,我们需要用到什么叫艾import侵入。啊,艾特input去引入,那在这里呢,来我们找一下,还是说根路镜下的,哎,那这儿呢,我就把这个改改是不是就可以了。Template下边对吧,他下边。嗯,给它放到啊这啊,它下面的什么微信SS文件来,那这个时候呢,我们看一下啊,诶你看这个样式就有了,好的以上呢,就是模板的结构跟样式的引入,那我们继续啊,那在这个模板结构里面,现在写的数据是不是都是死的呀。
08:18
对了吧,都是死的,那这样的话是不够动态的啊,比如说啊,我这儿假如说想有动态的数据。那享有动态的数据,我这来一个user info里边呢,我会去写是什么啊,比如说我会写是我还是用view标签把它简单一点,那这呢,我们来一个username,我要显示一个用户名啊,我还要显示用户的年龄啊,比如说啊这呢是啊用户名,嗯,是谁谁谁那对应的年龄那是谁谁谁,那后边这应该是个动态的,那这样的话,我邀请你谁使用我的模板,谁帮我注入这个数据啊,而这呢,也是我们使用模板啊,经常要用到的就是动态的往模板里面注入数据。
09:10
那么注入的位置呢?一定是你使用模板的位置。如何向里面注入数据呢?我们可以看一下官网,哎,模板这一块大家看着,哎,官网上啊,我把画笔雕出来。来官网上模板使用这里面的东西呢,它就是变量。这个变量哪来的呢?你看着我们当初在使用模板的时候呢,通过这个data。向里面去注入了一个数据。Data塔这的语法是固定的啊,往里面导数据必须是data塔的字段,而里面导的是什么?你看啊,下面这有个HM对象,哎,只不过往模板里面注入数据,它提供了一种更简洁的方式,就是支持用三点右算符去拆包。拆包的话就是直接能够拿到里面的属性,所以打卡在这儿用的时候,你会发现我直接用的是这个对象里面的属性。
10:07
对吧。哎,直接用的是它的属性啊,没有问题,那这样的话呢,我们也来玩一把啊。咱们在咱们的other这儿呢,我去写一个动态的数据,比如说呢,我们这儿呢,就来一个person。哎,里面呢,我们来一个user name对吧?呃,我们叫它一个carry吧,然后呢,我们再来一个A,比如说33,那这样的话呢,Other的data中是不是有个person啊,哎,我们可以把这个person对象呢去导入到模板里面data,那这呢我直接点点点。Person我就可以拆包,拆包了以后呢,在这里边我们可以怎么用呢?我直接显示这个UR name,那这呢直接显示它的A级,好的,那这个时候我们再来看一下,来大家看这的数据是不是就是动态的了。啊,没有问题好的啊,那这样的话啊,我们这个。
11:05
模板这一块呢,就给大家整完了啊,为了方便大家看的清楚一点呢,我来到other的这个结构这啊这个测试使用模板这呢,我们也给它一个class吧,也给它一个class啊,那这呢,我们就来一个标题啊标题啊,比如说啊,我们我想要标识它比较重的话啊,这呢叫个title。这个title呢,在我们other里边,哎,去写一下啊,它呢,Photo size应该是粗一点,我们来个50RPX啊fo位置呢,我们去加粗一下啊,加粗一下,同时它的color呢啊,我们来个red。看一眼,嗯,上边这个是是不是大一点,但是你要注意啊,我上边这个字大了会赢,下边这个是不是也跟着大了,说白了,我们上边是先加载我们模板里边的样式,那么加载完紧接是没有加载它的,这个时候你要注意我这儿有一个title,在我们模板的样式里边是不是也有一个title,它是会覆盖的。
12:10
哎,这呢,也是我们需要注意的一个地方啊,那这呢,哎,我这就不能用title了啊,不能用title了。嗯,比如说啊,我这儿呢,区分一下,我这来一个other title呗。嗯,抬头啊来,那对应的来到others这我把这个一改,我们再看一下。这个时候你会发现上边这个字体明显是不大一点。对吧?啊,同时啊,区分看啊,避免大家看红了,那这样的颜色呢,我们换一个别的吧,嗯,那这样的话标题也有了,测试的内容是不是也有了呀?啊没有问题,那这一节课呢,主要是给大家讲了一下啊,我们如何去啊自定义模板比啊要注意的地方是什么呢?外边这一层呢,必须要写template,然后呢要给它起个名字,起名字的目的是到时候使用的时候,我们通过is去找这个模板名称,进而去使用它,然后呢,我们还讲了如何向模板内部动态的导入数据,哎,这里呢用到一个ES6的,哎,新特性叫三点运算符,它呢可以去拆包数组或者对象。
13:21
如果说有同学对这个不清楚的话啊,可以去看一下啊,上微五官网啊,有ES6的视频,好的,那这节课呢,我们先讲到这里。
我来说两句