微信小程序全局配置

这篇具有很好参考价值的文章主要介绍了微信小程序全局配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
① pages
记录当前小程序所有页面的存放路径
window
全局设置小程序窗口的外观
tabBar
设置小程序底部的 tabBar 效果
④ style
是否启用新版的组件样式

全局配置 - window

  • 小程序窗口的组成部分

微信小程序全局配置,微信小程序开发,微信小程序,小程序

  • 了解 window 节点常用的配置项

微信小程序全局配置,微信小程序开发,微信小程序,小程序

  • 设置导航栏的标题 

 设置步骤:app.json -> window -> navigationBarTitleText 需求:把导航栏上的标题,从默认的 “WeChat”修改为“黑马程序员”,效果如图所示:

微信小程序全局配置,微信小程序开发,微信小程序,小程序

  • 设置导航栏的背景色 

设置步骤:app.json -> window -> navigationBarBackgroundColor 需求:把导航栏标题的背景色,从默认的 #fff 修改为 #2b4b6b ,效果如图所示: 

微信小程序全局配置,微信小程序开发,微信小程序,小程序

  • 设置导航栏的标题颜色 

设置步骤:app.json -> window -> navigationBarTextStyle 需求:把导航栏上的标题颜色,从默认的 black 修改为 white ,效果如图所示: 

微信小程序全局配置,微信小程序开发,微信小程序,小程序

注意: navigationBarTextStyle 的可选值只有 black 和 white 

  •  全局开启下拉刷新功能

概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 设置步骤:app.json -> window -> 把 enablePullDownRefresh 的值设置为 true 注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

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

当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为: app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。效果如下:

微信小程序全局配置,微信小程序开发,微信小程序,小程序

注意:真机测试时,下拉窗口不会自动关闭,需要结合wx.stopPullDownRefresh()关闭刷新

  • 设置下拉刷新时 loading 的样式 

当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下:

微信小程序全局配置,微信小程序开发,微信小程序,小程序

注意: backgroundTextStyle 的可选值只有 light 和 dark 

  •  设置上拉触底的距离

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。 设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值 注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

全局配置 - tabBar

  • 什么是 tabBar 

tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为: 底部 tabBar 顶部 tabBar 注意: tabBar中只能配置最少 2 个、最多 5 个 tab 页签 当渲染顶部 tabBar 时,不显示 icon,只显示文本

 微信小程序全局配置,微信小程序开发,微信小程序,小程序微信小程序全局配置,微信小程序开发,微信小程序,小程序

  • tabBar 的 6 个组成部分 

  1.  backgroundColor:tabBar 的背景色  
  2. selectedIconPath:选中时的图片路径  
  3. borderStyle:tabBar 上边框的颜色  
  4. iconPath:未选中时的图片路径  
  5. selectedColor:tab 上的文字选中时的颜色  
  6. color:tab 上文字的默认(未选中)颜色 

微信小程序全局配置,微信小程序开发,微信小程序,小程序

  • tabBar 节点的配置项 

微信小程序全局配置,微信小程序开发,微信小程序,小程序

  • 每个 tab 项的配置选项 

微信小程序全局配置,微信小程序开发,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-854443.html

到了这里,关于微信小程序全局配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序全局配置

    小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下: ① pages 记录当前小程序所有页面的存放路径 ② window 全局设置小程序窗口的外观 ③ tabBar 设置小程序底部的 tabBar 效果 ④ style 是否启用新版的组件样式  设置步骤:app.json - window - navigationBarTitle

    2024年04月17日
    浏览(36)
  • 微信小程序全局配置详解

    登录网址 https://mp.weixin.qq.com/ 注册网址 https://mp.weixin.qq.com/cgi-bin/wx?token=lang=zh_CN 下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 描述整体的app app.js 小程序逻辑 app.json 小程序公共配置 app.wxss 小程序公共样式表 描述各自页面的page 为了方便开发者减少配置项,

    2024年02月13日
    浏览(45)
  • 微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(53)
  • 微信小程序-----全局配置与页面配置

    目录 前言 全局配置文件 一、window 1. 小程序窗口的组成部分 2. window 节点常用的配置项 3. 设置导航栏的标题  4. 设置导航栏的背景色  5. 设置导航栏的标题颜色 6. 全局开启下拉刷新功能 7. 设置下拉刷新时窗口的背景色 8. 设置下拉刷新时 loading 的样式 9. 设置上拉触底的距离

    2024年01月17日
    浏览(45)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(61)
  • 微信小程序学习—配置HBuilder运行微信小程

    第一次接触微信小程序开发。在网上找了个项目想要运行,遇到了一些问题,记录一下运行的问题,以及解决方式,供大家参考。 遇到的报错  于是上网搜索结果 第一步 在微信小程序中打开 设置—安全设置 打开服务端口 但是我还是报错 第二步 检查HBuilder中的微信小程序运

    2024年02月13日
    浏览(54)
  • 【微信小程序开发零基础入门】——微信小程序入门

    学习小程序跟学习网页开发有什么不同 1.如何创建微信小程序项目 1.1 注册、登录、复制appId 注册:在 https://mp.weixin.qq.com/cgi-bin/wx 进行注册微信小程序开发账号 登录:在 https://mp.weixin.qq.com 登录小程序账号 复制appId: 在 \\\"开发\\\" 的 \\\"开发管理\\\" 的 \\\"开发设置\\\" 的 \\\"开发者ID\\\"中 1.2 下

    2024年02月03日
    浏览(60)
  • 微信小程序 样式和全局配置

    wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配 推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数 导入外部样式表  样式  权重一样时,局部样式可以覆盖全局样式 导航栏区域 navigationBar 背景区域 backgroud 页面主体区域 可以配置【导

    2024年02月07日
    浏览(50)
  • 微信小程序(三)页面配置与全局配置

    注释很详细,直接上代码 上一篇 新增内容: 页面导航栏的属性配置 全局页面注册配置 全局导航栏配置 样式版本 源码: (标准的json是不能加注释的,但为了方便理解咱做个违背标准的决定) 页面: index.json 效果演示: 全局: app.json 效果演示: 这里有小伙伴问了,我就只用

    2024年02月02日
    浏览(40)
  • 微信小程序开发入门与实战 ①(初始微信小程序)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 微信小程序专栏🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀 🔗: 阅读文章 👉 微信小程序 (🔥)

    2024年02月09日
    浏览(107)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包