小程序使用weui的几种方式

1 useExtendedLib 扩展库
这种方式引入的组件将不会计入代码包大小

可引入的组件和功能见：
https://developers.weixin.qq.com/miniprogram/dev/extended/

在app.json文件中添加

  "useExtendedLib": {
    "weui": true
  },
  "usingComponents": {
    "mp-badge": "weui-miniprogram/badge/badge",
    "mp-gallery": "weui-miniprogram/gallery/gallery",
    "mp-loading": "weui-miniprogram/loading/loading",
    "mp-icon": "weui-miniprogram/icon/icon",
    "mp-form": "weui-miniprogram/form/form",
    "mp-form-page": "weui-miniprogram/form-page/form-page",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
    "mp-slideview": "weui-miniprogram/slideview/slideview",
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-dialog": "weui-miniprogram/dialog/dialog",
    "mp-msg": "weui-miniprogram/msg/msg",
    "mp-toptips": "weui-miniprogram/toptips/toptips",
    "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog",
    "mp-actionSheet": "weui-miniprogram/actionsheet/actionsheet",
    "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
  }

2 文件引入
git地址：
https://github.com/Tencent/weui-wxss

在app.wxss文件中添加
@import 'style.weui.wxss'
或者
@import 'style.widget.weui-button.weui-button.wxss';

3 npm构建
说明：
https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

微信开发者工具，右上角详情，本地设置，使用npm模块

安装nodejs
https://nodejs.org/en/download/

在小程序根目录shift+右键，在此处打开 Powershell 窗口(S)

初始化
npm init

执行安装命令
npm i weui-miniprogram

构建 npm
微信开发者工具，工具，构建npm

小程序使用weui的几种方式.txt