概述

小程序与普通网页的区别

• 环境不同

网页运行在浏览器环境中，小程序运行在微信环境中

• API不同

小程序无法调用DOM和BOM，可以调用微信提供的各种API，如地理定位、扫码、支付

• 开发环境不同

网页需要浏览器+代码编辑器，小程序要申请开发账户，安装小程序开发者工具，创建和配置小程序项目

关键目录结构

• utils 工具函数目录
• pages 页面文件目录
• 样式文件 app.wxss
• 入口文件 app.js
• 页面配置文件 app.json

页面内目录

• .js, 页面脚本文件，存放页面数据，处理事件函数
• .json, 当前页面的配置文件，配置窗口的外观、表现
• .wxml, 页面的模板结构文件
• .wxss, 页面的样式表文件

app.json文件

• pages: 记录当前小程序所以页面的路径
• window: 全局定义小程序所有页面的背景色，文字颜色等。
• style: 全局定义小程序组件所使用的样式版本
• sitemapLocation: 指明sitemap.json的位置

project.config.json文件

项目配置文件，记录我们对小程序开发工具所做的个性化配置。

• setting，保存了编译相关的配置
• projectname，保存的是项目名称
• appid，保存小程序的账号ID

sitema.json文件

配置小程序页面是否允许微信索引。当用户搜索时能被搜索到。

页面中的.json配置文件

配置本页面的窗口外观，会覆盖全局.json的相同配置项。

新增页面，设置首页

app.json->pages新增路径，工具会自动创建页面文件。

默认第一个是首页

"pages": [
  "pages/home/home"
  "pages/list/list"
]

WXML及WXML与HTML的区别

• 标签名称不同

HTML(div, span, img, a) ; wxml(view, text, image, navigator)

• 属性节点不同
• 提供类似Vue的模板语法

宿主环境

安卓、iOS是两个不同的宿主环境。

手机微信是微信小程序的宿主环境。其他小程序同理。

小程序宿主环境--通信模型

小程序通信的主体是渲染层和逻辑层，其中wxml模板和wxss样式工作在渲染层。

渲染层和逻辑层通过微信客户端进行转发，逻辑层和第三方服务器也由微信客户端进行转发。

小程序启动过程

1.小程序代码包下载到本地 2.解析app.json全局配置文件 3.执行app.js小程序入口文件，调用App()创建小程序实例 4.渲染小程序首页 5.小程序启动完成

页面渲染过程

1. 加载解析页面的.json配置文件
2. 加载页面的.wxml模板和.wxss样式
3. 执行页面的.js文件，调用Page()创建页面实例
4. 页面渲染完成