微信小程序——每日卡路里

0.前言

这一个多月从零开始做了一个微信小程序，主要是决定深入学习前端知识，恰逢腾讯举办了第一届微信小程序大赛，参加了比赛做了一个简单的微信小程序作为练手，下面正式介绍这个小程序。

1.开始

开始是快速看了个介绍小程序的慕课，看完基本上就会小程序的基本写法了，下面贴上链接：

1.1 成果一览

先看小程序截图：

5张图分别为：落地页、历史页、“我的”页、身体数据页、食物选择页。

展示视频：

想详细体验就在微信小程序搜“每日卡路里”。

1.2 基本功能

1.选择自身的个人情况判断每日摄入的合适卡路里;

2.首页定制个人的每日食谱方案，并给出对于的卡路里数;

3.在历史选项中观看最近几天的历史记录，方便统计;

4.离线可用，无需担心网络稳定与流量问题。

2.过程

由于以练手为目的，因此小程序相对简单，实用性也不大，但总体相对满意。程序主要参考了课程后面的wxtodo小程序的代码和keep的app的界面设计，基本上靠这两个参照结合 和网上的资料完成了这个小程序。下面简单记述本小程序的基本内容：

2.1 开发环境和工具

本小程序的开发工具为微信提供的微信web开发者工具，版本号v1.02.1805181.

开发环境为：

硬件：    处理器：i5-8250u；内存：ddr4 8g；硬盘：256gnvme ssd； 显卡：Intel(R)UHD Graphics 620；

系统：    Windows10 家庭中文版；

2.2 程序结构

本程序包含images和pages两个文件夹，其中images文件夹用于存放小程序所需要的图片，pages文件夹用于存放小程序的实现代码。

pages文件夹中包含10个文件夹：about, body, history, index, me, selectfruit,selectmeat, selectoil, selectstaple, settings，每个文件夹分别对应着一个页面的设计和功能的实现。

页面结构如下图：

2.3 其他

剩下的就是代码编写问题，基本语法在慕课上都有介绍，这里不详细赘述，还有其他的问题结尾部分有说明。

3.结尾

由于本小程序难度不大，因此不会从头到尾在此记录，会另开文章记录里面遇到的问题及详细处理方法，并附带链接在本文末尾，以此作为他人的垫脚石。首先附带的是本小程序的开发文档链接：

目前正在招人： 内推邮箱 -