Berbagi teknologi

Pembuatan program mini dan inisialisasi proyek (membangun npm dan mengintegrasikan Sass)

2024-07-12

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

1. Buka alat pengembang WeChat

  1. Konfirmasikan apakah applet dipilih di bilah navigasi kiri
  2. Klik [+] untuk membuat program mini
    Masukkan deskripsi gambar di sini

2. Buatlah program kecil
Masukkan deskripsi gambar di sini
Masukkan deskripsi gambar di sini

3. Inisialisasi

  1. Hapus app.wxss, app.js

  2. Hapus rendererOptions dan componentFramework dan tidak memerlukan mesin pencari terbaru

  3. Tinggalkan file berikut
    Masukkan deskripsi gambar di sini
    4. Pembuatan khusus npm + integrasi Sass

  4. Pertama, masukkan file kode sumber program mini ke dalam folder miniprogram yang baru dibuat.
    Masukkan deskripsi gambar di sini

  5. Konfigurasikan opsi miniprogramRoot di project.config.json dan tentukan direktori kode sumber program mini.

  6. Kemudian konfigurasikan setting.packNpmManually di project.config.json ke true, dan aktifkan cara membangun npm dengan lokasi node_modules dan miniprogram_npm yang disesuaikan.

  7. Klik kanan pada proyek [Buka di terminal bawaan] dan masukkan [npm init -y] di terminal untuk menghasilkan file package.json
    Masukkan deskripsi gambar di sini

  8. Terakhir, konfigurasikan item setting.packNpmRelationList dari project.config.json dan tentukan lokasi packageJsonPath dan miniprogramNpmDistDir.

  9. File project.config.json yang dimodifikasi

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