问答类网站怎么做啊,电商平台哪个好做,网站的上一页怎么做,廊坊营销型网站建设#x1f468;#x1f4bb;个人主页#xff1a;开发者-曼亿点
#x1f468;#x1f4bb; hallo 欢迎 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅!
#x1f468;#x1f4bb; 本文由 曼亿点 原创
#x1f468;#x1f4bb; 收录于专栏#xff1a… 个人主页开发者-曼亿点
hallo 欢迎 点赞 收藏⭐ 留言 加关注✅!
本文由 曼亿点 原创
收录于专栏微信小程序开发
⭐⭐ 微信小程序开发【婚礼邀请函】——运行视频 项目所需的图片链接https://pan.baidu.com/s/1gk3h8RFsNENzBzB4p5kw-g 提取码8aon 文章目录 ⭐⭐⭐前言⭐ 任务实现分析1页面结构2目录结构3项目初始化结束语 ⭐前言⭐ 本项目是一个婚礼邀请函小程序通过小程序向亲朋好友发送婚礼到场的邀请相当于传统方式的请帖他给人带来了不一样便捷的体验感也更容易受到广大年群体的喜爱通过电子版的邀请函邀请来宾见证一对新人的幸福时刻。 本项目分为5个页面组成分别是邀请函、图片、美好时光、婚礼地点、宾客情况。如下图所示
1.邀请函页面
2.图片页面
3.美好时光页面
4.婚礼地点页面
5.宾客信息页面 下面对这5个页面的功能进行简要的介绍。 邀请函页面新娘和新郎的名字、电话、婚礼地点、婚礼时间。 图片页面新娘和新郎的幸福照。 美好时光页面采用视频的方式记录一对新人的相爱历程。 婚礼地点页面通过导航查看婚礼地点的路线。 宾客信息页面通过婚礼的嘉宾填写个人信息送一些祝福等。 任务实现分析 1页面结构 从上图看出页面底部都有标签栏通过点击不同的标签按钮却换到对应的页面。 邀请函页面中右上角有一个音乐播放按钮中间是新娘和新郎的合照合照下面是新娘和新郎的名字点击旁边的电话图片呼叫。底部是婚礼时间和地点信息。 图片页面中通过纵向轮播图展示了新人婚纱照片。 美好时光页面中提供了视频在线播放功能。 婚礼地点页面中提供了在线地图点击导航图标可以定位婚礼酒店位置。 宾客信息页面中提供了一个表单用于填写宾客信息。
2目录结构
路径说明app.js应用程序的逻辑文件app.json应用程序的配置文件app.wxss定义公共样式pages/index邀请函页面保存目录pages/picture图片页面保存目录pages/video美好时光页面保存目录pages/map婚礼地点页面保存目录pages/guesr宾客信息页面保存目录images图片文件
3项目初始化 在微信开发者工具中创建一个空白项目。创建成功后新建app.json文件在该文件中定义本案列中的页面和导航栏样式具体代码如下
// A code block
var foo bar;上述代码中tabBar对象用于配置页面底部的标签list是一个数组数组的每个元素是一个标签按钮对象通过该对象的属可以配置标签栏中的每个标签按钮。 在每个标签打开时导航栏也需要随之发送改变。下面在每个页面的.json文件中配置页面标题以pages/index/index.json文件为例代码如下
{pages: [pages/index/index,pages/guest/guest,pages/map/map,pages/vido/vido,pages/pictrue/pictrue,pages/logs/logs],tabBar: {color: #ccc,selectedColor: #ff4c91,borderStyle:white,backgroundColor: #fff,list: [{pagePath: pages/index/index,iconPath: images/images/invite.png,selectedIconPath: images/images/invite.png,text: 邀请函},{pagePath: pages/pictrue/pictrue,iconPath: images/images/marry.png,selectedIconPath: images/images/marry.png,text: 照片},{pagePath: pages/vido/vido,iconPath: images/images/video.png,selectedIconPath: images/images/video.png,text: 美好时光},{pagePath: pages/map/map,iconPath: images/images/map.png,selectedIconPath: images/images/map.png,text: 订婚地点},{pagePath: pages/guest/guest,iconPath: images/images/guest.png,selectedIconPath: images/images/guest.png,text: 宾客信息}]},window: {navigationBarTextStyle: black,navigationBarTitleText: 邀请函,navigationBarBackgroundColor: #ff4c91,enablePullDownRefresh: false},}完成配置文件的编写后在app.wxss文件中定义公共样式具体代码如下
{usingComponents: {},navigationBarTitleText: 邀请函
}完成配置文件的编写后在app.wxss文件定义公共样式具体代码如下
page{
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}结束语
以上就是微信小程序之列表渲染 持续更新微信小程序教程欢迎大家订阅系列专栏微信小程序 你们的支持就是曼亿点创作的动力
