微信小程序开发之——婚礼邀请函-项目初始化(4.2)

一概述

tabBar组件介绍
项目初始化
项目目录结构说明

二 tabBar组件介绍

2.1 常用属性表

属性	说明
color	未选择时，底部导航文字的颜色
selectedColor	选中时，底部导航文字的颜色
borderStyle	底部导航边框的颜色(如果没有写入样式会出现浅灰色线条)
backgroundColor	底部导航背景色
list	导航配置数组

2.2 list数组元素

属性	说明
pagePath	页面访问地址
iconPath	未选择时，图片路径
selectedIconPath	选中时，图片路径
text	导航图标下方文字

三项目初始化

3.1 创建空项目，配置app.json文件

{"pages": ["pages/index/index","pages/picture/picture","pages/video/video","pages/map/map","pages/guest/guest"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#ff4c91","navigationBarTitleText": "婚礼邀请函","navigationBarTextStyle":"black","enablePullDownRefresh": false},"tabBar": {"color": "#ccc","selectedColor": "#ff4c91","borderStyle": "white","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","text": "邀请函","iconPath": "/images/invite.png","selectedIconPath": "/images/invite.png"},{"pagePath": "pages/picture/picture","text": "照片","iconPath": "/images/marry.png","selectedIconPath": "/images/marry.png"},{"pagePath": "pages/video/video","text": "美好时光","iconPath": "/images/video.png","selectedIconPath": "/images/video.png"},{"pagePath": "pages/map/map","text": "婚礼地点","iconPath": "/images/map.png","selectedIconPath": "/images/map.png"},{"pagePath": "pages/guest/guest","text": "宾客信息","iconPath": "/images/guest.png","selectedIconPath": "/images/guest.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

3.2 项目样式文件

page{font-family: Arial, Helvetica, sans-serif;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;
}

3.3 配置后的页面样式

四项目目录结构说明

路径	说明
app.js	应用程序的逻辑文件
app.json	应用程序的配置文件
app.wxss	定义公共样式
pages/index/	"邀请函"页面文件保存目录
pages/picture/	"照片"页面文件保存目录
pages/video/	“美好时光”页面文件保存目录
pages/map/	“婚礼地点”页面文件保存目录
pages/guest/	“宾客信息”页面文件保存目录
images	图片文件

微信小程序开发之——婚礼邀请函-项目初始化(4.2)相关推荐

微信小程序开发之——婚礼邀请函-项目展示(4.1)
一概述项目页面组成项目中使用到的API及组件二项目页面组成 2.1 项目整体预览 2.2 项目页面组成本项目共有5个页面组成,分别是邀请函.照片.美好时光.婚礼地点.宾客信息邀请函邀请 ...
微信小程序开发之——婚礼邀请函-邀请函页面(4.3)
一概述 "邀请函"页面说明婚礼邀请函功能开发效果图二 "邀请函"页面说明右上角有一个背景音乐播放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次点击 ...
微信小程序开发之——婚礼邀请函-美好时光页面(4.5)
一概述 "美好时光"页面任务说明 video组件和腾讯视频插件介绍 "美好时光"页面功能开发 "美好时光"页面效果图二 "美好 ...
微信小程序开发之——婚礼邀请函-照片页面(4.4)
一概述 "照片"页面任务说明 "照片"页面功能开发效果图二 "照片"页面任务说明每一张轮播的图片都占满显示区域,滑动屏幕可以实现图片 ...
微信小程序开发之——婚礼邀请函-邀请函页面(4，腾讯android面试题目
李四新娘我们诚邀您来参加我们的婚礼事件:2020年12月30日地点:北京市海淀区XX路XX酒店 3.2 样式文件(pages/index/index.wxss) /*播放器 */ .playe ...
微信小程序开发之——婚礼邀请函-邀请函页面(4，android应用案例开发大全第2版
} @keyframes musicRotate{ from{transform:rotate(0deg);} to{transform: rotate(360deg);} } /* 播放暂停 */ ...
微信小程序开发尚学堂介绍项目结构组件喧嚷事件模板
一.微信小程序介绍 1. 微信小程序介绍微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 说明: 小程 ...
微信小程序开发【一】-- 初识小程序
小程序已经火了很久了,一直想学习小程序,苦于工作比较忙,加班比较多没时间,当然这其实都是理由,很多时候习惯了搬砖,习惯了固定的圈子,很难也不想涉足其他的领域,但是也不能老错过一波又一波新鲜的东西吧. ...
微信小程序开发uni-app 跨域处理服务器搭建仓库 VueX tabBar
一.uni-app简介官网:https://uniapp.dcloud.io/ PC端:移动端:(APP,WebApp):纯原生:(IOS,Android ) 应用商店:H5 Hybrid 模式(混 ...

微信小程序开发之——婚礼邀请函-项目初始化(4.2)

一概述

二 tabBar组件介绍

2.1 常用属性表

2.2 list数组元素

三项目初始化

3.1 创建空项目，配置app.json文件

3.2 项目样式文件

3.3 配置后的页面样式

四项目目录结构说明

微信小程序开发之——婚礼邀请函-项目初始化(4.2)相关推荐

最新文章

热门文章

微信小程序开发之——婚礼邀请函-项目初始化(4.2)

一 概述

二 tabBar组件介绍

2.1 常用属性表

2.2 list数组元素

三 项目初始化

3.1 创建空项目，配置app.json文件

3.2 项目样式文件

3.3 配置后的页面样式

四 项目目录结构说明

微信小程序开发之——婚礼邀请函-项目初始化(4.2)相关推荐

最新文章

热门文章

一概述

三项目初始化

四项目目录结构说明