学习微信小程序开发（一）小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 A

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容，帮助开发者快速全面的了解小程序开发的方方面面。

小程序调试工具

用来调试小程序，非常类似于网页的调试工具，分为以下几个功能模块：

Wxml：页面结构和结构对应的 wxss 属性
Console：控制台，输出提示信息
Sources：当前项目的脚本文件
Network：观察和显示request和socket的请求情况
Perfomance：性能分析
Memory：内存
AppData：当前小程序的具体数据
Storage：显示当前项目使用wx.setStorage或者wx.setStorageSync存储的数据
Security：安全性
Sensor：模拟地理位置和模拟移动设备表现，用于调试重力感应 API
Mock：模拟接口
Audits：体验评分检测
Vulnerability：发现并修复小程序内的接口安全漏洞，提升小程序安全

代码构成

一个小程序主要包含pages页面、utils工具类库、app相关的一些配置、project.config.json项目配置。

pages页面（小程序的每一个页面）由4个文件组成：
- js：页面逻辑，相当于控制层，也包括部分数据
- wxml：页面结构展示，相当于视图层(view)
- json：页面配置，配置一些页面展示的数据，充当部分的模型
- wxss：页面样式表
utils工具类库：常用的可共用的工具类
app 配置：必须放在根目录下
- app.js：全局的小程序逻辑处理
- app.wxss：小程序的公共样式表
- app.json：小程序的公共配置，可以配置页面路径、窗口表现、底部 tabBar等，更多可查看官网全局配置项

app.json

当前小程序的全局配置，包括了所有页面路径、标题栏显示、网络超时时间、底部 tab 等。

完整配置项

json

代码解读

{
    // 小程序的默认启动路径，如果不指定，则为 pages 里的第一项
    "entryPagePath": "pages/catlist/index",
    // 页面路径
    "pages": [
        "pages/catlist/index",
        ...
    ],
    // 分包路径
    "subPackages": [
      {
        "root": "common",
        "name": "common",
        "pages": [
          "pages/shareappmessage/index",
          "pages/scan/index"
        ]
      }
    ],
    // 小程序的状态栏、导航条、标题、窗口背景色
    "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "宠物乐园",
        "navigationBarTextStyle": "black"
    },
    // 多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
    "tabBar": {
        "color": "#1485EE",
        "selectedColor": "#FF514E",
        "list": [
            {
                "pagePath": "pages/catlist/index",
                "text": "列表",
                "iconPath": "image/02.png",
                "selectedIconPath": "image/022.png"
            },
            {
                "pagePath": "pages/mycat/index",
                "text": "我的",
                "iconPath": "image/04.png",
                "selectedIconPath": "image/044.png"
            }
        ]
    },
    // 启用新版的程序样式
    "style": "v2",
    // 指定`sitemap.json`的位置，`sitemap.json`文件用于配置小程序及其页面是否允许被微信索引
    // https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
    "sitemapLocation": "sitemap.json"
}