小程序创建与项目初始化(构建 npm + 集成 Sass)

白臻2024-07-13 9:14

一、打开微信开发者工具

确认左侧导航栏是否选中的小程序
点击【+】创建小程序

二、创建小程序

三、初始化

清空 app.wxss、app.js
去掉 rendererOptions 和 componentFramework 不需要最新的搜索引擎
留下以下文件

四、自定义构建 npm + 集成 Sass
首先先把小程序源码文件放到新建的 miniprogram 文件夹下
在 project.config.json 配置 miniprogramRoot 选项，指定小程序源码的目录
然后配置 project.config.json 的 setting.packNpmManually 为 true，开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式
在项目右键点击【在内建终端中打开】在终端中输入【npm init -y】生成package.json 文件
最后配置project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置
修改后的 project.config.json 文件

javascript 复制代码

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