小程序使用vant-weapp（带px转rpx方法）
1、让项目用npm管理起来 项目根目录 打开命令行 npm init 一路回车 完成后根目录会生成package.json文件
2、安装vant-weapp npm i vant-weapp -S --production https://youzan.github.io/vant-weapp/#/quickstart 完成后根目录出现node_modules目录里面有vant-weapp算成功
3、打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件
构建完成后 项目根目录生成miniprogram_npm目录下有vant-weapp 说明已成功。
引入组件
// app.json
"usingComponents": { "van-button": "vant-weapp/button" }
使用组件
引入组件后，可以在 wxml 中直接使用组件
按钮
看下效果：
注意：上面的步骤大家应该看过很多，也已经完成到这一步，但是我们查看所有组件的样式文件的单位基本都是px 而不是我们期待的rpx （因为这个原因差点放弃这个UI框架）， 下面给出px转rpx方法
这几年进了几家公司，发现老板们都只看结果不管过程，于是我把最终生成的代码放在了文末。可以直接下载替换miniprogram_npm/vant-weapp目录
借助第三方方法 用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
//修改
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 就改一行也可以
保存再次命令行 npm run build重新替换 嗯？还是一样的缩小一倍 想了想这个是px转rpx因为之前转过一次 所以单位都是rpx了 再次替换当然没办法替换。 好办 重新打开微信开发者工具，点击 工具 -> 构建 npm
再次执行 npm run build
查看效果
完结。。。。。 附上替换后的文件
链接: https://pan.baidu.com/s/1kt1p3kOQpRzPVUPdp7TSeg 提取码: g15b