小程序页面配置文件

2020-12-18 16:00:00  阅读 2207 次 评论 7 条
领券购物省钱,分享好友返佣

小程序-页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

文件内容为一个 JSON 对象,有以下属性:

配置项

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring
导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。参见注 1。
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为px。
详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。
只在页面配置中有效,无法在 app.json 中设置
usingComponentsObject页面自定义组件配置
initialRenderingCachestring
页面初始渲染缓存配置
stylestringdefault启用新版的组件样式
singlePageObject单页模式相关配置

页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,

所以无需写 window 这个属性。

  • 注 1:关于navigationStyle

    • iOS/Android 客户端 7.0.0 以下版本,

      navigationStyle 只在 app.json 中生效。

    • iOS/Android 客户端 6.7.2 版本开始,

      navigationStyle: custom 对 web-view 组件无效

    • 开启 custom 后,低版本客户端需要做好兼容。

      发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉

    • Windows 客户端 3.0 及以上版本,

      为了给用户提供更符合桌面软件的使用体验,

      统一了小程序窗口的导航栏,navigationStyle: custom 不再生效

singlePage

基础库 2.11.3 及以上版本支持,目前分享到朋友圈 (Beta) 后打开会进入单页模式

单页模式相关配置

属性类型必填默认值描述
navigationBarFitString默认自动调整,若原页面是自定义导航栏,则为 float,否则为 squeezed导航栏与页面的相交状态,值为 float 时表示导航栏浮在页面上,与页面相交;值为 squeezed 时表示页面被导航栏挤压,与页面不相交

配置示例

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"}


领券购物省钱,分享好友返佣

本文链接:https://qq8652.cn/post/30.html 转载请注明出处!

分享到:
本文地址:https://qq8652.cn/post/30.html
版权声明:本文为原创文章,版权归 自在 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. tsSLAueP
    tsSLAueP  @回复

    1

  2. CpjJwWHV
    CpjJwWHV  @回复

    1

  3. iMJMJ
    iMJMJ  @回复

    很给力!!!!!

  4. 香水香精
    香水香精  @回复

    赞。。。。。。

  5. 亚马逊跨境电商运营宝典
    亚马逊跨境电商运营宝典  @回复

    赞一个。。。。。。