小程序简介Day1

一、小程序简介

1.小程序与普通网页开发的区别

        （1）运行环境不同：微信 VS 浏览器

        （2）API不同：小程序无法调用DOM和BOM的API，但提供了地理定位、扫码、支付等API

        （3）开发模式不同：网页是浏览器+代码编辑；小程序要申请账号+安装开发工具+配置项目

二、第一个小程序

1.注册小程序开发账号：https://mp.weixin.qq.com

2.获取AppID

​

 

3.下载开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

4.主界面5个组成部分

​

三、小程序代码构成

1.页面组成部分

小程序所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在。其中，每个页面由 4

个基本文件组成，它们分别是：

        ① .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）

        ② .json 文件（当前页面的配置文件，配置窗口的外观、表现等）

        ③ .wxml 文件（页面的模板结构文件）

        ④ .wxss 文件（当前页面的样式表文件）

2.JSON配置文件作用

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例

外：通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。小程序项目中有 4 种

json 配置文件，分别是：

        ①项目根目录中的 app.json 配置文件：页面路径、窗口外观、界面表现、底部 tab 。

        ②项目根目录中的 project.config.json 配置文件：编译配置、项目名称、AppID。

        ③项目根目录中的 sitemap.json 配置文件：配置小程序页面是否允许微信索引。

        ④每个页面文件夹中的 .json 配置文件：窗口外观配置，会覆盖app.json的window配置。

3.新建小程序页面和修改项目首页

 app.json -> pages 中新增页面的存放路径以及调整 app.json -> pages 页面路径数组的前后顺序。

四、小程序宿主环境

1.小程序的通讯模型

2.小程序启动过程

① 把小程序的代码包下载到本地

② 解析 app.json 全局配置文件

③ 执行 app.js 小程序入口文件， 调用 App() 创建小程序实例

④ 渲染小程序首页

⑤ 小程序启动完成

 3.页面渲染过程

① 加载解析页面的 .json 配置文件

② 加载页面的 .wxml 模板和 .wxss 样式

③ 执行页面的 .js 文件， 调用 Page() 创建页面实例

④ 页面渲染完成