小程序项目结构及项目启动过程和页面渲染过程

微信开发者初识

编辑器

一级工具

1. 项目—>退出当前项目

2. 格式化代码—>shift+alt+f

3. 工具—> 构建npm

4. 详情—>本地设置：【使用npm模块，不校验合法域名】

|
|

项目结构

项目结构

pages：视图组件(页面)

由四个文件组成一个页面

• js文件：写逻辑的

• json：当前页面的配置文件

• wxml：页面，标签，dom片段

• wxss：当前页面的样式

utils：全局工具

自定义的一些纯js工具，比如时间格式化插件等。

app.js：全局入口文件

等价于vue里的main.js，拥有自己的生命周期。

app.json：全局配置文件

配置项目的整体控制，比如说全局的样式，底部的导航等。

app.wxss：全局样式

微信对css的封装，有很多样式，比如选择器微信支持程度不高。

project.config.json：项目配置文件

该文件就是版本管理中的本地配置，用来配置项目的。

sitemap.json：爬虫名单

给微信平台里的爬虫看的，告诉微信平台项目里哪些内容是公开的，可以被别人搜到的。

项目启动过程

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

页面渲染过程

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