小程序开发指南之全局配置

目录
  • 全局配置文件及常用的配置项
  • window
    • 小程序窗口的组成部分
    • window 常用配置项
    • 设置导航栏的标题
    • 设置导航栏的背景色
    • 设置导航栏标题颜色
    • 全局开启下拉刷新(在 app.json 中启用下拉刷新功能,会作用于每个小程序页面)
    • 设置下拉刷新时窗口的背景色
    • 设置下拉刷新时 loading 的样式
    • 设置上拉触底的距离
  • tabBar
    • 什么是tabBar
    • tabBar 的 6 个部分
    • tabBar 常用配置项
  • 页面配置文件
    • 页面配置文件的作用
    • 页面配置和全局配置的关系
    • 页面配置中常用的配置项
  • 总结

全局配置文件及常用的配置项

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置如下:

  • pages:记录当前小程序所有页面的存放路径
  • window:全局设置小程序窗口的外观
  • tabBar:设置小程序底部的 tabBar 效果
  • style:是否启用新版的组件样式

window

小程序窗口的组成部分

window 常用配置项

属性名 类型 默认值 说明
navigationBarTitleText String 字符串 导航栏标题文字内容
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色,仅支持black/white
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉loading的样式,仅支持dark/light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部的距离,单位为px

设置导航栏的标题

app.json -> window -> navigationBarTitleText

设置导航栏的背景色

app.json -> window -> navigationBarBackgroundColor

设置导航栏标题颜色

app.json -> window -> enablePullDownRefresh

全局开启下拉刷新(在 app.json 中启用下拉刷新功能,会作用于每个小程序页面)

下拉刷新:通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为

app.json -> window -> enablePullDownRefresh

设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能后,默认的窗口背景为白色。设置自定义下拉刷新窗口背景色

app.json -> window -> backgroundColor

设置下拉刷新时 loading 的样式

当全局开启下拉刷新功能后,默认的窗口的 loading 为白色。设置 loading 样式的效果

app.json -> window -> backgroundTextStyle

设置上拉触底的距离

上拉触底:通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为

app.json -> window -> onReachBottomDistance

tabBar

什么是tabBar

  • tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换,小程序中将其分为俩种:

    • 底部 tabBar
    • 顶部 tabBar
  • 注意:
    • tabBar 中只能配置最少2个,最多5个 tab 页签
    • 当渲染顶部 tabBar 时,不显示 icon,只显示文本

tabBar 的 6 个部分

tabBar 常用配置项

  • tabBar 组件的配置项

    属性 类型 必填 默认值 说明
    position String bottom tabBar 的位置,仅支持 bottom 
    borderStyle String black tabbar 上边框的颜色, 仅支持 black / white
    color HexColor   tabBar上文字的默认颜色(未选中)
    selectedColor HexColor   tabBar选中时文字的默认颜色
    backgroundColor HexColor   tabBar的背景色
    list Array   tabBar的页签列表,最少2个,最多5个
  • 每个 tab 项的配置选项
    属性 类型 必填 说明
    pagePath String 页面路径,必须在 pages 中先定义
    text String tab 上按钮文字
    iconPath String 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片
    selectedIconPath String 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片

页面配置文件

页面配置文件的作用

小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置

页面配置和全局配置的关系

  • 小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现
  • 对小程序中某个页面想要拥有特殊的窗口表现,此时需要对页面级别的 .json 文件进行修改
  • 注意:

    当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准

页面配置中常用的配置项

属性 类型 默认值 说明
navigationBarBackgroundColor HexColor #000000 当前导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white
navigationBarTitleText String   当前导航栏标题文字内容
backgroundColor HexColor #ffffff 当前窗口的背景色
backgroundTextStyle String dark 当前页面下拉loading的样式,仅支持dark/light
enablePullDownRefresh Boolean false 是否为当前页面开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px

总结

到此这篇关于小程序开发指南之全局配置的文章就介绍到这了,更多相关小程序全局配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序 开发之全局配置

    一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 注意在.json不能注释,否则会出错. 二.工具栏tabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. tabBar 是一个数组,只能配置最少2个.最多5个 tab,tab 按数组的顺序排序 app.js

  • 小程序开发指南之全局配置

    目录 全局配置文件及常用的配置项 window 小程序窗口的组成部分 window 常用配置项 设置导航栏的标题 设置导航栏的背景色 设置导航栏标题颜色 全局开启下拉刷新(在 app.json 中启用下拉刷新功能,会作用于每个小程序页面) 设置下拉刷新时窗口的背景色 设置下拉刷新时 loading 的样式 设置上拉触底的距离 tabBar 什么是tabBar tabBar 的 6 个部分 tabBar 常用配置项 页面配置文件 页面配置文件的作用 页面配置和全局配置的关系 页面配置中常用的配置项

  • 微信小程序 开发指南详解

    编写代码 创建小程序实例 点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. ​ app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的

  • 微信小程序开发指南之图片压缩解决方案

    目录 前言: 问题:现有的压缩方案支付宝小程序不生效 解决方案: 核心代码展示: 附:微信小程序图片压缩(支持多张图) 小结: 前言: 由于公司业务拓展,急需基于uniapp生成支付宝小程序.之前已经成功将微信小程序和H5融合成一套码,故得知此需求的时候,笔者信心十足,但是本着实践出真知的想法,觉得还是得先调研一下uniapp在支付宝小程序的兼容性,并集成已有项目主体关键功能,为后续的技术调研方案做准备.在调研过程中,发现之前封装好的图片压缩方法在支付宝小程序上无法正常使用,重新阅读了官方文档后

  • 微信小程序开发之全局配置与页面配置实现

    目录 一.全局配置 (1)小程序窗口的组成部分 (2)导航栏  navigationBar (3)下拉刷新页面 (4)上拉触底的距离 (5)底部导航栏 tabBar (6)图标的获取 二.页面配置 (1)概念 (2)页面配置与全局配置的关系 (3)常用配置项 三.综合案例 一.全局配置 app.json文件就是项目的全局配置文件 (1)小程序窗口的组成部分 (2)导航栏  navigationBar 1)window节点常用配置项 2)设置导航栏 设置导航栏标题文字 app.json-->win

  • 小程序开发调用微信支付以及微信回调地址配置

    目录 支付接口 签名工具类,以及时间戳方法 回调接口 首先观看微信提供的文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1 清楚调用微信支付必须传递的参数 因为微信提供了小程序唤起微信支付的方法,后端只需要传递对应的参数给前端即可 首先在程序中配置申请的固定参数 wx.open.app_id=用户的appid wx.open.app_secret=这是做登陆用的 weixin.pay.part

  • 微信小程序开发实战快速入门教程

    目录 注册微信小程序 微信开发者工具 第一个小程序 新建项目 项目目录结构 目标成果 步骤分解 页头页尾 个人中心 生活指南 模拟弹窗 预览图片 注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册.注册的账号类型可以是订阅号.服务号.小程序以及企业微信,我们选择 “小程序” 即可. 接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册.未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序. 激活邮箱之后,选择主体类型为

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • 微信小程序开发之入门实例教程篇

    前言 近日,在工作闲暇之余,阅读了一些关于微信小程序的文章,忍不住,想动手试他一试.本文就以"我的第一个微信小程序"为例,简单的介绍下,微信小程序的入门级用法. 一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击"开发者设置". 3.会获得一个AppID,记录AppID,后面创建项

  • 微信小程序 开发中遇到问题总结

    微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function(){ let that = this; wx.request({ url: 'https://a.com/url.php', method: 'GET', success: function(e){ that.data = 123; } }) }; }) //conte

  • 详解微信小程序开发(项目从零开始)

    一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好).好了废话不多说,看目录. 注: 小程序是一套特殊的东西,融合了原生和web端.他是一个不完整的浏览器对象,所以很多DOM . BOM 的东西无法使用,但是他又通过微信APP实现了多线程. 二.如何创建小程序 很简单,首先下载微信开发者工具,下载稳定版本的就好. 下载 然后,创建小程序,可以参考下述图

随机推荐