微信小程序-二次封装组件和自定义组件

npm/二次封装基础组件

安装npm

1. 进入小程序根目录，运行 cmd ，输入：npm init
2. 输入命令之后一直点回车。
3. 输入安装的组件命令：
4. 执行命令完之后，再去微信开发者中点工具-构建npm，就成功了。

使用Vant Weapp组件库

1. 进入官网https://vant-ui.github.io/vant-weapp/#/home
2. 按照官网的介绍选择对应的工具安装，npm使用前四步就行

二次封装组件

1. 新建一个components文件夹
2. 在components文件夹下在新建一个文件夹base，用来存放基础组件
3. 如果是存放业务组件用business，看component文件夹的位置决定组件是全局还是局部
4. 在base中新建文件夹a用来封装组件(原生小程序里面有4-5个文件,后缀分别为json,js,wxml,wxss,ts),
5. 把要封装的组件路径和名字以键值对的形式存放在json文件的usingComponents

   "usingComponents": {
       "van-button": "@vant/weapp/button/index"
     }

6. 将封装的组件路径和名字写在对应文件的app.json中的usingComponents中(名字最好与文件名一样，但要采用aa-bbb的形式)
7. 从原来组件的js文件下将props中的内容复制到封装的组件的js文件中的properties中
8. 在封装的组件的wxml文件下写原来组件的组件名及它的方法和插槽，以vant的button为例

   <van-button
     type="{{ type }}"
     formType="{{ formType }}"
     round="{{ round }}"
     loading="{{ loading }}"
     loading-text="{{ loadingText }}"
     icon="{{ icon }}"
   >
     <slot />
   </van-button>

9. 要想让组件的样式页面可以使用 ——默认组件样式隔离

• 在二次封装的组件的json文件下加上"styleIsolation": "shared"和"component": true

10. 更改组件的样式，可以在app.wxss中更改，常用的样式可以封装起来，使用时var(样式名)

自定义组件

1. 按照模板将存放自定义组件的文件夹及其内容生成后
2. 如果是局部使用：就在对应的页面的json的usingComponents中加上 “组件名”: “组件路径”（组件名可自定义）
3. 如果是全局使用的：就在app.json中加上
4. 页面使用对应的组件名作为标签，显示组件内容