微信小程序自定义组件（组件定义/使用）

目录

使用背景：

提取雷同组件进行自定义''封装'' 

         创建自定义组件所处的位置及其相关文件

自定义组件的引用

---

使用背景：

        在微信小程序中有许多效果是需要在多个界面使用的（比如：头部的小程序logo，全局客服按钮，以及样式布局效果相同内容改变.. 等等），遇到这些情景都是可以将这些内容提取出来，定义为之定义的组件，并在合适的地方使用，大大减少了代码的冗余，更利于我们快捷便利的开发。

提取雷同组件进行自定义''封装'' 

         创建自定义组件所处的位置及其相关文件

          步骤一：首先在项目根目录components的文件夹中创建一个空文件夹，起一个组件名字。

        步骤二： 在空文件夹中新建component（*建议命名内容与文件夹同名*），新建完成后会在空文件中生成四个文件，分别以(.js)(.wxml)(.json)(wxss)为后缀的文件

         四个文件效果图：

         步骤三：将你想定义为组件的样式（样式包括wxml格式，wxss样式，js逻辑，json引用）完完全全复制到这四个文件中去，文件之间要相对应，复制完成后自定义组件就"封装"完成。

自定义组件的引用

        步骤一：首先在要使用自定义组件的目标页面的json文件中引入定义好的组件

        

         步骤二：直接在wxml文件合适的位置中引入以刚刚命名的名字标签，以我的例子我需要在wxml文件中加入<headlogo><headlogo/>标签，这个自定义标签不需要加入任何样式和内容

        注意：第一次加入自定义标签有几率会发生缓存不显示的问题，需要重现编译启动一下小程序即可解决自定义组件样式无效的问题

        引入完成后即可完成。