微信小程序案例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配置项可以对全局默认窗口进行配置,配置后会对所有页面都会生效,且优先级低于页面级配置。
  • 修改属性值,查看导航栏效果

三、实现步骤

相关推荐
2501_9159184112 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域13 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷13 小时前
第一个小程序
小程序
春哥的研究所13 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld13 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点15 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖19 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发20 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°1 天前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero1 天前
微信小程序91~100
微信小程序·小程序