微信小程序MiniProgramForHD
项目介绍
- 本项目旨在开发一个以方便同学为宗旨的微信小程序
- MiniProgramForHD主要功能介绍(理想化)
- page_indxe
- HD实况
- 轮播图模块
- 主要负责轮播校园最新实况新闻
- 单击实况新闻图片,进入相关网页
- page_indxe
- 课程表
- 类似于超级课程表
- 单击可以显示本学期课程表
- 饭卡充值
- 类似于学付宝
- 单击进入可以进行饭卡充值
- HD校园
- 主要是HD校园的一些主要趣事
- 等级考试
- 负责等级考试报名
- 考证指南
- 负责最新各种等级、职业资格考试指南
- 关于作者
- 开发者信息,以方便后期维护使用
- page_dataCollege
- 数据学院实况
- 轮播图模块
- 主要负责轮播数据学院最新实况新闻
- 单击实况新闻图片,进入相关网页
- 信息显示模块
- 主要是学院全部新闻
- 点击条目,进入相关网页
新的改变
一、本版本目标
- 需求分析
- 构思基本功能
- 可行性分析
- 构思框架
- 构思页面
- 构思用到的技术
- 实现基本框架
- 创建页面
- dataCollege
- index
- knowledgeManagement
- logs
二、创建页面相关代码及解释
"tabBar": {
"color": "#000",
"selectedColor": "#000",
"backgroundColor": "#FFF",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "华德首页",
"iconPath": "img/hudeIndexIcon.jpg",
"selectedIconPath": "img/huadeIndex_click_icon1.png"
},
{
"pagePath": "pages/dataCollege/dataCollege",
"text": "数据学院",
"iconPath": "img/tabBar_me_icon.png",
"selectedIconPath": "img/tabBar_me_click_icon.png"
},
{
"pagePath": "pages/knowledgeManagement/knowledgeManagement",
"text": "知识管理",
"iconPath": "img/knowManIndexIcon.jpg",
"selectedIconPath": "img/knowManIndex_click_icon.jpg"
}
]
- 代码解释
- tabBar:导航条
- “color”: “#000” :颜色标签,为浅黑色
- “selectedColor”: “#000”,:选中之后字体颜色
- “backgroundColor”: “#FFF”:背景颜色
- “borderStyle”: “black”:边框样式
- list:一个列表
- “pagePath”: “pages/index/index”:点击之后跳转路径,此路径为相对路径
- “text”:显示文本
- “iconPath”::tabBar选项的图片路径
- “selectedIconPath”:选中选项之后的图片路径
- 创建轮播图的代码及其解释
- 创建轮播图的部分代码代码
- wxml部分代码
- 创建轮播图的部分代码代码
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{banner_list[0].banner}}">
<swiper-item>
<image src="{{item.pic_url}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
- wxml部分代码解释
- indicator-dots="{{indicatorDots}}":为是否显示面板指示点,此选项为显示(就是轮播图下面的点点)
- autoplay="{{autoplay}}":为是是否自动播放,此选项为是自动播放
- interval="{{interval}}":自分动切换时间间隔,此选项默认为5000毫秒
- duration="{{duration}}":滑动动画时长,此选项默认时间为1000毫秒
- wx:for-items="{{banner_list[0].banner}}":数组遍历,通过 wx:for或者类似iOS 的 banner_list[0]单个获取(默认下标变量是index,对应当前项变量是item)
image - src="{{item.pic_url}}":轮播图图片路径为item.pic_url,图片路径由JS控制
- class :为类名,方便css进行样式选择
一、本版本目标
- 图片制作
- 为1.1.1版本填充图片
- 布局美化
- 实现index的前端
- 制作图片(PS)
- dengJiKaoShi.png(等级考试)
- fanKaChongZhi.png(饭卡充值)
- huadeIndex_click_icon.png(tabBar的首页图片【以单击】)
- hudeIndexIcon(tabBar的首页图片【未单击】)
- juanZengZuoZhe.png(捐赠作者)
- keChengBiao.png课程表()
- knowManIndex_click_Icon.jpg(知识管理【已单击】)
- knowManIndexIcon.jpg(知识管理【未单击】)
- lunBo_1.png(轮播图1)
- lunBo_2.png(轮播图2)
- lunBo_3.png(轮播图3)
- lunBo_4.png(轮播图4)
- lunBo_5.png(轮播图5)
二、创建页面相关代码及解释
- 轮播代码
"banner_list": [
{
"banner": [
{
"pic_url": "../../../img/lunBo_1.png",
},
{
"pic_url": "../../../img/lunBo_2.png",
},
{
"pic_url": "../../../img/lunBo_3.png",
},
{
"pic_url": "../../../img/lunBo_4.png",
},
{
"pic_url": "../../../img/lunBo_5.png",
}
]
}
- 代码解释
- pic_url:这就是上文调用的图片路径
- 没什么可解释的
- 选项
hotgoods: [
{
"name": "课程表",
"summary": "华德课程表",
"ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_9d57f6e89d1f560b7bce31e0b85a7285.png&w=420&h=240&crop=a_0_120_1080_480&t=png",
"pic_url": "../../../img/keChengBiao.png",
"url": "http://home.mi.com/shop/detail?gid=95",
},
{
"name": "饭卡充值",
"summary": "华德饭卡充值",
"ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_d65477ca8db6626da323554e132d7de9.png&w=420&h=240&crop=a_0_120_1080_480&t=png",
"pic_url": "../../../img/fanKaChongZhi.png",
"url": "http://home.mi.com/shop/detail?gid=95"
},
{
"name": "华德校园",
"summary": "华德校园",
"pic_url": "../../../img/huaDeXiaoYuan.png"
},
{
"name": "等级考试",
"pic_url": "../../../img/dengJiKaoShi.png",
"summary": "如何考证",
},
{
"name": "如何考证",
"pic_url": "http://static.home.mi.com/app/shop/img?id=shop_1e29af11fa83139dd305d61cb83c94ac.jpeg&w=420&h=240&crop=a_90_0_240_240"
},
{
"name": "捐赠作者",
"pic_url": "../../../img/juanZengZuoZhe.png"
}
]
}
tabBar
"tabBar": {
"color": "#000",
"selectedColor": "#000",
"backgroundColor": "#FFF",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "华德首页",
"iconPath": "img/hudeIndexIcon.jpg",
"selectedIconPath": "img/huadeIndex_click_icon1.png"
},
{
"pagePath": "pages/dataCollege/dataCollege",
"text": "数据学院",
"iconPath": "img/tabBar_me_icon.png",
"selectedIconPath": "img/tabBar_me_click_icon.png"
},
{
"pagePath": "pages/knowledgeManagement/knowledgeManagement",
"text": "知识管理",
"iconPath": "img/knowManIndexIcon.jpg",
"selectedIconPath": "img/knowManIndex_click_icon.jpg"
}
]
}
- 代码解释
- tabBar:导航条
- “color”: “#000” :颜色标签,为浅黑色
- “selectedColor”: “#000”,:选中之后字体颜色
- “backgroundColor”: “#FFF”:背景颜色
- “borderStyle”: “black”:边框样式
- list:一个列表
- “pagePath”: “pages/index/index”:点击之后跳转路径,此路径为相对路径
- “text”:显示文本
- “iconPath”::tabBar选项的图片路径
- “selectedIconPath”:选中选项之后的图片路径
MiniProgramForHD_v2.1.2
未完待续…