在前端开发中，我们经常需要使用一些 UI 框架来提高开发效率。weui1.js 就是一款基于原生 JS 的 UI 框架，提供了大量的 UI 组件和样式，支持移动端和 PC 端的开发。通过 npm 包安装，可以轻松集成到项目中。本文将介绍如何使用 npm 包 weui1.js，并提供详细的使用教程和示例代码。
安装 weui1.js
要使用 weui1.js，需要先在项目中安装它。可以通过 npm 命令来安装：
npm install weui1.js --save
安装完成后，在项目中引入 weui1.js：
import weui from 'weui1.js'
// 或者
const weui = require('weui1.js')使用 weui1.js
weui1.js 提供了大量的 UI 组件和样式，包括按钮、表单、列表、弹窗等。这些组件的使用方法类似，这里以按钮为例，介绍如何使用 weui1.js。
添加按钮
在 HTML 中添加一个按钮：
<button id="btn">按钮</button>
通过 JS 来初始化按钮：
weui.btn('#btn', function(){
console.log('按钮被点击了');
});这里我们使用 weui.btn(selector, callback) 方法来初始化按钮，第一个参数为选择器，表示要初始化的按钮；第二个参数为回调函数，当按钮被点击时会调用该函数。在这里，我们输出了一段文本，表示按钮被点击了。
添加加载中效果
在按钮被点击时，有时候需要显示加载中的效果，以提示用户等待。可以通过 weui.btnLoading(selector) 方法来实现：
weui.btnLoading('#btn');这里的 weui.btnLoading(selector) 方法，传入按钮选择器，即可触发按钮的加载中状态。
取消加载中状态
当加载完成后，需要取消加载中状态。此时可以使用 weui.btnReset(selector)：
weui.btnReset('#btn');这里的 weui.btnReset(selector) 方法，传入按钮选择器，即可触发按钮的取消加载中状态。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------------
----- ---------------- ---------------------------------------------------------------
-------
------
------- --------------------
------- ------------------------------------------------------------------------
--------
-- -----
---------------- -----------
----------------------
-- -------
------------------------
-- ------
----------------------
-- -------
----------------------
-- ------
---
---------
-------
-------总结
本文介绍了如何使用 npm 包 weui1.js，并提供了详细的使用教程和示例代码。在实际开发中，可以根据需求来选择相应的组件，以提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdefe