跟我来学小程序（一）项目目录和项目文件介绍

大家好，我是一个爱举铁的程序员Shr。

 

本篇文件介绍小程序项目的目录和项目文件。

 

源码地址：

https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180603

 

一、新建项目

打开微信web开发者工具，选择小程序项目，由于没有新建过项目，打开之后是下图的界面，选择项目目录，填写注册之后获得的AppID，填写项目名称，点击确定。

 

然后就打开了新建的项目，如图所示。

 

二、文件的作用

先说一下项目中出现的文件，文件有四种，js，json，wxml，wxss。

 

大家熟悉的js就是用来交互的了。

 

json是一种数据格式，那这里放的就是数据了。

 

还有wxml和wxss那是干嘛用的，

 

千万不要以为wxml是和xml文件一样，xml文件也是用来存储数据的，但是已经有一种json文件存储数据了。

 

这里的wxml可以理解成html，那wxss就可以理解成css了。

 

三、目录结构介绍

目录结构如下图所示。

 

接下来了解一下各个目录的作用。

 

3.1 pages目录

pages目录里面放的是页面，当前的项目中有两个页面，一个是index.wxml，一个是logs.wxml，每个页面都有对应的wxss和js。

 

3.2 utils目录

utils目录，顾名思义，工具，这里可以放公共的wxss和js等，这样就不用在每个页面做重复的工作了。

 

3.3 app.json

官方文档的说法是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

来看看里面是什么。

 

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

 

这个文件还有很多其他的属性，我把这些属性都加上去之后的代码如下，由于JSON格式的文件不能用//或者/* */加注释，我就用这种数据格式定义key/value加注释了。

 

{
  "pages注释":"必填。数组类型，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。",
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window注释":"选填。对象类型。用于设置小程序的状态栏、导航条、标题、窗口背景色。",
  "window": {
    "backgroundTextStyle注释":"下拉 loading 的样式，仅支持 dark/light，默认值dark",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor注释":"导航栏背景颜色，如#000000，默认值#000000",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText注释":"导航栏标题文字内容",
    "navigationBarTitleText": "Shr",
    "navigationBarTextStyle注释": "导航栏标题颜色，仅支持 black/white，默认值white",
    "navigationBarTextStyle": "white",
    "navigationStyle注释": "导航栏样式，仅支持 default/custom。custom ",
    "navigationStyle": "default",
    "backgroundColor注释": "窗口的背景色，默认值#ffffff",
    "backgroundColor": "#eeeeee",
    "enablePullDownRefresh注释": "是否开启下拉刷新，默认值false",
    "enablePullDownRefresh": false,
    "onReachBottomDistance注释": "页面上拉触底事件触发时距页面底部距离，单位为px，默认值50",
    "onReachBottomDistance": "100",
    "backgroundColorTop注释":"顶部窗口的背景色，仅 iOS 支持",
    "backgroundColorTop":"#ffffff",
    "backgroundColorBottom注释":"底部窗口的背景色，仅 iOS 支持",
    "backgroundColorBottom":"#ffffff"
  },
  "tabBar注释": "选填。对象类型。如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。可以理解成页面底部的导航",
  "tabBar": {
    "color注释":