1.

不得不说微信小程序的官方文档还是有很多坑啊(⊙﹏⊙)

2.

使用模板和组件的目的：实现代码复用

template（模板）3.

相对于component而言，template更加轻量级，它的功能有限，主要是用于展示。模板只有两个以.wxml和.wxss结尾的文件

定义模板4.

新建一个与pages同级的文件夹templates,在templates下创建templateItem文件夹，然后在这个文件夹里创建同名的.wxml和.wxss的文件

5.

使用name属性，作为模板的名字，然后在template/内定义代码片段，template必须要写

6.

templateItem.wxml:

templatename"msgItem"viewclass"content"我是模板的内容/view/template复制代码7.

可以在templateItem.wxss中添加一些好看的样式

.content{width:100%;height:400rpx;background-color:yellowgreen;display:flex;justify-content:center;align-items:center;}复制代码8.

接下来就可以在页面中使用模板了

使用模板9.

要使用模板，首先得在要使用的页面引入模板，使用import标签导入，使用is属性，声明需要使用的模板，比如在index.wxml中使用：

10.

index.wxml:

!--index.wxml--importsrc"../../templates/templateItem/templateItem.wxml"/viewtemplateis"msgItem"//view复制代码11.

注意：import标签不能省略/,不然会报错

12.

现在，模板的内容可以显示在页面上了，但是模板的样式却没有生效。想要让样式生效，必须在index.wxss中引入模板的样式文件：

/**index.wxss**//**如果下面还有样式这里的分号不能省略**/@import"../../templates/templateItem/templateItem.wxss";复制代码13.

现在，模板的颜色也出来啦~

14.

到这里，一个最简单的模板就完成了

模板传值15.

模板除了可以写代码片段外，is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板

16.

在index.js中的data中添加一些数据，

//index.js​//获取应用实例cosntappgetApp()​;Page({data:{hero:{name:'盖伦'，profession：'战士',skill:'得玛西亚正义'}}})复制代码17.

修改一下模板：

templatename"msgItem"viewclass"content"viewclass"content"我是模板的内容/viewviewtext{{name}}/text---text{{professios}}/text---text{{skill}}/text/view/view/template复制代码18.

在模板原理的样式基础上中增加：

flex-direction:column;复制代码19.

保存并运行，此时，就多了好多内容了(#^.^#)

模板的作用域20.

模板拥有自己的作用域，只能使用data传入的数据以及模板文件中定义的wxs/模块

component（组件）21.

从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本1.6.3或更高。

22.

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

自定义组件23.

在pages的同级目录下创建components文件夹

24.

类似于页面，一个自定义组件由jsonwxmlwxssjs4个文件组成。要编写一个自定义组件，首先需要在json文件中进行自定义组件声明（将component字段设为true)，使用微信开发者工具，创建component会自动生成。

{"component":true}复制代码25.

在组件文件中编写一些看起来很厉害的代码

!--这是自定义组件内部的内容--viewclass"herocontainer"view姓名：{{hero.name}}/viewview职业：{{hero.profession}}/viewview技能：{{hero.skill}}/view/view复制代码26.

在自定义组件的js文件中，需要使用Component来注册组件，并提供组件的属性定义、内部数据和自定义方法

//这是自定义组件内部的js文件Component({properties:{//hero收一个对象hero:Object},data:{//这里是一些组件内部数据},methods：{//这里是自定义方法}})复制代码27.

也给它添加一些看起来很厉害的样式

/**这是自定义组件内部的wxss文件**/.herocontainer{width:750rpx;height:200rpx;background-color:yellow;color:hotpink;}复制代码28.

注意：在组件wxss中不应该使用ID选择器、属性选择器和标签名选择器

29.

自定义组件中，写了wxss和js，使用时无需在页面中导入，只需导入组件即可

使用自定义组件30.

使用自定义组件前，首先要在要使用的页面的json文件中进行引用声明，此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

{"usingComponents":{"my-component":"../../components/mycomponent/mycomponent"}}复制代码31.

这样，在页面的wxml中就可以像使用基础组件一样使用自定义组件啦，节点名就是自定义组件的标签名，节点属性就是自定义组件的属性值

viewmy-componenthero"{{hero}}"//view复制代码32.

黄色部分为组件的内容：

自定义组件传值33.

页面-----组件

34.

组件中通过proprtties写上要接受的值

35.

页面通过属性名称和值的方式传递

36.

上面就是页面传值到组件

37.

组件-----页面

38.

页面中写监听事件

39.

组件中写触发事件

40.

在自定义组件中添加一个事件

buttonbindtap"onTap"点击按钮触发事件/button复制代码41.

在组件的js文件methods中添加方法,通过this.triggerEvent()给也面传值，在data中定义一个数据用来传给页面

data:{message:'欢迎来到英雄联盟'},onTap(){constmessagethis.data.messagethis.triggerEvent('myevent',message)}复制代码42.

在页面的js中，添加一个与data同级的方法，通过事件对象的e.detail拿到传过来的值

Page({onMyEvent(e){console.log(e.detail)}})复制代码43.

在页面中绑定事件

my-componenthero"{{hero}}"bindmyevent"onMyEvent"/复制代码44.

点击按钮之后，控制台会输出组件传过来的值

45.

不出意外就是欢迎来到英雄联盟

注意坑点46.

因为wxml节点标签只能是小写字母、中划线和下划线组合，自定义组件也只能是这样

47.

自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式

48.

自定义组件和页面所在项目根目录名不能以wx-为前缀，否则会报错

总结49.

template和components的共性：不能单独呈现出来，必须依附显示在页面

50.

不同点：template比较轻量级，没有自己的逻辑处理能力，只能来着页面显示值

51.

组件要重量级一些，它有自己的逻辑处理能力