小程序配置文件 —— 16 项目配置文件和配置 sass

目录

项目配置文件

在创建项目的时候,每个项目的根目录生成两个 config.json 文件(project.config.json 和 project.private.config.json ),用于保存开发者在工具上做的个性化配置,例如和编译有关的配置。当重新安装微信开发者工具或者换电脑工作时,只要载入同一个项目的代码包,开发者工具就会自动恢复到当时开发项目时的个性化配置;

为什么微信开发者工具要提供两个 project.config.json 呢?因为在团队开发中,A 同学需要进行个性化的配置,B 同学也需要进行个性化的配置,如果我们项目中只有一个 project.config.json 文件,这时候两个人的改动都会同步到同一个 json 文件中,这时候就容易产生冲突,影响团队开发。为了解决这个问题,微信开发者工具提供了两个 config.json 文件,这两个 config.json 文件都可以对项目进行配置,只不过它们的使用场景是不一样的:

  • project.config.json:项目配置文件,常用来配置公共的配置;
  • project.private.config.json:项目私有的配置,常用来配置个人的配置;

注意事项:

  • project.private.config.json 写到 .gitignore 避免版本管理的冲突;
  • 与最终编译结果有关的设置必须设置到 project.config.json 中;

具体的项目配置文件用法可以参考官方文档,下面我们打开微信开发者工具来演示一下具体使用:

先打开根目录下的 project.private.config.json 和 project.config.json 两个文件,如果需要进行项目的设置, 需要点击右上角的【详情】按钮,然后点击【本地设置】,在【本地设置】中都是对项目进行设置的选项,我们挑一些进行说明:

  • 将 JS 编译成 ES5:在开发项目的时候,有可能会编写一些新版本的 JS 代码,考虑到兼容性问题,我们需要将一些新版本的 JS 代码转换为 ES5 代码,我们可以把 【将 JS 编译成 ES5】复选框勾选上就能进行编译;当我们勾选这个选项时,它会把代码编译为 ES5 格式,会影响最终编译,当我们对这个属性进行修改之后,属性值会保存在 project.config.json 文件中,而不是 project.private.config.json 文件;
  • 不校验合法域名:是否对项目的接口地址进行验证,它不会影响项目的编译,所以切换属性之后不会影响项目,所以对这个属性的修改会保存到 project.private.config.json 文件中;

配置 sass

sass 用于编写 css 样式,会影响项目的最终编译,因此需要填写在 project.config.json 文件中,在 project.config.json 文件的 setting 字段中添加一个新的属性:"useCompilerPlugins": [ "sass" ];

点击保存之后,我们需要将页面文件夹中以 .wxss 后缀结尾的文件修改为以 .scss 结尾,比如在 cate 页面文件夹中,将 cate.wxss 修改为 cate.scss,如下:

将 .wxss 文件修改为 .scss 之后,在 cate.scss 文件中添加样式数据,将 text 的样式进行修改,修改后保存,并重新进入 cate 分类页面,可以发现文字变红了:

参考视频:尚硅谷微信小程序开发教程

相关推荐
lpfasd1234 小时前
node-sass 停止维护!老项目迁移 Dart Sass 完整教程
前端·rust·sass
Data analyse4566 小时前
rnweb 回放数据量太大怎么办?分片存储与断点续传的实现思路
前端·网络·算法·数据分析
xiaogai_gai6 小时前
金蝶收料通知单查询策略实战教程:从源系统拉取到中间层落地的完整路径
java·前端·数据库
环境栈笔记7 小时前
指纹浏览器 WebRTC 怎么设置?从 ICE 候选、代理出口到功能验证
前端·人工智能·后端·自动化
赵大仁8 小时前
官网性能优化实战:LCP 3.2s → 2.1s、CLS 0.107 → 0,以及被我推翻的 6 个判断
前端·性能优化·cls·lcp·core web vitals
xiancai_xianyu8 小时前
Text2SQL落地生产库前,SQL要过哪三道闸
前端·数据库·sql·sql注入·text2sql·ai agent开发·企业级ai框架
小羊没烦恼!8 小时前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
史瓦辛格8 小时前
给 DeepSeek Harness 写费用插件:把「这次会话花了多少钱」算准
前端·deepseek
星光不问赶路人8 小时前
Vue 3 + TypeScript 中 enum 的使用实践
前端·vue.js
鸥梨菌Honevid8 小时前
UVM 中 REQ 和 RSP 类型详解:从通信模型到 item_done 与 put_response
java·前端·servlet