前言
写在项目前的话:
临近期末了,各学科纷纷结课,随之而来的是各个课设的纷至沓来。俗话说得好,大学生的生活前五个月是温水泡脚,那么最后一个月的就是将前五个月泡脚的水喝下去。作为一个平日里摸鱼摸惯的摸鱼王,课设是最为头疼却又逃不掉的一环。这次的课设,是要模仿一个微信小程序,按照功能的完成度和难度来打分。作为摸鱼王的我,自然而然想起了“看起来简单”又界面好看(主要是靠图片撑起来的颜值)且天天都在用的————古茗点单小程序。而在实现的过程中,我才发现原来看起来简单的古茗小程序实际上细节满满。让我这个摸鱼王叫苦连天。
效果展示(模仿的是上个版本的古茗小程序,因为在模仿小程序中古茗更新过一次
)
首页页面
点单页面
选购页面
订单页面
我的页面
以上就是我们模仿的古茗小程序的主要功能。
一、开始前所需要的准备
-
申请账号:小程序注册,填写信息和提交相应的资料,就可以拥有自己的小程序帐号。
-
开发工具:微信开发工具
-
数据来源:
古茗各种图片来源:Fiddler抓包工具下载
如何使用Fiddler抓取图片教程:Fiddler教程
-
icon:iconfont阿里巴巴矢量图标库
-
部分组件的引用:Vant Weapp
二、初始化一个小程序
- 新建一个文件夹
- 打开小程序,新建一个小程序
- 目录结构,如下所示
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
复制代码
- 小程序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"