微信小程序框架的px转rpx

a2774206a2774206 1.4k 9月16日 发布

文章来源于 https://blog.csdn.net/u014035057/article/details/103203881/

文章内的gulp配置目录有问题,文末稍作修改。
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 中直接使用组件

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

看下效果:

注意:上面的步骤大家应该看过很多,也已经完成到这一步,但是我们查看所有组件的样式文件的单位基本都是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就是这样用的 



1.  var gulp = require('gulp');
    

3.  var postcss = require('gulp-postcss');
    

5.  var pxtorem = require('postcss-pxtransform');
    

9.  gulp.task('css', function() {
    

13.  var processors = [
    

15.  pxtorem({
    

17.  platform: 'weapp',
    

19.  designWidth: 750,
    

21.  })
    

23.  ];
    

27.  return gulp.src(['miniprogram_npm/vant-weapp/**/*.wxss'])
    

29.  .pipe(postcss(processors))
    

31.  .pipe(gulp.dest('miniprogram_npm/vant-weapp/'));
    

33.  });
    

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  

1.  //修改 
    
2.  const deviceRatio = {
    
3.  '640': 2.34 / 2,
    
4.  '750': 1,
    
5.  '828': 1.81 / 2
    
6.  }
    

8.  //成
    

10.  const deviceRatio = {
    
11.  '640': 2.34 / 4,
    
12.  '750': 1 / 2,
    
13.  '828': 1.81 / 4
    
14.  } 

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

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

再次执行 npm run build

查看效果

gulpfile.js稍作修改:(根据自己实际目录)

return gulp.src(['miniprogram_npm/@vant/weapp/*/*.wxss'])

.pipe(postcss(processors))

.pipe(gulp.dest('miniprogram_npm/@vant/weapp/'));

评论
载入中...