当前位置:   article > 正文

微信小程序开发系列(四)·小程序配置文件详细介绍·pages配置以及window配置_小程序开发 pages

小程序开发 pages

微信小程序开发_时光の尘的博客-CSDN博客

目录

1.  配置文件简介

2.  全局配置-pages配置

2.1  页面路由不需要写文件后缀,框架会自动去寻找对应位置的四个文件进行处理

2.2  小程序中新增/减少页面,都需要对 pages 数组进行修改

2.3  未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)

3.  全局配置-window配置


1.  配置文件简介

        JSON是一种轻量级的数据格式,常用于前后端数据的交互,但是在小程序中, JSON扮演的配置项的角色,用于配置项目或者页面属性和行为,每个页面或组件也都有一个对应的 json 文件。

小程序中常见的配置文件有以下几种:

①  app.json:小程序全局配置文件,用于配置小程序的一些全局属性和页面路由。

②  页面.json:小程序页面配置文件,也称局部配置文件,用于配置当前页面的窗口样式、页面标题等。

③  project.config.json:小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置。

④  sitemap.json:配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率。

2.  全局配置-pages配置

pages 字段:用来指定小程序由哪些页面组成,用于让小程序知道由哪些页面组成以及页面定义在哪个目录,每一项都对应一个页面的路径信息。

在配置 pages 字段时,有以下注意事项:

2.1  页面路由不需要写文件后缀,框架会自动去寻找对应位置的四个文件进行处理

参考:

零基础手把手教你创建微信小程序(三)·微信小程序页面的创建、小程序如何更改调试基础库-CSDN博客

2.2  小程序中新增/减少页面,都需要对 pages 数组进行修改

        例如此时若是只是删除“project”文件夹,而不对"pages/project/project"进行删除,那么此时我们点击保存会发现,“project”文件会再次出现,只有将"pages/project/project"进行删除,才能彻底删除“project”文件。

2.3  未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)

        若想指定可加入  "entryPagePath": "pages/project/project",其中“pages/project/project”为自定义的路径,根据自己路径进行修改。

3.  全局配置-window配置

        window字段:用于设置小程序的状态栏、导航条、标题、窗口背景色。

更多配置可以查看微信小程序官方文档:

小程序配置 / 全局配置 (qq.com)

也可在微信开发者工具找到“开发者文档”点击查找:

一些相关属性介绍:

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题、状态栏颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。
iOS/Android 微信客户端 6.6.0,Windows 微信客户端不支持
homeButtonbooleandefault在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键微信客户端 8.0.24
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为 px。
详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)
restartStrategystringhomePage重新启动策略配置2.8.0
initialRenderingCachestring页面初始渲染缓存配置,支持 static / dynamic2.11.1
visualEffectInBackgroundstringnone切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none2.15.0
handleWebviewPreloadstringstatic控制预加载下个页面的时机。支持 static / manual / auto2.15.0

根据上表,我们可以对界面进行一个简单的配置:

  1. "navigationBarTitleText": "慕尚花坊",
  2. "navigationBarBackgroundColor": "#f3514f",
  3. "enablePullDownRefresh": true,
  4. "backgroundColor": "#efefef",
  5. "backgroundTextStyle":"dark"

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/659617
推荐阅读
相关标签
  

闽ICP备14008679号