Technology Sharing

Mini-app creation and project initialization (building npm and integrating Sass)

2024-07-12

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

1. Open WeChat Developer Tools

  1. Confirm whether the mini program is selected in the left navigation bar
  2. Click [+] to create a mini program
    insert image description here

2. Create a Mini Program
insert image description here
insert image description here

3. Initialization

  1. Clear app.wxss and app.js

  2. Remove rendererOptions and componentFramework. No need for the latest search engine.

  3. Leave the following files
    insert image description here
    4. Custom build npm + integrated Sass

  4. First, put the miniprogram source code file into the newly created miniprogram folder
    insert image description here

  5. Configure the miniprogramRoot option in project.config.json to specify the directory of the miniprogram source code

  6. Then configure setting.packNpmManually in project.config.json to true to enable the npm build method with custom node_modules and miniprogram_npm locations.

  7. Right-click on the project and click [Open in built-in terminal] Enter [npm init -y] in the terminal to generate the package.json file
    insert image description here

  8. Finally, configure the setting.packNpmRelationList item in project.config.json to specify the location of packageJsonPath and miniprogramNpmDistDir

  9. Modified project.config.json file

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