小程序开发工具使用 npm 安装 Vant Weapp UI 库

我不是女神ヾ 2021-07-27 02:03 330阅读 0赞

## 首先生成一个 package.json 文件 ##

在小程序前端目录下，执行

npm init

## 添加 vant-weapp 依赖 ##

npm i vant-weapp -S --production

## 安装依赖，构建 ##

之后，在小程序开发工具中，选择小程序前端的根目录，点击菜单中的 ‘工具’ - ‘构建 NPM’

![format_png][]

OK，构建完成。可以看到，当前目录下多了一个目录 miniprogram\_npm

## 配置使用 Vant Weapp UI 组件 ##

假设要使用 Vant 的 button 和 card 组件，只需要在小程序根目录下的 app.json 中加入

"usingComponents": {
        "van-button": "/miniprogram_npm/vant-weapp/button/index",
        "van-card": "/miniprogram_npm/vant-weapp/card/index"
      }

引入组件后，可以在 wxml 中直接使用组件。

<van-button type="primary">按钮</van-button>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQwMzUwNTc_size_16_color_FFFFFF_t_70][]

### 以下三个报错： ###

> ## no such file or directory, open 'xxx/miniprogram/package.json' ##
> 
> 需要执行
> 
>     npm init

--------------------

> ## 构建 NPM 时，提示“没有找到 node\_modules 目录” ##
> 
> 需要选中微信小程序前端目录，而不是云开发目录。

--------------------

> ## Uncaught Error: module "miniprogram\_npm/vant-weapp/picker/shared" is not defined ##
> 
> 关闭小程序开发工具，再次打开，这个错误就消失了。。。

## vant px转rpx ##

**注意：上面的步骤大家应该看过很多，也已经完成到这一步，但是我们查看所有组件的样式文件的单位基本都是px 而不是我们期待的rpx （因为这个原因差点放弃这个UI框架）， 下面给出px转rpx方法：**

借助第三方方法 用gulp、gulp-postcss、postcss-pxtransform 对miniprogram\_npm/vant-weapp下面的wxss进行转换

1、命令行 npm install gulp gulp-postcss postcss-pxtransform --save-dev  这个步骤要等一会儿 因为在小程序目录下添加文件会重新编译 电脑有点卡。。  目录下生成node\_modules/postcss-pxtransform算成功

2、在根目录新建gulpfile.js文件 不要问我为什么 gulp就是这样用的

var gulp = require('gulp');
    var postcss = require('gulp-postcss');
    var pxtorem = require('postcss-pxtransform');
    
    gulp.task('css', function () {
      var processors = [
        pxtorem({
          platform: 'weapp',
          designWidth: 750,
        })
      ];
    
      return gulp.src(['miniprogram_npm/vant-weapp/**/*.wxss'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('miniprogram_npm/vant-weapp/'));
    });

3、一切准备就绪 根目录打开命令行 输入 gulp css **因为没有全局安装gulp 所以我们需要在package.json 下面的script添加一个执行命令**

![99f8cb78263eaf06fae2a2447adacde5.png][]

**就可以执行 npm run build**

![0d4c0757c9130bad199b4b379a97ef0f.png][]

看到finished说明已经完成。

此时miniprogram\_npm/vant-weapp下面的所有wxss单位都变成rpx啦、 来看下效果。

![dcd50453b13f37d9eb023b9d66e0da67.png][]

卧槽 。。怎么这么小，单位是变rpx了 但是完全是px转rpx啊，这样当然会6s模拟器下缩小了2倍     我们要的应该是\*2倍大小的rpx。em...话不多说直接上方案 找到node\_modules/postcss-pxtransform/index.js  如果只是用到750 就改一行也可以

//修改 
    const deviceRatio = {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
    }
     
    //成
     
    const deviceRatio = {
    '640': 2.34 / 4,
    '750': 1 / 2,
    '828': 1.81 / 4
    }

如果只是用到750 就改一行也可以

![ae85477412f59d696b75e1ef41e1a98c.png][]

保存再次命令行 npm run build重新替换 嗯？还是一样的缩小一倍  想了想这个是px转rpx因为之前转过一次 所以单位都是rpx了 再次替换当然没办法替换。 好办 重新打开微信开发者工具，点击 **工具 -> 构建 npm **

再次执行 npm run build

查看效果

![cfcb1059022384e7bf1aa7b7c9348b6f.png][]

完结。。。。。 附上替换后的文件

链接: https://pan.baidu.com/s/1kt1p3kOQpRzPVUPdp7TSeg 提取码: g15b

[format_png]: /images/20210726/694a41214500404ba445624f593bf5b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQwMzUwNTc_size_16_color_FFFFFF_t_70]: /images/20210726/92dcba009e3d469287802761674832ab.png
[99f8cb78263eaf06fae2a2447adacde5.png]: /images/20210726/80b14a0a22b24979a8ab92f73ab6eb6a.png
[0d4c0757c9130bad199b4b379a97ef0f.png]: /images/20210726/10d10a5e359048859dd02a224f252843.png
[dcd50453b13f37d9eb023b9d66e0da67.png]: /images/20210726/35bd6170ede24eb9a5df549aaa3a4968.png
[ae85477412f59d696b75e1ef41e1a98c.png]: /images/20210726/dfc15522134f4b58a77b8581d0f87498.png
[cfcb1059022384e7bf1aa7b7c9348b6f.png]: /images/20210726/b57808471eee472d80f1a07a81ce87e0.png