npm引入小程序官方WeUI组件库weui-miniprogram

雨点打透心脏的1/2处 2022-12-18 10:53 568阅读 0赞

### 一，查看是否安装npm包 ###

### 通过npm -v 查看npm的版本，如果能显示相应出版本号，就说明是安装成功的。 ###

### **二，如果没有安装** ###

### **1.npm init 会提示不是内部命令** ###

### **2.安装node环境** ###

这时候就需要安装node环境，可以在[http://nodejs.cn/download/ ][http_nodejs.cn_download]下载对应的版本

### 三，开始构建nmp ###

### 1.进入小程序根目录（app.js所在目录），打开cmd ###

输入：npm init -y

npm init -y

参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值。

### **2.下载依赖** ###

npm install weui-miniprogram

下载miniprogram依赖

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

### 四，点击 微信开发者工具的 工具=>构建npm ###

### 五，app.wxss引入全局样式 ###

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

列：在页面中引入 dialog 弹窗组件

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

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

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

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

[http_nodejs.cn_download]: http://nodejs.cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221122/4b5d7d4bab514a19b728902db73ebc2e.png