WeUI与微信小程序配合使用入门教程（如何使用微信小程序）

概述：这是一套基于样式库开发的小程序扩展组件库。 这与微信原生的视觉体验是一致的。 由微信官方设计团队和小程序团队为微信小程序定制，让用户的使用认知更加统一。

微信小程序中使用WeUI入门教程

在学习微信小程序的过程中，我们要自己调整很多组件的样式，很多我们想要的都不是事。 于是我找到了像WeUI这样的扩展组件库，并预览了该组件库。 真是太好了！

但我找不到引用它的方法。 网上的资料并不多，最后只好依靠官方文档来学习。 我们来总结一下如何使用它。

这是一套基于样式库weui-wxss开发的小程序扩展组件库。 这是一个匹配微信原生视觉体验的UI组件库。 由微信官方设计团队和微信小程序小程序团队开发。 该程序经过定制，可提供更一致的用户体验。

1.学习参考

查看WeUI样式库：https://weui.io/

微信官方WeUI相关文档：https://wechat-miniprogram.github。 /weui/docs/

WeUI-wxss 项目地址：https://github.com/Tencent/weui-wxss

直接进入正题，了解如何操作让我解释一下。 请使用它！

直接预览WeUI-wxss示例代码即可上手~

[WeUI-wxss](https://github.com/Tencent/weui 打开[k4 )]wxss) 如果你查看项目地址，你会看到有一个dist目录。 该目录包含 WeUI 的示例代码。 下载下来，用小程序打开dist目录。 一定是这个目录！

现在只需复制您要使用的内容即可。

2、初始化NodeJs

如果这里没有安装NodeJs，请自行安装。

确保您有 NodeJ。 在小程序项目根目录下执行以下命令并回车即可完成安装。

npm init

运行npm init后，您将在项目根目录中看到一个package.json文件。

3、安装WeUI组件库。

运行以下命令。 项目根目录 命令：

npm install --save weui-miniprogram --Production

根目录出现node_modules目录

4.配置 4.1 构建npm

打开微信小程序开发工具，点击顶部菜单的【工具】-【构建npm】。 构建完成后，会在项目根目录下生成一个 miniprogram_npm 文件夹，如下所示。

4.2 npm 支持

勾选小程序开发工具右上方的“使用npm模块”。 这里有一些陷阱需要注意。 请记住选择最新的基准库。

5、项目使用WeUI

引入小程序根目录下的样式文件app.wxss（按照自己的路径引入）

@import "/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss";

将所需组件引入到所需页面的json文件中。 示例：

"usingComponents": { "mp-form_page ": "/miniprogram_npm/weui-miniprogram/form/form_page" }

可以在对应的wxml页面中使用。 示例：