weui、weui.js、weui-wxss、weui-miniprogram 区别

weui

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计。注意定义中的“样式库”，它是“样式库”，它定义了一系列的 css 样式，每一组样式都有一个对应的属性名，所以直接在 html 标签中使用这些属性名即可，类似 tailwindcss，tailwindcss 自称 CSS framework。

• 项目地址
• 文档地址
• npm 地址

在 Next.js 中使用：

• 在项目中 npm i weui
• 在 _app.js 中 import "weui";，这样就成了全局 css；
• 接下来就可以在任意页面中使用 WeUI 定义的属性名了。

WeUI 提供了很多例子，例如下面的例子定义了一个 Button 组件。对于有交互的元素，需要写 js 代码，这些例子使用了 zepto 等第三方库。

<div class="page">
  <div class="page__hd">
    <h1 class="page__title">Button</h1>
    <p class="page__desc">按钮</p>
  </div>
  <div class="page__bd">
    <a href="#button_default" role="button" class="weui-btn weui-btn_default"
      >普通型</a
    >
    <a
      href="#button_bottom_fixed"
      role="button"
      class="weui-btn weui-btn_default"
      >底部悬浮型</a
    >
  </div>
</div>

WeUI 的属性名使用 BEM 命名方法，如果你觉得它的属性名很乱很难理解，可以先了解什么是 BEM。

weui.js

这是基于 WeUI 的 js 封装。在 WeUI 项目中，如果用户需要写一个 actionSheet，除了需要写 WeUI 的 class，还要自己实现 js 逻辑，但 weui.js 帮我们实现了这些逻辑的封装，我们直接拿来用就可以了。

使用 weui.js 需要先安装 WeUI。

• npm 地址
• 文档地址

weui-wxss

前面的 weui 是为微信 Web 开发量身设计，而 Web 开发和微信小程序开发不尽相同，weui-wxss 是为微信小程序量身设计，和 weui 一样，它也是纯 UI 样式库。

使用方法：

• 把 weui.wxss 这个文件下载到小程序项目，用作全局样式；
• 参考官方给出的例子在页面的 js、wxml、wxss 中写代码。

weui-miniprogram

weui-wxss 是小程序的样式库，weui-miniprogram 则是基于 weui-wxss 开发的小程序组件库，它定义了很多小程序组件，在小程序中直接引入这些组件即可使用，除了有样式，还带有 js 逻辑。

• 文档地址
• npm 地址

可以不 npm 安装到项目，直接使用 useExtendedLib，不占用代码体积。

总结

网页开发用 weui、weui.js，小程序开发则建议使用专门为小程序量身定制的 weui-wxss、weui-miniprogram。