Technologieaustausch

Miniprogrammerstellung und Projektinitialisierung (npm erstellen und Sass integrieren)

2024-07-12

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

1. Öffnen Sie die WeChat-Entwicklertools

  1. Bestätigen Sie, ob das Applet in der linken Navigationsleiste ausgewählt ist
  2. Klicken Sie auf [+], um ein Miniprogramm zu erstellen
    Fügen Sie hier eine Bildbeschreibung ein

2. Erstellen Sie ein kleines Programm
Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein

3. Initialisierung

  1. Löschen Sie app.wxss und app.js

  2. Entfernen Sie rendererOptions und ComponentFramework und benötigen Sie nicht die neueste Suchmaschine

  3. Lassen Sie die folgenden Dateien
    Fügen Sie hier eine Bildbeschreibung ein
    4. Benutzerdefiniertes Erstellen von npm + Integrieren von Sass

  4. Legen Sie zunächst die Quellcodedatei des Miniprogramms in den neu erstellten Miniprogrammordner ab.
    Fügen Sie hier eine Bildbeschreibung ein

  5. Konfigurieren Sie die Option miniprogramRoot in project.config.json und geben Sie das Verzeichnis des Miniprogramm-Quellcodes an.

  6. Konfigurieren Sie dann Setting.packNpmManually in project.config.json auf true und aktivieren Sie die Möglichkeit, npm mit benutzerdefinierten node_modules- und miniprogram_npm-Speicherorten zu erstellen.

  7. Klicken Sie mit der rechten Maustaste auf das Projekt [Im integrierten Terminal öffnen] und geben Sie [npm init -y] in das Terminal ein, um die Datei package.json zu generieren
    Fügen Sie hier eine Bildbeschreibung ein

  8. Konfigurieren Sie abschließend das Element „setting.packNpmRelationList“ von project.config.json und geben Sie die Speicherorte von packageJsonPath und miniprogramNpmDistDir an.

  9. Datei project.config.json geändert

{
  "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