1.3微信小程序开发基础.pptx

微信小程序开发基础1.3

熟悉微信小程序的项目结构，能够解释每个文件的作用1.3.1微信小程序的项目结构先定一个小目标！

1.3.1微信小程序的项目结构微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构，如下图所示。

1.3.1微信小程序的项目结构pages：用于存放微信小程序的所有页面。.eslintrc.js：用于格式化代码，使代码风格保持一致。app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑。app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等。app.wxss：微信小程序的全局样式文件，文件可以为空。project.config.json：在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要栽入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。

1.3.1微信小程序的项目结构project.private.config.json：用于保存微信开发者工具的私人配置，配置的优先级高于project.config.json。sitemap.json：用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件，则默认为所有页面都允许被索引。微信现已开放微信小程序页面的搜索，也就是说微信小程序里面的内容也能被微信搜索引擎搜索到。当开发者允许微信小程序页面被微信索引时，微信会通过爬虫的形式，为微信小程序的页面建立索引。当用户的搜索词条触发该索引时，微信小程序的链接地址将可能展示在搜索结果中。

1.3.1微信小程序的项目结构在微信客户端中启动微信小程序的步骤。把整个微信小程序的代码包下载到本地。解析app.json全局配置文件，通过该文件解析出微信小程序的所有页面路径。执行app.js入口文件，调用App()函数创建微信小程序的实例。渲染微信小程序的首页。

熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用1.3.2微信小程序的页面组成先定一个小目标！

1.3.2微信小程序的页面组成一个微信小程序是由一个或多个页面组成的，这些页面被存放在pages目录中。下面以pages目录下的index页面为例展示其组成部分，index页面的组成部分如下图所示。由上图可知，index页面由4个文件组成，分别是index.js、index.json、index.wxml和index.wxss。

1.3.2微信小程序的页面组成微信小程序页面的index.js、index.json、index.wxml和index.wxss文件分别使用JS、JSON、WXML和WXSS语言编写，关于这4种语言的你了解多少呢？

1.3.2微信小程序的页面组成JS：类似网页制作中的JavaScript语言，用于实现页面逻辑和交互，文件扩展名为.js。需要注意的是，微信小程序中的JS不含DOM和BOM，但它提供了丰富的API，可以实现许多特殊的功能，例如微信登录、音频播放、文件上传等。JSON（JavaScriptObjectNotation，JavaScript对象符号）：用于利用JSON语法对页面进行配置，文件扩展名为.json。

1.3.2微信小程序的页面组成WXML（WeiXinMarkupLanguage，微信标记语言）：类似于网页制作中的HTML语言，用于构建页面结构，文件扩展名为.wxml。WXSS（WeiXinStyleSheets，微信样式表）：类似于网页制作中的CSS语言，用于设置页面样式，文件扩展名为.wxss。

1.3.2微信小程序的页面组成微信客户端在加载微信小程序页面时的步骤。读取并解析页面中JSON文件的配置。加载页面的WXML文件、WXSS文件和JS文件，实现页面渲染。其中，页面中WXSS文件的样式会覆盖项目根目录下的app.wxss文件中相同的全局样式；页面中JS文件的Page()函数会被调用，用于创建页面实例。

熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式1.3.3微信小程序的通信模型先定一个小目标！

1.3.3微信小程序的通信模型微信小程序实现了渲染层、逻辑层和第三方服务器的通信。WXML和WXSS工作在渲染层，用于实现页面的渲染。JS工作在逻辑层，用于实现页面的逻辑。

1.3.3微信小程序的通信模型微信小程序的通信模型分为两个部分。第1部分是渲染层与逻辑层之间的通信，即将逻辑层的数据渲染到页面中。第2部分是逻辑层和第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据。

1.3.3微信小程序的通信模型为了帮助读者更好地理解