当前位置: 首页> 财经> 产业 > 小程序创建与项目初始化(构建 npm + 集成 Sass)

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

时间:2025/7/9 6:18:34来源:https://blog.csdn.net/weixin_44166849/article/details/140369983 浏览次数:0次

一、打开微信开发者工具

  1. 确认 左侧导航栏是否选中的 小程序
  2. 点击 【+】创建小程序
    在这里插入图片描述

二、创建小程序
在这里插入图片描述
在这里插入图片描述

三、初始化

  1. 清空 app.wxss、app.js

  2. 去掉 rendererOptions 和 componentFramework 不需要最新的搜索引擎

  3. 留下以下文件
    在这里插入图片描述
    四、自定义构建 npm + 集成 Sass

  4. 首先 先把小程序源码文件 放到 新建的 miniprogram 文件夹下
    在这里插入图片描述

  5. 在 project.config.json 配置 miniprogramRoot 选项,指定小程序源码的目录

  6. 然后配置 project.config.json 的 setting.packNpmManually 为 true,开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式

  7. 在项目右键 点击 【在内建终端中打开】在终端中 输入 【npm init -y】生成package.json 文件
    在这里插入图片描述

  8. 最后配置project.config.json 的 setting.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/"
}
关键字:小程序创建与项目初始化(构建 npm + 集成 Sass)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: