微信小程序开发实战分享—1.基础知识(2)

3 指令
小程序中常用的指令有wx:for、wx:if、wx:elif、wx:else等。

//wxml

{{count}}
{{count}}
{{count}}

//js
data() {
return {
count:0
}
}
复制代码
wx:if、wx:elif、wx:else的逻辑等同于if else。

//wxml


{{index}}.{{value}}


//js
data() {
return {
arr:[
‘小明’,
‘小红’,
‘李雷’
]
}
}
输出===>

1.小明
2.小红
3.李雷

复制代码
wx:for即循环生成标签。（www.zhaoweb.cn）
教育小程序
4 事件
小程序中不使用click事件，而用tab（触摸）事件代替，事件的前缀有两种分别是bind和catch，bind:tab表示冒泡事件，即事件触发后继续冒泡触发后续事件，catch:tab表示非冒泡事件，即事件触发后不再冒泡，类似执行了event.stopPropagation()方法。

//实现一个点击加一的计数器
//wxml

{{count}}

//js
Component({
//调用组件传来的变量
properties:{
},
//内部变量
data() {
return {
count:0
}
},
//内部方法
methods:{
//点击加一
addNumber() {
this.setData({
count:count+1
});
}
}
});
复制代码
改变data中的属性值必须使用this.setData()方法，传入一个对象，对象中存放需要改变的属性键值对。

bind:tab可以简写为bindtb，个人喜欢bind:tab，看起来更清晰

5 组件
对于一个js文件，函数就是一个最小的、可复用的代码片段。而组件就是对于一个项目最小的、可复用的代码片段，他包括html、css、js代码，如我们常见的页面导航栏就可以做成一个组件，通过组件名字来使用，而不用将导航栏的代码复制粘贴到每个页面中。

5.1组件的使用
小程序的组件通过Component方法声明

//.js文件
Component({
properties:{
//接收外接传来的变量
},
data() {
return {
//组件内部的变量
}
},
methods:{
//组件内部的方法
}
});
复制代码
声明完毕之后，在需要使用到该组件的页面中进行调用

//使用组件的页面的.json文件
{
“usingComponents”:{
//由键值对组成，键表示组件的名字，值是组件的路径，也是不需要文件后缀
“component-name”:"/components/component/index"
}
}
//使用组件的页面的.wxml文件




复制代码
5.2父子组件的传值
首先我们看一下使用组件内部变量的例子，我们定义了userName变量并把它渲染到页面当中。

//component .wxml文件

Hello {{userName}},how are you?

//component .js文件
Component({
properties:{
//接口外接传来的变量
},
data() {
return {
userName:“李雷”
}
}
});
复制代码
5.2.1父组件向子组件传值
接着我们接受一个外部的变量并把它渲染到页面上，这样就实现了父组件向子组件传值。

//component .wxml文件

Hello {{userName}},how are you?

//component .js文件
Component({
properties:{
userName:{
type:String, //调用该组件时传入的值的类型，可以是Number、String、Boolean、Object、Aray、Null(任意类型)
value:“李雷” //默认值，调用该组件时未传入userName时，则userName的值为预设值李雷
}
},
data() {
return {
//组件内部变量
}
}
});
复制代码
5.2.2子组件向父组件传值
子组件向父组件传值的思路一般都是父组件监听一个自定义的事件，子组件触发这个事件同时将值传入，父组件监听这个事件的时候就可以拿到子组件传过来的值。

//component .wxml文件

Hello world

//component .js文件
Component({
properties:{
//接口外接传来的变量
},
data() {
return {
//组件内部变量
}
}，
methods:{
//用户点击Hello world的时候向父组件传值
clickMe() {
//第一个参数为自定义事件名，父组件需要监听这个事件，第二个参数为需要传的值
this.triggerEvent(‘clickMe’,{msg:‘Hello world’});
}
}
});
//parent.wxml

//parent.js
clickMe(event) {
console.log(event.detail.msg);//输出子组件传来的参数Hello world，子组件传来的参数都在event.deail中
}
复制代码