前言:
笔记只包含做项目时所用到的一些基础用法,关于组件介绍还有api不做过多介绍,详细请阅读微信官方文档-小程序
一:页面(组件)组成部分
页面(组件)组成部分和vue、uniapp有区别,uniapp一个页面就是一个vue,另外页面配置在根目录的page.json中, 而微信小程序的一个页面是pages文件夹下的一个文件夹,这个文件夹里面包含4个文件,去共同组建这个页面,具体功能如下:
.js逻辑处理、数据更新等
.json页面配置
.wxml页面布局
.wxss页面样式
二:子组件和父组件(页面)通信
1.父组件(页面)调用子组件中的方法
在父组件(页面)中给子组件一个id,通过id选中子组件去调用子组件中的方法,方法如下:
this.selectComponent("#id").method();
其中id就是子组件的唯一id,method就是子组件中自定义的方法名。代码如下:
//*************************父组件****************************
// wxml
<wxBtn id="wb" btnText="我是子组件按钮"></wxBtn>
<button type="primary" bindtap="clickParent">调用上面的子组件里面的方法</button>
// js
Page({
data:{
},
clickParent(){
this.selectComponent("#wb").printLog();
}
});
//*************************子组件****************************
// wxml
<text class="">{{btnText}}</text>
// js
Component({
options:{
styleIsolation:"isolated"// 组件样式隔离
},
properties:{
btnText:{
type:String
}
},
methods: {
printLog(){
console.log("这是自子组件里打印的");
},
}
});
点击父页面的按钮,最后会打印出子组件里的printLog方法中的 “这是自子组件里打印的”。
2.父组件(页面)处理子组件传过来的事件
在子组件中把事件传给父组件(页面),让父组件(页面)去做自定义处理,方法如下:
this.triggerEvent("event",value);
然后,父组件中的子组件节点绑定自定义事件 bind:event="method" 件,再在父组件中定义这个事件。
其中event是自定义的事件名,value是子组件传递给父组件(页面)的值,method是父组件(页面)中定义的方法(事件)名。代码如下:
//*************************父组件****************************
// wxml
<wxBtn btnText="我是子组件按钮" bind:wxBtnClick="btnClick"></wxBtn>
// js
Page({
data:{
},
btnClick(e){
console.log("子组件向父组件传值: " + e.detail);
}
});
//*************************子组件****************************
// wxml
<text class="" bindtap="clickChild">{{btnText}}</text>
// js
Component({
options:{
styleIsolation:"isolated"// 组件样式隔离
},
methods: {
clickChild(){
this.triggerEvent("wxBtnClick",555);
},
}
});