weui在微信小程序中使用

最新推荐文章于 2025-04-11 09:26:21 发布

hangGe0111

最新推荐文章于 2025-04-11 09:26:21 发布

阅读量847

点赞数

分类专栏：微信小程序文章标签：小程序使用weui

本文链接：https://blog.youkuaiyun.com/hangGe0111/article/details/108598079

版权

63 篇文章

订阅专栏

本文介绍了两种在微信小程序中使用weui的方法。方法一推荐使用useExtendedLib，无需在app.wxss引入，组件不计入代码包大小。方法二通过npm安装，需要构建npm并全局引用weui.wxss。每个方法包括配置、安装、引用组件和使用步骤，并提供了官方文档链接以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.方法一（useExtendedLib方式（推荐此方式））：

说明：这种方式引入的组件将不会计入代码包大小，并且不需要在app.wxss 中引入weui.wxss，比较方便：

1.1 首先在 app.json 配置：

{
  "useExtendedLib": {
    "weui": true
  }
}

1.2 在需要使用的页面的 json文件引入组件：

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

1.3 在需要使用的页面的wxml文件中使用：

<mp-dialog title="标题" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>是否删除?</view>
</mp-dialog>

1.4 效果：

2.方法二（npm方式）：

2.1首先找到 package.json目录，cmd到命令行，在该目录运行改命令安装weui-miniprogram：

cnpm install weui-miniprogram --save --production

2.2 微信小程序编辑器工具=》构建npm；

2.3 微信编辑器，右上角详情=》使用npm模块

2.4 app.wxss 全局引用 weui.wxss

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

2.5 在需要使用的页面的 json文件引入组件：

"usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }

2.6 在需要使用的页面的wxml文件中使用：

<mp-dialog title="标题" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>是否删除?</view>
</mp-dialog>

2.7 效果：

3.说明：

3.1 npm 官网地址：

3.2 如果想删除 node_modules：

安装 rimraf

npm install rimraf -g 

// 使用命令删除 
rimraf node_modules // 也可以删除其它文件夹或文件