微信小程序学习1--项目结构分析和基本配置

小程序项目结构分析

小程序项目结构分析：

• app.js文件是小程序的入口文件（小程序从该文件开始执行）。
• app.wxss文件是小程序的全局样式文件。
• pages文件夹用来放置小程序的页面。
  • wxml 模板文件，类似于HTML文件。
  • wxss 样式文件，类似于css文件。
  • js 文件，用于处理js的交互逻辑，与原生js作用类似。
  • json文件，用于当前页面的配置。
• utils文件夹用于提供一些工具方法。

├── app.js ...................................................... 小程序入口文件
├── app.json .................................................... 小程序全局配置
├── app.wxss .................................................... 小程序全局样式
├── pages ....................................................... 所有页面目录
│   ├── index ................................................... index页面目录
│   │   ├── index.js ............................................ index页面业务逻辑
│   │   ├── index.wxml .......................................... index页面布局结构
│   │   └── index.wxss .......................................... index页面布局样式
│   └── logs .................................................... logs页目录
│       ├── logs.js ............................................. logs页面业务逻辑
│       ├── logs.json ........................................... logs页面配置文件
│       ├── logs.wxml ........................................... logs页面布局结构
│       └── logs.wxss ........................................... logs页面布局样式
├── project.config.json ......................................... 开发工具配置文件
└── utils ....................................................... 公共逻辑
    └── util.js ................................................. 实用工具

小程序基本配置

网页编程采用的是HTML+CSS+JS这样的组合，其中HTML是用来描述当前这个页面的结构，CSS 是用来描述页面的样式，JS通常是用来处理这个页面和用户的交互。

在小程序中也有类似的处理方式，只是语法不同而已，相应的小程序中提供了WXML+WXSS+JS的方式。

• wxml（模板）
• wxss（样式）
• js（交互逻辑）
• json（配置文件）

全局配置

通过 app.json 文件对小程序进行全局配置，如页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json 配置清单：

• 小程序默认打开的页面是pages中的第一个路径
• 所有的小程序页面都需要在pages下配置路径

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认窗口表现
tabBar	Object	否	设置底部 tab 表现

示例代码：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/my/my",
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#262626",
    "navigationBarTitleText": "主页",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "backgroundColor": "#FECA49",
    "color": "#D78B09",
    "selectedColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icons/home-default.png",
        "selectedIconPath": "static/icons/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "卡券",
        "iconPath": "static/icons/ticket-default.png",
        "selectedIconPath": "static/icons/ticket-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/icons/face-default.png",
        "selectedIconPath": "static/icons/face-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意：

1. 在 app.json 中配置 tabBar 时所设置的图标只支持本地资源路径。不能使用网络路径。

页面配置

每个页面可以有不同的表现，通过 pages 目录下的 .json 文件，如 logs.json ，实现页面的局部配置。但是只能设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#fff	窗口的背景色

示例代码：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#eee",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的"
}