Обмен технологиями

Создание мини-программы и инициализация проекта (сборка npm и интеграция Sass)

2024-07-12

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

1. Откройте инструменты разработчика WeChat.

  1. Подтвердите, выбрана ли мини-программа на левой панели навигации.
  2. Нажмите [+], чтобы создать мини-программу.
    Вставьте сюда описание изображения

2. Создайте небольшую программу
Вставьте сюда описание изображения
Вставьте сюда описание изображения

3. Инициализация

  1. Очистить app.wxss, app.js

  2. Удалите rendererOptions и компонентFramework и не требуйте последней версии поисковой системы.

  3. Оставьте следующие файлы
    Вставьте сюда описание изображения
    4. Собственная сборка npm + интеграция Sass

  4. Сначала поместите файл исходного кода мини-программы во вновь созданную папку мини-программы.
    Вставьте сюда описание изображения

  5. Настройте параметр miniprogramRoot в project.config.json и укажите каталог исходного кода мини-программы.

  6. Затем установите для параметра settings.packNpmManually в project.config.json значение true и включите способ сборки npm с настраиваемыми местоположениями node_modules и miniprogram_npm.

  7. Щелкните правой кнопкой мыши проект [Открыть во встроенном терминале] и введите [npm init -y] в терминале, чтобы сгенерировать файл package.json.
    Вставьте сюда описание изображения

  8. Наконец, настройте элемент settings.packNpmRelationList файла project.config.json и укажите расположение packageJsonPath и miniprogramNpmDistDir.

  9. Измененный файл project.config.json.

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