微信小程序各个JSON配置文件的作用

JSON配置文件的作用

JSON是一种数据格式,在实际开发中,JSON总是以配置文件的形式出现,小程序项目中也不例外,通过不同的.json配置文件,可以对小程序项目进行不同级别的配置

小程序项目中有四种配置文件,分别是:


image.png

1.项目根目录中的app.json(小程序项目的全局配置文件)

app.json是当前小程序的\color{red}{全局配置},包括了小程序的\color{red}{所有页面路径}\color{red}{窗口外观}\color{red}{界面表现}\color{red}{底部tab}

在当前的项目里app.json配置内容如下:

\color{blue}{四个配置项的作用}
\color{blue}{1.pages:用来记录当前小程序所有页面的路径}

image.png

如何创建页面?
  • 只需要在app.json -->pages中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件


    image.png

    [图片上传中...(image.png-313637-1658473318263-0)]

如何修改项目展示的首页?
  • 只需要调整app.json->pages 数组中页面路径的排列顺序,即可修改项目的首页。小程序会把排在第一位的页面,当做项目首页进行渲染
    image.png

\color{blue}{2.window: 全局定义小程序所有页面的背景色}

image.png

\color{blue}{3.style:全局定义小程序所使用的样式版本,默认使用当前最新的版本}
简单来说style就是决定当前页面所使用样式的版本,v2:代表的就是最新版(如果想使用旧版本,删除style即可)
\color{blue}{4.sitemapLocation:用来指明sitemap.json的位置}
image.png

2.项目根目录中的project.config.json配置文件(项目的配置文件)

project.config.json是项目配置文件,用来记录我们对小程序开发工具所作的个性化配置,例如:

  • \color{green}{1.setting中保存了编译相关的配置}

    image.png

  • 我们在详情中对本地设置的更改,最终都体现在了project.config.json中的setting代码里

    image.png

  • \color{green}{2.projectname中保存的式项目名称}

    image.png

小程序名需要在小程序管理后台中设置

image.png
  • \color{green}{3.appid 中保存的式小程序的账号id}
    (这个id是唯一的,如果以后要将别人的小程序项目在自己的电脑上运行的话,就需要将project.config.js下的app.id改成自己的,这样就不会有太多的报错)
    image.png

3.项目根目录中的默认配置的sitemap.json配置文件( 用来配置小程序及其页面是否允许被微信索引)

image.png

image.png

4.\color{orange}{每个页面文件夹中的.json配置文件}(当前页面的配置文件,配置窗口的外观,表现等)

image.png
小程序中的每一个页面,都可以使用.json文件来对\color{red}{本页面的窗口外观进行配置,页面中的配置项会覆盖App.json的window中相同的配置项}

如果页面中的配置与wiondow中的配置冲突,那么会以页面中的配置为准。


image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容