当前位置: 首页 > 工具软件 > weui-wxss > 使用案例 >

微信小程序 npm 引入 weui-wxss

郎曾笑
2023-12-01

1、打开cmd,在小程序的根目录,初始化npm

npm init

  name 项目名称;version 项目的版本号;description 项目的描述信息;entry point 项目的入口文件;

  test command 项目启动时脚本命令(npm test);git repository  Git 地址

  keywords 关键词;author 作者;license 项目要发行的时候需要的证书

2、执行命令,进行安装 npm 包

npm install --save weui-miniprogram

3、npm 进行构建

微信开发者工具==》工具(开发工具导航栏)==》构建npm

4、npm构建进行本地设置

微信开发者工具==》详情==》本地设置==》使用npm模块(勾选)

5、在app.wxss引入全局样式

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

6、实例demo展示

首先在页面的 json 文件加入 usingComponents 配置字段

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

然后可以在对应页面的 wxml 中直接使用该组件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

 

 
 类似资料: