微信小程序案例2-3:婚礼邀请函

文章目录

一、运行效果

  • "婚礼邀请函"微信小程序由4个页面组成,分别是"邀请函"页面、"照片"页面、"美好时光"页面和"宾客信息"页面。每个页面顶部的导航栏和底部的标签栏是公共部分,在每个页面中都会出现;页面中间的部分是页面内容,每个页面的内容都不同。

  • "邀请函"页面

  • "照片"页面

  • "美好时光"页面

  • "宾客信息"页面

二、知识储备

(一)导航栏设置

  • 目标:掌握导航栏的配置方法,能够完成导航栏标题颜色、背景颜色等页面效果的设置
  • 在微信小程序中,有时为了页面美观,需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。

1、导航栏的相关配置项

配置项 类型 说明
navigationBarTitleText string 导航栏标题文字内容,默认值为""
navigationBarBackgroundColor HexColor 导航栏背景颜色,默认值为#000000
navigationBarTextStyle string 导航栏标题颜色,仅支持black和white,默认值为white

2、利用导航栏组件

  • 创建项目时"不使用模板",可以通过navigation-bar组件来设置导航栏

  • 单击【确定】按钮

  • 修改navigation-bar的属性值,再查看导航栏效果

  • 删除navigation-bar元素

  • 查看app.json

  • 删除四个属性:rendererrendererOptionscomponentFramelazyCodeLoading

  • 修改window里的navigationStyle属性值:default

  • 这样处理之后,就可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。

2、在页面配置文件中对导航栏进行配置

  • pages/index/index.json页面配置文件为例,设置导航栏背景色、文本样式和标题文本
  • 删除三行属性设置代码,查看导航栏效果

3、在全局配置文件中对导航栏进行配置

  • 在全局配置文件app.json中,通过window配置项可以对全局默认窗口进行配置,配置后会对所有页面都会生效,且优先级低于页面级配置。
  • 修改属性值,查看导航栏效果

三、实现步骤

相关推荐
服务端技术栈2 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
2501_915921433 小时前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008894 小时前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !5 小时前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
宋辰月6 小时前
微信小程序-day4
微信小程序·小程序
2501_916007476 小时前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
^Rocky6 小时前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
weixin_lynhgworld6 小时前
短剧小程序系统开发:构建影视生态新格局
小程序·短剧
2501_9159184113 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者813 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview