1170111415杨宇-微信小程序MiniProgramForHD

项目介绍

• 本项目旨在开发一个以方便同学为宗旨的微信小程序
• 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"
      }
    ]

• 代码解释

1. tabBar：导航条
2. “color”: “#000” ：颜色标签，为浅黑色
3. “selectedColor”: “#000”,：选中之后字体颜色
4. “backgroundColor”: “#FFF”：背景颜色
5. “borderStyle”: “black”：边框样式
6. list：一个列表
7. “pagePath”: “pages/index/index”：点击之后跳转路径，此路径为相对路径
8. “text”：显示文本
9. “iconPath”:：tabBar选项的图片路径
10. “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部分代码解释

1. indicator-dots="{{indicatorDots}}":为是否显示面板指示点，此选项为显示（就是轮播图下面的点点）
2. autoplay="{{autoplay}}"：为是是否自动播放，此选项为是自动播放
3. interval="{{interval}}"：自分动切换时间间隔，此选项默认为5000毫秒
4. duration="{{duration}}"：滑动动画时长，此选项默认时间为1000毫秒
5. wx:for-items="{{banner_list[0].banner}}"：数组遍历，通过 wx:for或者类似iOS 的 banner_list[0]单个获取（默认下标变量是index，对应当前项变量是item）
   image
6. src="{{item.pic_url}}"：轮播图图片路径为item.pic_url，图片路径由JS控制
7. 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",
          }
        ]
      }

• 代码解释

1. pic_url:这就是上文调用的图片路径
2. 没什么可解释的

• 选项

 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"
      }
    ]
  }

• 代码解释

1. tabBar：导航条
2. “color”: “#000” ：颜色标签，为浅黑色
3. “selectedColor”: “#000”,：选中之后字体颜色
4. “backgroundColor”: “#FFF”：背景颜色
5. “borderStyle”: “black”：边框样式
6. list：一个列表
7. “pagePath”: “pages/index/index”：点击之后跳转路径，此路径为相对路径
8. “text”：显示文本
9. “iconPath”:：tabBar选项的图片路径
10. “selectedIconPath”：选中选项之后的图片路径

MiniProgramForHD_v2.1.2

未完待续…