只要功夫深，菜鸟也能写出细节满满的古茗点单小程序

前言

写在项目前的话：

临近期末了，各学科纷纷结课，随之而来的是各个课设的纷至沓来。俗话说得好，大学生的生活前五个月是温水泡脚，那么最后一个月的就是将前五个月泡脚的水喝下去。作为一个平日里摸鱼摸惯的摸鱼王，课设是最为头疼却又逃不掉的一环。这次的课设，是要模仿一个微信小程序，按照功能的完成度和难度来打分。作为摸鱼王的我，自然而然想起了“看起来简单”又界面好看（主要是靠图片撑起来的颜值）且天天都在用的————古茗点单小程序。而在实现的过程中，我才发现原来看起来简单的古茗小程序实际上细节满满。让我这个摸鱼王叫苦连天。

效果展示（模仿的是上个版本的古茗小程序，因为在模仿小程序中古茗更新过一次）

首页页面

点单页面

选购页面

订单页面

我的页面

以上就是我们模仿的古茗小程序的主要功能。

一、开始前所需要的准备

• 申请账号：小程序注册，填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

• 开发工具：微信开发工具

• 数据来源：

  古茗各种图片来源：Fiddler抓包工具下载

  如何使用Fiddler抓取图片教程：Fiddler教程

• icon：iconfont阿里巴巴矢量图标库

• 部分组件的引用：Vant Weapp

二、初始化一个小程序

1. 新建一个文件夹
2. 打开小程序，新建一个小程序
3. 目录结构，如下所示

WEAPP
| -cloudfunctions
| -miniprogram
|     - assets // 静态变量
|         -GIF  //抓取的GIF
|         -icons //源于iconfont的icon图标
|         -images//抓取的静态图片
|     - componnents //组件
|         - panel // 购物车组件
|     - database //数据库
|         - db.js //存放所有数据的地方
|     - pages //各个页面
|         -home //主页
|           -home.js//js文件
|           -home.wxss//css样式文件
|     - utils //全局函数
|     - app.js   			// 系统的方法处理文件
|     -app.json 			// 系统全局配置文件
|     -app.wxss 			// 全局的样式表
|     -config.json 		// 域名等配置文件
| -README 
复制代码

1. 小程序app.json文件配置

  "pages": [
    "pages/home/home",//主页
    "pages/jump/jump",//shopping假跳转页面
    "pages/shopping/shopping",//显示各个店面信息页面
    "pages/order/order",//点单页面
    "pages/my/my",//我的页面
    "pages/teaList/teaList",//奶茶点单页面
    "pages/orderDetail/index"//点单详情页面
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序点单定位"
    }
  },    //请求访问用户地理位置（小程序使用位置所必要的）
  //窗口
  "window": {
    "backgroundColor": "#F6F6F6",//窗口背景色
    "backgroundTextStyle": "dark",// 下拉背景字体、loading 图的样式，仅支持 dark/light
    "navigationBarBackgroundColor": "#fff",// 顶部tab背景颜色
    "navigationBarTitleText": "古茗",//顶部显示标题
    "navigationBarTextStyle": "black"// 导航栏标题颜色，仅支持 black/white
  },
  //tab导航条
  "tabBar": {
    "selectedColor": "#000000", //选中时样式
    "borderStyle"