微信小程序商城（前端篇）

本文档是基于本人第一次接触小程序的全过程学习步骤

步骤1：

可参见小程序官方简易教程：https://developers.weixin.qq.com/miniprogram/dev/

以下描述是基于上述教程的基础上实际上手内容

步骤2：

1、申请账号，根据指引申请账号之后获得开发者id

2、安装开发工具，根据教程指引下载安装

步骤3：新建项目：打开微信web开发者工具——选择小程序项目——选择一个空目录（也可直接选择一个项目打开，此处基于第一次新建项目）——AppID填写第一天获取到的开发者id——填写项目名称——若项目目录是空文件夹，则会显示下图第四点，一般选择普通快速启动模板

---

---

步骤4：代码构成，新建完一个快速模板之后，会生成如下文件：

1、app.json :

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地，app.json 的 pages 字段可以知道所有页面路径，于是微信客户端就把页面的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个页面。

关于app.json描述：

//当前小程序的全局配置，包含所有页面路径、界面表现、网络超时时间、底部tab等
{
  //pages ：用于描述当前小程序所有页面路径，用于指定小程序有哪些页面组成，每一项都对应一个页面的 路径+文件名 文件名不需要写后缀  框架会自动去寻找 对应位置的 4个文件 .json .js  .wxml  .wxss 进行处理
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // window：全局默认窗口的表现，定义所有页面的顶部背景颜色，文字颜色等 
  "window":{
    //下拉 loading 的样式，仅支持 dark / light
    "backgroundTextStyle":"light",
    //导航栏背景颜色
    "navigationBarBackgroundColor": "#37383c",
    //导航连标题内容
    "navigationBarTitleText": "大喵的小店",
    //导航栏标题颜色
    "navigationBarTextStyle":"ffffff",
    //窗口背景色
    "backgroundColor": "#eeeeee",
    //是否开启当前页面的下拉刷新
    "enablePullDownRefresh": true
  },
  //底部tab栏目的表现
    "tabBar": {