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

最新推荐文章于 2024-08-23 22:49:05 发布

江湖行骗老中医

最新推荐文章于 2024-08-23 22:49:05 发布

阅读量878

点赞数

分类专栏： # 小程序

原文链接：https://www.sunzhongwei.com/small-application-development-tools-use-npm-install-vant-weapp-ui-library

版权

小程序专栏收录该内容

20 篇文章 3 订阅

订阅专栏

首先生成一个 package.json 文件

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

npm init

添加 vant-weapp 依赖

npm i vant-weapp -S --production

安装依赖，构建

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

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>

以下三个报错：

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添加一个执行命令

就可以执行 npm run build

看到finished说明已经完成。

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

卧槽。。怎么这么小，单位是变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 就改一行也可以