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

三、实现步骤

相关推荐
Emma歌小白1 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子1 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI2 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220692 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧