1. 小程序简介

• 小程序运行在微信环境中
• 小程序中无法调用 DOM 和 BOM 的 API，但是小程序中可以调用微信环境提供的各种 API
• 小程序开发工具中包含模拟器、浏览器、代码编辑器

2. 小程序项目结构

• pages：用来存放所有小程序的页面
  • 其中每个页面由4个基本文件组成：
  • js文件：存放页面的数据、事件处理函数等
  • json文件：配置窗口的外观、表现等
  • wxml文件：页面的模块结构文件
  • wxss文件：样式文件
• utils：用来存放工具性质的模块
• app.js：小程序项目的入口文件
• app.json：小程序项目的全局配置文件，可以配置小程序外观
• app.wxss：小程序项目的全局样式文件
• project.config.json：项目的配置文件
• sitemap.json：用来配置小程序及其页面是否允许被微信索引(类似搜索引擎)

3. app.json文件配置项

• pages <Array>：用于配置 pages 文件下的所有文件路径，索引为 0 的默认为首页

  // 当配置文件中有路径 pages 中没有文件时，会默认创建对应的一个文件夹、四个文件
  // 当配置文件中没有路径 pages 中有文件时，会报错
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
  ],
  

• window <Object>：全局的默认窗口表现

• tabBar <Object>：底部 tab 栏的表现，不再需要自己去写底部 tabBar，详见 微信开发文档tabBar

• 还有很多详见 微信开发文档全局配置

4. 四个基本文件的认识

4.1 wxml

• 提供了新的标签view、test、image等
• 支持类似于 Vue 的模板语法，wx:for、wx:key 等

4.2 wxss

• 新增了 rpx 尺寸单位，类似于 rem，在375分辨率的时候 1rpx == 0.5px，默认按照750的设计稿，官方推荐开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准
• app.wxss 为全局的样式，其他页面文件中的 wxss 文件为局部样式
• 只支持部分的 css 选择器，类、id、元素、并集、交集、后代、::after、::before选择器

4.3 json

• 对对应页面进行配置，如果与app.json 文件有相同的配置的话，页面配置文件优先

4.4 js

• app.js：是整个小程序项目的入口文件，通过调用 App 函数类启动整个小程序
• 页面的 .js：是页面的入口文件，通过调用 Page 函数来创建并运行页面
• 普通的 .js：用来封装公共的函数或属性供页面使用

5. 小程序宿主环境中的内容

不同的 app 对应着不同的宿主环境

5.1 通信模型

• 小程序中的通信模型分为两部分，这两种通信方式都是由微信客户端进行转发
• 渲染层与逻辑层之间的通信
  • 渲染层：wxml、wxss
  • 逻辑层：js
• 逻辑层和第三方服务器之间的通信
  • 第三方服务器：发送的请求

5.2 运行机制

• 小程序启动的过程
  1. 把小程序的代码包下载到本地
  2. 解析 app.json 全局配置文件
  3. 执行 app.js 小程序入口文件，调用 App 函数创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成
• 页面渲染的过程
  1. 加载解析页面的 json 配置文件
  2. 加载页面的 wxml 模板和 wxss 样式文件
  3. 执行页面的 js 文件，调用 Page 函数创建页面实例
  4. 页面渲染完成

5.3 组件

官方把小程序的组件分为了9大类

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map 地图组件
7. canvas 画布组件
8. 开放能力
9. 无障碍访问

5.4 API

小程序官方把 API 分为了3大类

1. 事件监听：
   • 特点：以 on 开头，用来监听某些事件的触发
   • 举例：wx.onWindowResize(callback) 监听窗口尺寸变化的事件
2. 同步API：
   • 特点：以 Sync 结尾的 API 都是同步 API，同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
   • 举例：wx.setStorageSync(key, value) 向本地存储中写入内容
3. 异步API：
   • 特点：需要通过 success、fail、complete 接收调用的结果
   • 举例：wx.request() 发送网络数据请求，通过success 回调函数接收数据