미니 프로그램에 UI 컴포넌트 라이브러리를 설치하고 사용하는 방법

이 글은 미니 프로그램의 실제 개발 과정을 공유하고, 미니 프로그램에서 UI 구성 요소 라이브러리를 설치하고 사용하는 방법을 소개하는 내용이 모든 분들께 도움이 되기를 바랍니다.

페이지 개발, 컴포넌트 개발, 클라우드 개발 등 소규모 프로그램 개발의 기본 기술은 앞서 소개되었습니다. ., 이것들은 모두 기능적인 수준입니다. 본 글에서는 UI 컴포넌트 라이브러리를 활용한 소규모 프로그램 개발의 UI 레벨 스킬을 별도의 강의로 소개하겠습니다. [관련 학습 권장 사항: 页面开发、组件开发、云开发等，这些都是功能层面的。这篇我们单独通过一讲介绍一下小程序开发UI层面的技能，即使用UI组件库。【相关学习推荐：小程序开发教程】

使用UI组件库的好处不言而喻，可以统一我们小程序的整体UI风格，同时还可以大大节省开发小程序的时间。因为对于很多复杂的功能组件，自己要实现起来比较费时间，还容易存在各种功能缺陷。

实践

接下来我们就以 vant 这款UI组件库为例，介绍一下小程序如何使用UI组件库来提高开发效率。

安装组件库

使用组件库的第一步，就是将组件库集成进我们现有的小程序。

首先，我们在开发者工具中选择终端面板，并新建一个终端，这里的终端使用的就是你电脑自带的终端，比如Window系统中的命令行，或MacOS下的终端。

然后在终端内输入npm -v检查当前电脑是否装有npm工具，npm工具是用于下载网络软件包的工具，隶属于Nodejs，如果电脑上没有npm的话，可以先去下载 nodejs 并完成安装，安装后会自带npm。

当电脑拥有npm后，我们便可使用它来下载vant软件包到我们的小程序项目内，具体步骤参照 vant快速上手文档 操作即可。

在第一步成功后应该会看到类似下图所展示的样子

在第二步中我们按照指示，将app.json的style:v2进行删除

在第三步中我们按照指示，修改project.config.json如下

这里存在一个问题是，如果你是一个纯小程序项目，起初是不存在package.json文件的，所以这里配置中所指向的package.json文件会找不到。

我们可以使用npm init -y命令手动创建一个，结果如下

由于我们在创建package.json前进行了npm包的安装，所以这里还需要重新执行一遍npm i @vant/weapp -S --production以确保package.json文件中的dependencies一项有@vant/weapp。

第四步，也是最后一步，就是使用开发者工具顶部菜单栏中的工具-构建npm对我们安装的npm包进行构建，这时候会提示报错，这是由于新版的小程序开发如vant文档所说，小程序对于npm包的解析目录如今变成了miniprogram_npm。

所以我们需要按照指示将project.config.json中packNpmRelationList下的miniprogramNpmDistDir一项修改为./，如下图所示。

然后我们重新使用开发者工具进行npm构建，完成后可以看到下图的样子，小程序目录中也自动增加了miniprogram_npm미니 프로그램 개발 튜토리얼

UI 구성 요소 라이브러리를 사용하면 미니 프로그램의 전체 UI 스타일을 통일할 수 있으며 동시에 시간을 크게 절약할 수 있다는 이점이 있습니다. 미니 프로그램 개발 중입니다. 복잡한 기능적 구성 요소가 많기 때문에 직접 구현하는 데 시간이 많이 걸리고 다양한 기능적 결함이 발생하기 쉽습니다.

연습

vant🎜 이 UI 구성 요소 라이브러리를 예로 들어 작은 프로그램이 UI 구성 요소 라이브러리를 사용하여 개발 효율성을 향상시키는 방법을 소개합니다. 🎜

구성 요소 라이브러리 설치

🎜구성 요소 라이브러리를 사용하는 첫 번째 단계는 구성 요소 라이브러리를 기존 애플릿에 통합하는 것입니다. 🎜🎜먼저 개발자 도구에서 터미널 패널을 선택하고 새 터미널을 만듭니다. 여기서 터미널은 Windows 시스템의 명령줄이나 MacOS에서 컴퓨터와 함께 제공되는 터미널을 사용합니다. 단말기. 🎜🎜🎜🎜그러면 현재 컴퓨터에 npm 도구가 설치되어 있는지 확인하려면 터미널에 npm -v를 입력하세요. npm 도구는 네트워크 소프트웨어 패키지를 다운로드하는 데 사용되는 도구로 Nodejs, 컴퓨터에 npm이 없으면 먼저

nodejs🎜를 설치하고 설치를 완료하면 설치 후 npm이 함께 제공됩니다. 🎜🎜🎜🎜당 컴퓨터에 npm이 있으면 이를 사용하여 vant 소프트웨어 패키지를 미니 프로그램 프로젝트에 다운로드할 수 있습니다. 구체적인 단계는

vant 빠른 시작 문서 🎜 그냥 작동하세요. 🎜🎜첫 번째 단계가 성공적으로 완료되면 아래 그림과 같은 내용이 표시됩니다🎜🎜🎜🎜두 번째 단계에서는 지침에 따라 app.json의 style:v2를 변경합니다. 삭제 🎜🎜🎜🎜 에 세 번째 단계에서는 지침에 따라 project.config.json을 다음과 같이 수정합니다🎜🎜🎜🎜여기서 한 가지 문제는 순수 소규모 프로그램 프로젝트인 경우 package.json 파일이므로 이 구성에서 가리키는 package.json 파일을 찾을 수 없습니다. 🎜🎜npm init -y 명령을 사용하여 수동으로 생성할 수 있으며 결과는 다음과 같습니다🎜🎜🎜🎜 package.json을 생성하기 전에 npm 패키지를 설치했기 때문에 npm i를 다시 실행해야 합니다. @ vant/weapp -S --production package.json 파일의 종속성 항목에 @vant/weapp이 있는지 확인하세요. 🎜🎜네 번째이자 마지막 단계는 개발자 도구 상단 메뉴 표시줄에 있는 도구-npm 빌드를 사용하여 이번에 설치한 npm 패키지를 빌드하는 것입니다. 오류가 보고되었습니다. 이는 vant 문서에 명시된 대로 미니 프로그램 개발의 새 버전으로 인해 발생합니다. 미니 프로그램의 npm 패키지 구문 분석 디렉터리는 이제 miniprogram_npm이 되었습니다. 🎜🎜🎜🎜그래서 지침에 따라 project.config.json의 packNpmRelationList 아래에 있는 miniprogramNpmDistDir 항목을 ./로 수정해야 합니다. 아래 그림과 같습니다. 🎜🎜🎜🎜그러면 npm을 빌드하기 위해 개발자 도구를 재사용합니다. 완료되면 아래 이미지를 볼 수 있습니다. miniprogram_npm 디렉토리는 모든 npm 패키지를 관리하는 데 특별히 사용되는 미니 프로그램 디렉토리에 자동으로 추가됩니다. 🎜🎜🎜🎜

여기서 경험한 바에 따르면 미니 프로그램 개발 규칙이 업데이트될 수 있으며 타사 도구를 사용하여 이를 통합하는 경우 실제 상황에 따라 유연한 구성 조정이 이루어져야 합니다.

컴포넌트 라이브러리 사용

컴포넌트 라이브러리를 설치한 후에는 컴포넌트 라이브러리의 모든 컴포넌트를 사용할 수 있습니다. 먼저, 이전 검색 입력창을 변형하여 vant에서 제공하는 검색 컴포넌트를 사용해 보겠습니다.

UI 컴포넌트 라이브러리를 사용하는 방법은 자체 개발한 컴포넌트를 사용하는 방법과 동일합니다. 둘 다 먼저 json 파일에 도입할 컴포넌트를 선언해야 합니다

vant의 설명서도 제공합니다. 각 구성 요소에 대한 참조가 있으면 해당 지침을 따르면 됩니다.

json 파일을 수정한 후 수동으로 컴파일을 클릭해야 적용됩니다. wxml 및 wxss 파일 수정과 달리 핫 리로드 기능을 통해 수정 사항이 실시간으로 적용됩니다.

또한 검색 구성 요소와 같은 구성 요소의 경우 해당 속성에는 검색 상자에 입력된 내용에 해당하는 변수 값, 즉 값의 바인딩이 포함되어 있으므로 필요합니다. js에 추가하려면 검색창에 입력된 내용을 받기 위해 이 값을 저장할 변수를 파일에 선언하세요. value，它对应于搜索框中输入的内容，所以我们需要在js文件中声明一个用于存储这个值的变量以接收搜索框中输入的内容。

这样，我们就完成了搜索框的改造，也实践了UI组件库的使用。

接下来，我们可以阅读vant文档，通过组合各种组件库已有的组件，大大加快许多功能的开发。

总结

这一篇我们介绍了如何使用已有的UI组件库来提高我们开发小程序的效率，主要是安装和使用

이것 방식으로 검색창의 변신을 완료하고 UI 컴포넌트 라이브러리 활용을 연습했습니다.

요약

위 내용은 미니 프로그램에 UI 컴포넌트 라이브러리를 설치하고 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!