Condivisione della tecnologia

Creazione mini programma e inizializzazione progetto (build npm e integrazione Sass)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Apri gli strumenti per sviluppatori WeChat

  1. Conferma se l'applet è selezionata nella barra di navigazione sinistra
  2. Fare clic su [+] per creare un mini programma
    Inserisci qui la descrizione dell'immagine

2. Crea un piccolo programma
Inserisci qui la descrizione dell'immagine
Inserisci qui la descrizione dell'immagine

3. Inizializzazione

  1. Cancella app.wxss, app.js

  2. Rimuovi rendererOptions e componenteFramework e non richiede il motore di ricerca più recente

  3. Lasciare i seguenti file
    Inserisci qui la descrizione dell'immagine
    4. Creazione personalizzata npm + integrazione Sass

  4. Per prima cosa, inserisci il file del codice sorgente del miniprogramma nella cartella miniprogramma appena creata.
    Inserisci qui la descrizione dell'immagine

  5. Configura l'opzione miniprogramRoot in project.config.json e specifica la directory del codice sorgente del mini programma.

  6. Quindi configura setting.packNpmManually in project.config.json su true e abilita la modalità di creazione di npm con posizioni node_modules e miniprogram_npm personalizzate.

  7. Fare clic con il tasto destro del mouse sul progetto [Apri nel terminale integrato] e immettere [npm init -y] nel terminale per generare il file package.json
    Inserisci qui la descrizione dell'immagine

  8. Infine, configura l'elemento setting.packNpmRelationList di project.config.json e specifica le posizioni di packageJsonPath e miniprogramNpmDistDir.

  9. File project.config.json modificato

{
  "compileType": "miniprogram",
  "libVersion": "trial",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "miniprogramRoot": "miniprogram/",
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "/package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ],
    "useCompilerPlugins": [
      "sass"
    ],
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "auto",
    "tabSize": 2
  },
  "appid": "wx34f339ffd16a69e5",
  "srcMiniprogramRoot": "miniprogram/"
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39