前端代码分为结构层html（WXML），表现层css（WXSS），行为层 js，在这之前首先给大家介绍一下小程序里面的一些文件类型及用途：

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

根目录

    1）app.json,project.config.json,app.wxss,app.js

          app.json: 对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab ...

         project.config.json:  工具个性化设置，例如界面颜色、编译配置，代码上传时自动压缩...

         app.wxss: 全局样式，作用于小程序的所有页面

         app.js：全局逻辑控制

   2）components文件夹

         小程序公共组价文件夹，一般存放小程序的header，footer等

   3）page文件夹

         存放小程序页面

1. .json 页面配置文件
2. .wxml 页面模板文件
3. .wxss 页面样式文件
4. .js 页面脚本逻辑文件

    4）src文件夹

          存放一些静态文件，比如图片，音频，视频...

     5) utils文件夹

          存放一些公共的js文件，文件里面是一些可以全局使用的函数，封装的接口，第三方插件...