微信推出UI组件库，可以npm方式使用啦！！

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信推出UI组件库，可以npm方式使用啦！！

微信小程序开发中也有各种各样的组件库。 这里记录几个不同组件库的使用方法。

我们的用户界面

这是微信官方推出的一个与微信原生视觉体验一致的UI组件库。 可以通过npm引入或者使用。 使用方法很简单。

**种：方法

1. 在app.json文件中设置并启用weiui。

{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json",//在这里启用"useExtendedLib": {"weui": true}
}

2、在目标页面的page.json文件中引入要使用的weui组件

{"usingComponents": {"mp-icon": "weui-miniprogram/icon/icon"}
}

使用过小程序自定义组件功能的同学应该知道，需要在json文件的属性中引入相应的组件，并且组件的路径需要准确。 比如我这里使用的icon组件位于‘weui-/icon/icon’路径，这也是使用扩展库引入weui组件后的默认路径。

3. 在模板文件中使用组件

<mp-icon type="field" icon="add" color="black" size="{{25}}">mp-icon>
<mp-icon icon="add" color="black" size="{{25}}">mp-icon>

完成这三个步骤后，组件就可以正常渲染了。

第二种方法：使用npm方法

1.使用npm下载并安装weui

npm install weui-miniprogram --save

执行npm命令后微信推出UI组件库，可以npm方式使用啦！！，可以看到项目根目录下已经存在一个文件夹，并且里面有一个weui-。 WeUi的框架资源都在weui-目录下。

2. 构建npm

点击小程序开发工具栏上的Build npm后，根目录下会生成一个文件夹。

我在这一步遇到了错误。 当我点击Build npm时，开发工具提示我错误信息：

错误消息提示我在项目根目录中找不到可构建的 NPM 包，但我很确定我已经下载了 NPM 包（即**步屏幕截图中的 weui-）。

经过一番调查，我发现我的项目中缺少一个使用 npm 的关键文件：.json，npm CLI 需要该文件来识别项目并了解如何处理项目的依赖项。

解决方案：

在npm之前，使用npm init命令初始化项目，会生成对应的.json文件。 有了这个文件，npm就会知道如何处理项目文件之间的依赖关系。

安装过程中，所有配置项均默认选择。 确认后会生成一个*简单的.json文件：

{"name": "mydemo","version": "1.0.0","description": "","main": ".eslintrc.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"weui-miniprogram": "^1.2.4"}
}

现在再次执行npm build，构建就成功了。

3、将weui.wxss引入到app.wxss中。 引入的时候要注意文件路径。 不正确的路径将导致控制台出现错误。

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

只要这一步能够正确操作，在页面上使用组件也是一样的。

4、在目标页面的page.json文件中引入要使用的weui组件

{"usingComponents": {"mp-icon": "weui-miniprogram/icon/icon"}
}

4. 在模板文件中使用组件

<mp-icon type="field" icon="add" color="black" size="{{25}}">mp-icon>
<mp-icon icon="add" color="black" size="{{25}}">mp-icon>

另一个常用的组件库：Vant Weapp

Vant Weapp是我开发中经常使用的一个小程序UI组件库。 是有赞移动组件库Vant的小程序版本。

使用方法和weui npm介绍的一样。 首先使用 npm i @vant/weapp -S -- 命令下载依赖包。 下载完成后，还可以使用npm的build功能。 构建完成后，可以在小程序根目录的文件夹中查看。 进入对应的文件，这里的名字是@vant.

导入组件：

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

同样，在页面中使用组件之前，需要先引入相应的组件。 我们可以在小程序全局配置文件app.json或者对应的page.json中引入用到的组件就可以使用了！

我们来分析一下这两个组件库的优缺点。

weui是微信推出的官方组件库。 通过配置就可以直接使用，而且这样的组件不会占用代码包的空间，这样我们就可以添加更多的业务代码（毕竟小程序后端不需要单一的代码包。尺寸受到严格限制）。 但这也是非常明显可以肯定的。 在使用过程中，明显发现weui组件库中的元素并不多。 很多地方，开发需要定制自己的组件，而我不太喜欢组件的风格。

以Vant Weapp为例，第三方组件库的组件更加丰富，而网络上这么多的组件库，总有一款符合开发的心理预期。

如果你期望更丰富、更多样化的组件微信小程序开发组件库，并且不介意 npm 引入它们的方式占用太多代码空间，我更喜欢使用第三方组件库。 （如果实在没有办法，那就只能使用分包加载了。）

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等