小程序引入 Vant Weapp并转换px成rpx
新建微信小程序项目
-
在内建终端打开 ,鼠标对着目录右键;
-
命令行输入npm init 一直回车键到结束 ;
-
-
命令行接着输入 npm install --production
-
接着输入安装 vant/weapp的命令行 npm i @vant/weapp -S --production; (npm i vant-weapp -S --production 或者 npm i @vant/weapp -S --production 是有区别的 在后期引入组件时候 地址不是@/vant…这种写法)
-
接着就生成了 这三个文件
-
微信开发者工具 进行设置使用npm模块;
-
工具 构建npm ;
-
构建成功后多出一个文件夹 miniprogram_npm ;
-
接下来引入需要的组件 比如我这个 按钮组件 在 app.json或者页面.json (记得把app.json里面的**“style”:“v2”** 去掉)。
-
去Vant Weapp官网套一点 自己想要的元素样式,比如这个button 需要什么 就提前引入:
此时虽然已经能用了但是vant的尺寸单位在小程序这边还是 px 需要改成rpx 更为方便小程序后期的开发
-
需要借助第三方 插件来修改 右键选择在内建终端打开 命令行接着输入 npm install gulp gulp-postcss postcss-pxtransform --save-dev回车 等待下载
-
创建个文件名叫gulpfile.js 把这串代码写进去
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/**/*.wxss'])
.pipe(postcss(processors))
.pipe(gulp.dest('miniprogram_npm/@vant/'));
});
- 在刚刚下载的第三方插件包里面找到一个文件名叫postcss-pxtransform的文件夹里的index.js进行一小段的代码修改(修改后 在运行 npm run build)
最后再去开发者工具顶部的工具 里面 进行多一次构建npm就可以了