Teknologian jakaminen

Miniohjelman luominen ja projektin alustus (koonti npm ja integroi Sass)

2024-07-12

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

1. Avaa WeChat-kehittäjätyökalut

  1. Tarkista, onko sovelma valittu vasemmasta navigointipalkista
  2. Luo miniohjelma napsauttamalla [+]
    Lisää kuvan kuvaus tähän

2. Luo pieni ohjelma
Lisää kuvan kuvaus tähän
Lisää kuvan kuvaus tähän

3. Alustus

  1. Tyhjennä app.wxss, app.js

  2. Poista rendererOptions ja componentFramework äläkä vaadi uusinta hakukonetta

  3. Jätä seuraavat tiedostot
    Lisää kuvan kuvaus tähän
    4. Custom build npm + integroi Sass

  4. Aseta ensin miniohjelman lähdekooditiedosto äskettäin luotuun miniohjelmakansioon.
    Lisää kuvan kuvaus tähän

  5. Määritä miniprogramRoot-asetus tiedostossa project.config.json ja määritä miniohjelman lähdekoodin hakemisto.

  6. Määritä sitten asetus.packNpmManually tiedostossa project.config.json arvoon true ja ota käyttöön tapa rakentaa npm mukautetuilla node_modules- ja miniprogram_npm-sijainneilla.

  7. Napsauta hiiren kakkospainikkeella projektia [Avaa sisäänrakennetussa terminaalissa] ja kirjoita terminaaliin [npm init -y] luodaksesi package.json-tiedoston
    Lisää kuvan kuvaus tähän

  8. Määritä lopuksi project.config.json-tiedoston setting.packNpmRelationList-kohde ja määritä pakettien JsonPath ja miniprogramNpmDistDir sijainnit.

  9. Muokattu project.config.json-tiedosto

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