东莞微信网站商城建设阿里云 拦截网站

1. 基本介绍

小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护；

开发中常见的组件有两种：

• 公共组件：将页面内的功能模块抽取成自定义组件，以便在不同的页面中重复使用；
• 页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护；

如果是公共组件，建议放在项目根目录的 components 文件夹中；如果是页面组件，建议放在对应页面的目录下；建议一个组件一个文件夹；

下面演示一下如何创建一个公共组件：

• 在项目的根目录下新建 components 文件夹
• 在文件夹中点击鼠标右键，选择新建文件夹，输入组件的目录名称；
• 创建组件目录文件夹后，点击鼠标右键，点击新建 Component ，输入组件名称以创建组件；
• 组件创建成功之后还不能直接使用，需要对组件进行注册，注册之后才能使用组件；

开发中常见的组件主要分为公共组件和页面组件，因此注册组件的方式也分为两种：

• 全局注册：在 app.json 文件中配置 usingComponents 进行注册，注册后可以在任意页面使用；
• 局部注册：在页面的 json 文件中配置 usingComponents 进行注册，注册后只能在当前页面使用；

2. 全局组件

在 usingComponents 中进行组件注册时，需要提供自定义组件的组件名和自定义组件文件路径；
将组件注册好以后，直接将自定义组件的组件名当成组件标签名使用即可；

下面使用微信开发者工具演示如何创建和使用全局组件：

• 在项目根目录下创建 componets 文件夹，在 components 文件夹中新建 custom-checkbox 文件夹，选择新建 Component，命名为 custom-checkbox：

• 创建 custom-checkbox 组件之后，对该组件进行注册，在 app.json 中对该组件进行全局注册：

  

• 在 custom-checkbox/custom-checkbox.wxml 中修改内容，如下：

  

• 由于我们定义的是全局组件，所以 custom-checkbox 组件可以在任意页面中使用，我们在 pages/cate/cate.wxml 中使用该 custom-checkbox 组件:

  

3. 页面组件

假设目前首页 pages/index 的代码非常多，我们把轮播图做成一个页面组件：

• 在 pages/index 目录下新建一个文件夹 custom-swiper，右键选择新建 Component，设置组件名称为 custom-swiper：

• 修改 pages/index/custom-swiper/custom-swiper.wxml 中的内容信息，如下：
  

• 在 pages/index/index.json 中添加页面组件的注册：

  

• 对页面组件注册之后，可以在 pages/index/index.wxml 中使用该页面组件，如下：

  

参考视频：尚硅谷微信小程序开发教程