微信小程序学习笔记（持续更新。。。）

前言：

笔记只包含做项目时所用到的一些基础用法，关于组件介绍还有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);
       },
    }

});