查看“小程序案例：Hello World”的源代码

==创建第一个实验项目==


===创建小程序===

登陆微信web开发者工具

点击右边图片中的加号，即可开始创建小程序

[[文件:wx1-46.png|700px]]

新建项目

[[文件:wx1-47.png|700px]]

如果不使用测试号，也可直接使用自己的AppID

点击“新建”按扭，进入编辑页面

[[文件:wx1-48.png|700px]]

调试器类似于Google Chrome浏览器中的开发者工具：

*Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。
*Sources：源代码面板，可以查看或编辑源代码，并支持代码调试。
*Network：网络面板，记录网络请求信息，根据它可进行网络性能优化。
*Security：安全面板，用于调试页面的安全和认证等信息，如HTTpS。
*AppData：App数据面板，可以查看或编辑当前小程序运行时的数据。
*Audits：审计面板，用于对小程序进行体验评分。
*Sensor：传感器面板，用于模拟地理位置、重力感应。 
*Storage：存储面板，用于查看和管理本地数据缓存。
*Trace：跟踪面板，用于真机调试时跟踪调试信息。
*Wxml：Wxml面板，用于查看和调试WXML和WXSS


创建第一个实验项目

[[文件:wx1-49.png|700px]]


通过调试器 可以查看某段代码对应的网页中的哪个组件：

[[文件:wx20-1-7.png|700px]]

快捷键：设置 -> 快捷键设置 for example,可以为文档搜索设置快捷键

项目设置：勾选这几个选项：增强编译、使用npm、不校验合法域名（测试环境下使用）

搜索面板：Ctrl+ p 可以快速跳转到某个文件。


创建完项目，可以返回主页面对项目进行预览和管理

[[文件:wx1-50.png|700px]]

===编辑小程序===
[[文件:wexin22012301.png|600px]]
==逻辑层初步介绍==
小程序页面“一切皆组件”；一切都可以视为组件

Utils: 写自定义逻辑的函数,可以将一些公共的代码抽离成为一个单独的 js (utils.js)文件，作为一个模块;

Page:页面

一个页面包含4个文件

除了视图层（即我们所看到的页面），小程序逻辑层各部分的功能如下：

*index.js 逻辑代码

*index.json 页面配置文件

*index.wxml 页面结构

*index.wxss 表示index.wxml结构的样式

app.js app.json app wxss的作用与index是类似的，但它们作用于全局

在后续的课程中我们将对逻辑层进行更深入的讲解。


参考文档：https://www.dcxueyuan.com/user/data/preview.html?id=18500&url=/common/download?urlPath=https://pu-datacastle.obs.cn-north-1.myhuaweicloud.com/content/disk/train/other/07b4a83d-a0a5-4eae-95f1-3ab551a72490.html