第13章 第三方UI组件库-【千锋教育】微信小程序开发与实战（微课版）

第13章 第三方UI组件库 组件化介绍 自定义组件 安装Vant Weapp组件库 Vant Weapp的使用 Vant Weapp核心组件 Vant Weapp业务组件 01 02 04 05 03 06 目 录 CATALOUGUE 初心至善 匠心育人 组件化介绍 初心至善 匠心育人 组件化介绍 在页面的设计过程中，页面上的每一个元素都是组件，页面是一个大型的组件，这个大型组件又由多个中小型组件拼装而成。中型组件还可以再拆分成更小的组件，小型组件再拆分成DOM元素。在传统的Web前端组件化开发中，DOM元素也是属于浏览器的组件，是组件的基本单元。而在微信小程序开发中，小程序提供的基础组件就是小程序组件化的基本单元。 初心至善 匠心育人 组件化介绍 通常一个应用会以一棵嵌套的组件树的形式来组织，例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。 初心至善 匠心育人 自定义组件 初心至善 匠心育人 自定义组件 在小程序项目下创建“components”目录来管理所有的自定义组件，并且在“components”目录下新建一个文件夹，并将该文件夹命名为“my-component”，然后在“my-component”文件夹下点击鼠标右键，在右键菜单中选择“新建 Component”选项。 初心至善 匠心育人 自定义组件 初心至善 匠心育人 自定义组件 然后将自定义组件中的所有文件都命名为“index”，创建完成后的自定义组件文件结构如下图： 初心至善 匠心育人 自定义组件 打开自定义组件中的index.json配置文件，将component字段设为true将当前组文件设为自定义组件。 { "component": true } 初心至善 匠心育人 自定义组件 使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径。 { "usingComponents": { "my-component": "/components/my-component/index" } } 初心至善 匠心育人 自定义组件 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。 <my-component inner-text="这是自定义组件的内容"> </my-component> 初心至善 匠心育人 安装Vant Weapp 组件库 初心至善 匠心育人 安装Vant Weapp组件库 Vant Weapp 组件库的安装： # 初始化依赖 npm init -y # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production 初心至善 匠心育人 安装Vant Weapp组件库 在使用Vant Weapp组件库之前，需要将 app.json 中的 "style": "v2" 配置项去除，并手动在 project.config.json 内添加如下配置 { ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ] } } 初心至善 匠心育人 安装Vant Weapp组件库 在菜单栏选择【工具】--【构建npm】： 初心至善 匠心育人 安装Vant Weapp组件库 等待构建完成，即完成了组件库的安装。 初心至善 匠心育人 Vant Weapp的使用 初心至善 匠心育人 Vant Weapp的使用 引入组件： 以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。 初心至善 匠心育人 Vant Weapp的使用 通过 npm 安装，在app.json文件中进行全局引入，代码如下： "usingComponents": { "van-button": "@vant/weapp/button/index" } 初心至善 匠心育人 Vant Weapp的使用 引入组件后，可以在 wxml 中直接使用组件，代码如下： <van-button type="prima