一、模板的使用
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>
效果如图:
希望对各位想学习小程序的人有帮助,如果有用,还请多多支持,祝大家生活愉快~~