微信小程序——引入WeUI组件库(一)

通过npm方式下载构建,npm包名为weui-miniprogram

步骤一:初始化

在小程序项目根目录执行init

npm init -y	
步骤二:

在小程序项目目录中执行命令安装 npm 包

npm install weui-miniprogram --production
// --production 目的在于可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小
步骤三:

勾选“使用 npm 模块”选项
微信小程序——引入WeUI组件库(一)_第1张图片

步骤四:

点击开发者工具中的菜单栏:工具 --> 构建 npm
微信小程序——引入WeUI组件库(一)_第2张图片
如下图所示构建完成啦
微信小程序——引入WeUI组件库(一)_第3张图片

文件目录中即多了个“miniprogram_npm”的文件夹
文件夹下面即有了我们需要的WeUI件库
微信小程序——引入WeUI组件库(一)_第4张图片

步骤五:在 app.wxss 里面引入 weui.wxss
/**app.wxss**/
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

微信小程序——引入WeUI组件库(一)_第5张图片

步骤六:

页面中引入 dialog 弹窗组件,
比如在一个初始化的index的page里面引用

(1)、先在index页面的 json 文件加入 usingComponents 配置字段

{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

(2)、然后在index页面的 wxml 中直接使用该组件

<!--index.wxml-->
<view class="container">
  <text>我是首页</text>
  <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
  </mp-dialog>
</view>
结果如下图所示:

微信小程序——引入WeUI组件库(一)_第6张图片

可以选择“预览”、“真机调试”用手机来看效果微信小程序——引入WeUI组件库(一)_第7张图片

微信小程序 提示没有找到可以构建的npm包?

可能会会出现下面这种情况
微信小程序——引入WeUI组件库(一)_第8张图片

怎么解决呢?
初始化 微信小程序项目就行啦,进入小程序根目录,打开cmd,输入:npm init -y

你可能感兴趣的:(小程序,weUi,引入构建组件库,小程序,vue)