项目介绍

本项目旨在开发一个以方便同学为宗旨的微信小程序
MiniProgramForHD主要功能介绍（理想化）
- page_indxe
  - HD实况
  - 轮播图模块
  - 主要负责轮播校园最新实况新闻
  - 单击实况新闻图片，进入相关网页
课程表
- 类似于超级课程表
- 单击可以显示本学期课程表
饭卡充值
- 类似于学付宝
- 单击进入可以进行饭卡充值
HD校园
- 主要是HD校园的一些主要趣事
等级考试
- 负责等级考试报名
考证指南
- 负责最新各种等级、职业资格考试指南
关于作者
- 开发者信息，以方便后期维护使用
page_dataCollege
- 数据学院实况
轮播图模块
- 主要负责轮播数据学院最新实况新闻
- 单击实况新闻图片，进入相关网页
信息显示模块
- 主要是学院全部新闻
- 点击条目，进入相关网页

新的改变

MiniProgramForHD_v1.1.1

一、本版本目标

需求分析
构思基本功能
可行性分析
构思框架
构思页面
构思用到的技术
实现基本框架
创建页面
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进行样式选择

MiniProgramForHD_v2.1.1

一、本版本目标

图片制作
为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

未完待续…

1170111415杨宇-微信小程序MiniProgramForHD相关推荐

基于微信小程序的贵小团系统设计与实现-计算机毕业设计源码+LW文档
2022 届本科毕业设计开题报告毕业论文(设计)题目: 基于微信小程序的贵小团校园社团系统的设计与实现学院: 信息工程学院专业: 班级: 学号: 姓名: 毕业论文(设计)选题的目的和意义 ...
（附源码）ssm基于微信小程序的社区老人健康管理服务系统的设计与实现毕业设计 011513
要随着现在网络的快速发展,网络的应用在各行各业当中它很快融入到了许多分类管理之中,他们利用网络来做这个社区老人健康管理服务系统,随之就产生了"社区老人健康管理服务系统 .",这样 ...
ssm+微信小程序基于微信小程序的社区老人健康管理服务系统的设计与实现毕业设计源码011513
摘要随着现在网络的快速发展,网络的应用在各行各业当中它很快融入到了许多分类管理之中,他们利用网络来做这个社区老人健康管理服务系统,随之就产生了"社区老人健康管理服务系统 .",这 ...
ssm基于微信小程序的社区老人健康管理服务系统的设计与实现毕业设计-附源码011513
摘要随着现在网络的快速发展,网络的应用在各行各业当中它很快融入到了许多分类管理之中,他们利用网络来做这个社区老人健康管理服务系统,随之就产生了"社区老人健康管理服务系统 .",这 ...
基于微信小程序的校园二手商城的设计与实现-计算机毕业设计源码+LW文档
毕业论文开题报告 1．本课题的研究意义互联网飞速发展的现在,信息技术和网络技术的不断向上进步提高,互联网广泛应用于人们的生活中.随着经济发展的迅速大学生在大学期间会购买一些闲置物品,并 ...
SSM同城拼车微信小程序的开发计算机毕设源码20625
摘要伴随着科技进步和经济全球化,人民生活水乎丕断提高,拥有私家车的人群也越来越庞大.据统计,我国汽车保有量持续高速度增长,众多的车辆上路,是造成交通拥堵的最主要原因.除此之外,随着经济高速发展,城市 ...
《程序员》9月精彩内容：微信小程序中国人工智能大会集锦
"无须安装"."触手可及"."用完即走"--这一系列特性,使微信小程序自被提出起,就广受开发者关注,大家对它的热议可谓跌宕起伏,它的每次更新 ...
SSM+mysql+微信小程序超市外卖系统-计算机毕业设计源码97313
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,超市外卖系统小程序被用户普遍使用,为方便用户 ...
springboot+微信小程序健康饮食系统毕业设计源码280920
健康饮食小程序的设计与实现摘要本文设计了一种基于微信小程序的健康饮食小程序小程序,系统为人们提供了方便快捷.即用即搜的健康食谱服务,包括健康食谱,医疗资讯.注册登录等,用户能够方便快捷地查看资讯 ...

1170111415杨宇-微信小程序MiniProgramForHD

微信小程序MiniProgramForHD

项目介绍

新的改变

MiniProgramForHD_v1.1.1

MiniProgramForHD_v2.1.1

一、本版本目标

二、创建页面相关代码及解释

MiniProgramForHD_v2.1.2

1170111415杨宇-微信小程序MiniProgramForHD相关推荐

最新文章

热门文章