微信小程序 | 小程序组件化开发

🖥️ 微信小程序 专栏：小程序组件化开发
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、小程序组件化思想

小程序组件化开发

二、自定义组件的过程

创建一个组件

使用自定义组件和细节注意事项

三、组件样式实现细节

组件的样式细节

四、组件使用过程通信

组件的通信

向组件传递数据 - properties

向组件传递样式 -  externalClasses(较少使用)

组件向外传递事件 – 自定义事件

页面直接调用组件方法(使用的较少)

五、组件插槽定义使用

什么是插槽?

多个插槽的使用

behaviors

组件的生命周期

组件所在页面的生命周期

六、Component构造器

---

一、小程序组件化思想

小程序组件化开发

• 小程序刚推出时是不支持组件化的,也是为人诟病的一个点

• 从1.6.3开始,便支持自定义组件开发了,也让我们更加方便在程序中使用组件化
• 

 

• 组件化思想的应用:

• 我们在之后的开发中可以充分利用它

• 尽可能将页面拆成一个个 小的、可复用的组件

• 这会让我们的代码更加 方便组织管理,并且拓展性更强

二、自定义组件的过程

创建一个组件

• 类似于页面,自定义组件由 json wxml wxjj js 四个文件组成

• 先在根目录下创建一个文件夹;

• components里存放 自定义的公共组件

• 常见的一个自定义组件 section-info: 包含对应的四个文件
• 
• 

• 自定义组件步骤

• 需要在json文件中进行 自定义组件声明(将component字段设置为true 可以讲这一组文件设为自定义组件(当你在文件中设置了这个属性之后,那么它将是一个组件)

  

• 在wxml中编写属于自定义组件自己的模板

• 在wxss中编写属于自己的样式

• 在js文件中,定义数据或组件内部的相关逻辑代码

 

• 在哪个组件中想要使用自定义组件,那么就在哪个里面的json文件中进行书写.

使用自定义组件和细节注意事项

• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用usingComponents 字段）

• 自定义组件和页面所在项目根目录 名 不能以“wx-”为前缀，否则会报错

• 如果在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件

 

三、组件样式实现细节

组件的样式细节