Maison  >  Article  >  Applet WeChat  >  Comment convertir l'unité de style par défaut px en rpx dans le composant Vant du mini programme

Comment convertir l'unité de style par défaut px en rpx dans le composant Vant du mini programme

青灯夜游
青灯夜游avant
2021-10-29 11:16:403821parcourir

Cet article vous présentera comment convertir px en rpx lors de l'utilisation des composants Vant dans Applet WeChat J'espère qu'il vous sera utile !

Comment convertir l'unité de style par défaut px en rpx dans le composant Vant du mini programme

Lorsque l'applet WeChat utilise une bibliothèque de composants tiers (par exemple : Vant), le style par défaut du composant est px, ce qui n'est pas compatible avec l'unité rpx de notre page. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Solution technique


1.gulp

2.gulp-postcss

3.postcss-px2units

étapes de mise en œuvre

1. Initialisez et installez

npm init //一路回车 
npm install --production 
npm i @vant/weapp -S --production

2. Vérifiez npm dans le mini-outil de développement de programme WeChat

Comment convertir lunité de style par défaut px en rpx dans le composant Vant du mini programme

3. Construisez npm dans le mini-outil de développement de programme WeChat

Comment convertir lunité de style par défaut px en rpx dans le composant Vant du mini programme

4.

Comment convertir lunité de style par défaut px en rpx dans le composant Vant du mini programme

5. Installez le package npm

npm install gulp gulp-postcss postcss-px2units --save-dev

6. Créez un nouveau fichier gulpfile.js dans le répertoire racine

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits =  require('postcss-px2units');

gulp.task('css', function () {
  return gulp.src(['miniprogram_npm/@vant/weapp/**/*.wxss'])
    .pipe(postcss([pxtounits({
      multiple: 2,
      targetUnits: 'rpx'
    })]))
    .pipe(gulp.dest('miniprogram_npm/@vant/weapp/'));
});

7. Ajoutez une commande d'exécution aux scripts sous package.json

 "scripts": {
    "build": "gulp css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

8. ligne de commande

npm run build

9. Affichez le fichier wxss converti

Comment convertir lunité de style par défaut px en rpx dans le composant Vant du mini programme

À ce stade, px a été converti en rpx, et vous avez terminé ! ! !

Pour plus de connaissances sur la programmation, veuillez visiter : Apprendre la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer