微信小程序 ----组件

文章目录

文章目录

前言

一、创建项目

二、组件的使用

1.新建Component

2.组件的样式

1.组件的样式 默认是相互隔离

2.配置样式格式

3.外部类

三、事件传递

1.子元素发送事件

2.父元素监听

四、生命周期

五、页面周期

---

前言

组件呢其实就是视图层的基本组成单元，自带一些功能和微信风格的样式，通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建项目

打开开发者工具，选择 “小程序项目”，点击右下角的 “+” 新建项目。

选择一个空的文件夹作为项目目录，填入刚刚的 AppID，再填写一个项目名称，比如我这里叫做 miniprogram-1。点击 “确定” 进入工具主界面。

。

二、组件的使用

1.新建Component

引用：

xxx.json
"usingComponents":{
"item":"/components/item/index"
}

2.组件的样式

1.组件的样式 默认是相互隔离

2.配置样式格式

 options:{
    multipleSlots:true,//开启多个插槽
    styleIsolation:"isolated",
    //isolated隔离，apply-shared父子可以隔离 shared项目影响
},

3.外部类

  externalClasses:["item-class"]

三、事件传递

1.子元素发送事件

this.triggerEvent("事件名称","事件对象")

2.父元素监听

<item bind:事件名="处理函数">
    function 处理函数(e){
//e就是事件对象
}

四、生命周期

         created(){console.log("创建完毕，有this不能setData")},
         attached(){console.log("挂载,可以设置data")},
         ready(){console.log("组件挂载完毕")},
         moved(){console.log("组件移动")},
         detached(){console.log("组件已经卸载")},
         error(){console.log("组件发生错误")},

五、页面周期

         show(){console.log("页面显示")},
         hide(){console.log("页面隐藏")},
         resize(){console.log("试图变化")},

 

总结

有关分享就到这里，可以查看小程序官方文档了解更多小程序的特性，做出更复杂的自定义组件。