기술나눔

미니 프로그램 생성 및 프로젝트 초기화(npm 빌드 및 Sass 통합)

2024-07-12

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

1. WeChat 개발자 도구 열기

  1. 왼쪽 네비게이션 바에서 미니 프로그램이 선택되어 있는지 확인하세요
  2. [+]를 클릭하면 미니 프로그램이 생성됩니다.
    여기에 이미지 설명을 삽입하세요.

2. 작은 프로그램 만들기
여기에 이미지 설명을 삽입하세요.
여기에 이미지 설명을 삽입하세요.

3. 초기화

  1. app.wxss, app.js 지우기

  2. rendererOptions 및 componentFramework를 제거하고 최신 검색 엔진이 필요하지 않습니다.

  3. 다음 파일을 남겨주세요
    여기에 이미지 설명을 삽입하세요.
    4. npm 맞춤 빌드 + Sass 통합

  4. 먼저 새로 생성된 미니프로그램 폴더에 미니프로그램 소스코드 파일을 넣어주세요.
    여기에 이미지 설명을 삽입하세요.

  5. project.config.json에서 miniprogramRoot 옵션을 구성하고 미니 프로그램 소스 코드의 디렉터리를 지정합니다.

  6. 그런 다음 project.config.json에서 settings.packNpmManually를 true로 구성하고 사용자 정의된 node_modules 및 miniprogram_npm 위치로 npm을 빌드하는 방법을 활성화합니다.

  7. 프로젝트 [내장 터미널에서 열기]를 마우스 오른쪽 버튼으로 클릭하고 터미널에 [npm init -y]를 입력하여 package.json 파일을 생성합니다.
    여기에 이미지 설명을 삽입하세요.

  8. 마지막으로 project.config.json의 settings.packNpmRelationList 항목을 구성하고 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