微信小程序中引入WeUI(npm方式) vue技术交流群（864583465)

最新推荐文章于 2024-03-14 15:39:27 发布

原创最新推荐文章于 2024-03-14 15:39:27 发布 · 648 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #vue

小程序专栏收录该内容

1 篇文章

订阅专栏

vue技术交流群（864583465) 微信小程序中引入WeUI(npm方式)

1、使用命令行或微信开发者工具的终端执行以下代码

npm init -y // 在init时，生成默认的package.json文件 否则会构建失败
npm install weui-miniprogram --save //安装WeUI对应的npm包

2、点击微信开发者工具的菜单 工具，选择 构建npm，并点击菜单详情勾选上本地设置里的使用npm模块
在这里插入图片描述

3、目录调整（可不调整）
构建npm后，项目根目录会产生miniprogram_npm文件夹，该文件夹下包含weui-miniprogram文件夹，weui-miniprogram文件夹里即是WeUI的所有组件，为了便于在页面中引入WeUI组件，我们将weui-miniprogram文件夹移动到项目根目录下，并删除miniprogram_npm文件夹。

例如我们在index页面引入WeUI的弹窗组件
（1）index.json文件

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

（2）index.wxml文件

 <mp-dialog title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
        <view>test content</view>
 </mp-dialog>

（3）index.js文件

data:{
    dialogShow: false,
    showOneButtonDialog: false,
    buttons: [{text: '取消'}, {text: '确定'}],
    oneButton: [{text: '确定'}],
},
  openConfirm: function () {
    this.setData({
        dialogShow: true
    })
},
tapDialogButton(e) {
    this.setData({
        dialogShow: false,
        showOneButtonDialog: false
    })
},
tapOneDialogButton(e) {
    this.setData({
        showOneButtonDialog: true
    })
}

4、正常情况下，步骤3应该会执行成功，然后在app.wxss引入WeUI的全局样式

app.wxss

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

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键