一、模板的使用
1. 模板的引入与使用
微信小程序有提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用减少冗余代码，不过有了组件之后，模板就很少使用。官方文档：模板用法
创建模板：
想要在home页面引入模板，在home文件夹下新建templates文件夹，在该文件夹下创建 .wxml 文件，如下：
然后在 temp1.wxml 文件中写入内容：
<template name="temp1">
这是模板1
</template>
<template name="temp2">
这是模板2
</template>
使用模板：
在 home.wxml 文件中使用模板
<!-- 1. 通过import标签来引用 -->
<import src="./templates/temp1"/>
<!-- 2. 使用模板 -->
<template is="temp1"></template>
<template is="temp2"></template>
效果如图所示：
传递数据：
可以通过以下方式传递数据
<!-- 1. 通过import标签来引用 -->
<import src="./templates/temp1"/>
<!-- 2. 使用模板 -->
<template is="temp1" data="{
{msg: '你好吗'}}"></template>
<rich-text nodes="<br/>"/>
<template is="temp2" data="{
{msg: '我很好'}}"></template>
<template class="box1" name="temp1">
这是模板1 -- {
{msg}}
</template>
<template name="temp2">
这是模板2 -- {
{msg}}
</template>
效果如图所示：
二、组件的使用
1、组件的创建
（1）在项目根目录中，创建 components 文件夹
（2）右击 components 文件夹,创建 test1 文件夹
（3）右击 test1 文件夹，点击新建 Component，输入 test1
（3）回车，自动生成四个小程序文件 js json wxml wxss
如图所示，演示了新建 test1 和 test2 两个组件，文件名随意：
1、组件的引用
（1）局部引用：
把组件1引入到home页面为例：
// 首先在页面的 .json 文件中， 引入组件：
{
"usingComponents": {
"myTest1": "/components/test1/test1"
}
}
// 然后在页面的 .wxml 文件中，使用组件：
<!-- 引入组件1 -->
<myTest1></myTest1>
效果图：
（1）全局引用：
// 首先在 app.json 文件中， 引入组件：
{
"page": [],
"window":{
},
"usingComponents": {
"myTest2": "/components/test2/test2"
},
}
// 然后可以在各个页面的 .wxml 文件中使用：
<!-- 引入组件2 -->
<myTest2></myTest2>
效果图：
注：
如果某组件在多个页面中经常被用到，建议使用全局引用。
如果某组件只在特定的页面中被用到，建议使用局部引用。
2、组件的传值
（1）父传子
传递参数：在父页面的子组件标签身上，进行属性绑定，如下：
<!-- 引入组件1 父传子-->
<myTest1 fatherNum="{
{fatherNum}}"></myTest1>
父组件中，给传递的值定义一个初始值为100
data: {
fatherNum: 100
},
接收参数：在子组件中，与data平级，properties节点下进行接收数据，如下：
properties: {
fatherNum:{
type: Number,
value: '默认值'
}
},
子组件中，把接收的数据渲染到页面上，如下：
<text>这是组件1的页面 -- {
{fatherNum}}</text>
Tips: 小程序中的 data节点，主要用来存放私有数据，properties节点，主要用来接收外界传递的值，在小程序中，两者都是可读可写的。
（2）子传父
传递参数： 父组件页面中的子组件标签身上，绑定自定义事件，
格式：bind：自定义事件名称 = “方法”，如下：
<!-- 引入组件1 子传父-->
<myTest1 fatherNum="{
{fatherNum}}" bind:fn="changeFaNum" ></myTest1>
子组件中，在某一个按钮身上绑定事件，当点击按钮时，给父页面传递数据，如下：
<!-- 父传子 -->
<text>这是组件1的页面 -- {
{fatherNum}}</text>
<button type="default" bindtap="changeFather">test1按钮</button>
js文件的方法中，用 this.triggerEvent(‘自定义事件名称’, 参数)，如下，点击按钮时给父页面传递 数字10
methods: {
changeFather(){
this.triggerEvent('fn',10)
}
}
接收参数： 父组件中，在第一步定义的方法中，接收子组件传递的数据 10，如下：
changeFaNum(e){
console.log(e.detail);
},
点击按钮时，打印的结果：
（3）双向绑定
当点击按钮时，让父页面传递过去的值 100，加上子组件 传递给父页面的值 10，如下：
changeFaNum(e){
console.log(e.detail);
this.setData({
fatherNum: this.data.fatherNum + e.detail
})
},
每点击页面，fatherNum的值加10
Tips: 组件中的方法在methods中写；页面中的方法，直接与data平级写，不用放到methods中。
3、组件的生命周期
组件的生命周期函数，这里只放了两个常用的，具体的见=>官方文档（需要放到 lifetimes 节点下）
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// ...
})
4、组件所在页面的生命周期
详见 => 官方文档
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})
三、WXS的使用
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。官方文档：WXS语法参考
用法：wxs 分内嵌式写法，和外链式写法。
1. 内嵌式：
在 home.wxml 页面直接用一对 wxs 标签书写，下面演示一个格式化价格的实例，如下：
<!-- wxs 内嵌式写法 -->
<wxs module="md1">
function RMBFormater(val){
return "￥"+val.toFixed(2)+"元"
}
module.exports ={
RMBFormater:RMBFormater
}
</wxs>
在 home.wxml 页面直接使用，如下：
<!-- wxs 使用 -->
<view>{
{md1.RMBFormater(10)}}</view>
效果如图：
2. 外链式：
在home文件夹新建 home.wxs 文件，在该文件书写内容：
function RMBFormater(val){
return "￥"+val.toFixed(2)+"元"
}
module.exports ={
RMBFormater:RMBFormater
}
在 home.wxml 中先引用，然后在使用：
<!-- wxs 引用 -->
<wxs module="md1" src="./home.wxs"></wxs>
<!-- wxs 使用 -->
<view>{
{md1.RMBFormater(10)}}</view>
效果如图：
希望对各位想学习小程序的人有帮助，如果有用，还请多多支持，祝大家生活愉快~~