小程序学习day01-小程序与普通网页开发的区别、设置微信开发者工具的外观和代理、创建小程序项目、如何查看项目效果、小程序代码构成、主界面的5个部分

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

（1）运行环境不同

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

（2）API不同

由于运行环境的不同，在小程序中无法调用DOM和BOM的API，但是小程序可以调用微信环境提供的各种API，比如：地理定位、扫码、支付等

（3）开发模式不同

网页的开发模式：浏览器+代码编辑器；

小程序开发模式：申请开发账号、安装小程序开发者工具、创建和配置小程序项目

2、设置微信开发者工具的外观和代理

（1）设置外观

1）点击“设置”

2）选择“外观”，设置自己喜欢的主题色等

（2）代理

1）点击“代理”

2）选择“不使用任何代理，勾选后直连 网络”

3、创建小程序项目

（1）点击“小程序”，点击“+”

（2）填入项目名、选择路径、测试号、模版（js）

成功新建：

4、如何查看项目效果

（1）通过“模拟器”

（2）通过“真机预览”

5、主界面的5个部分

（1）菜单栏

        1）设置（常用的通用、外观以及快捷键设置）

               

        2）帮助（常用“开发者文档”）

                

（2）工具栏

        1）通过点击控制“模拟器”、“编辑器”、“调试器”模块的出现

        

（3）模拟器（通过模拟器查看项目效果）

（4）编辑器（通过app.js编辑代码）

（5）调试器（常用箭头和console查看和调试代码）

6、小程序代码构成

（1）项目的基本组成结构

1）pages（用来存放所有小程序的页面，所有小程序的页面以单独的文件夹存在，每个页面有4个基本组成文件）

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

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

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

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

2）utils（用来存放工具性质的模块（比如：格式化时间的自定义模块））

3）app.js（小程序项目的入口文件）

4）app.json（小程序项目的全局配置文件）

5）app.wxss（小程序项目的全局样式文件）

6）project.config.json（项目的配置文件）

7）sitemap.json（用来配置小程序及其页面是否允许被微信索引）