【微信小程序】初识微信小程序组件

作者简介：一名C站萌新，前来进行小程序的前进之路博主主页：大熊李子🐻

一、组件的创建与引用

1.1 创建组件

1. 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
2. 在新建的 components -> test 文件夹上，鼠标右键，点击“ 新建 Component ”
3. 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和.wxss
   注意：为了保证目录结构的清晰， 建议把不同的组件，存放到单独目录中 ，例如：

1.2 引用组件

组件的引用方式分为“ 局部引用 ”和“ 全局引用” ，顾名思义：

局部引用：组件只能在当前被引用的页面内使用

全局引用：组件可以在每个小程序页面中使用

1.3 局部引用组件

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

在页面 home.json文件中，引入组件

在页面的home.wxml文件中，使用组件

1.4 全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下：

"usingComponents": {
   
"my-test1":"/components/test1/test1"
}
}

<