今天是一个特殊的日子。2020.4.4全国哀悼日。沉痛悼念在抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞。山河无恙，因为英雄逆行；幸福如故，勿忘逝者同胞。哪有什么岁月静好，都是有人替我们负重前行，致敬英雄。

10点已到，先让我默哀3分钟。。。。。。。。

无论什么样的风雨，都阻挡不住中华民族的前进的脚步。我把这3天学习的微信小程序步骤总结一下。为中国加油！

学习步骤如下

1：小程序注册

2：下载开发工具并安装

3：认识开发工具

4：主配置文件介绍

5：其它文件介绍和数据绑定

6：认识各种组件

7：进行编程案例

8：发布自己的小程序

一、小程序注册

在公众平台首页、点击注册按钮。具体注册步骤这里不再赘述，

注意的是，以什么身份注册笔者是以个人的身份注册的

二、下载开发工具

注册成功后，登录之后点击左侧的开发标签。然后进行工具下载

选择版本。笔者下载了两个，区别稍后说

安装稳定版（稳定版和开发版区别可能是效果不一样。笔者完成项目发布之后效果不是很理想，与模拟器有差别）

安装完毕，打开微信扫描登录

1、首次登录进入开发工具如下页面

2、点击“+”创建项目

注意：APPID位置

填入APPID之后点击新建之后如下页面

获得头像

三、认识开发工具

1、主要工具部分介绍

1）、主要认识如下图

各部分需要在实际使用的时候在自己体会

2）、网页开发和微信小程序开发文件对比如下图更加直观

对应的功能是一一对应的

2、新建一个项目的页面主体部分介绍

介绍：

在项目的主目录下有两个子目录，和5个文件

其中以app开头的是小程序的描述文件这三个app开头 的文件不属于任何一面，这三个文件必须放在主目录下名称也是固定的，project.config.json是开发工具的配置项这几项通常放在主目录下，不要动他

App.js是小程序的主描述文件，主要用来注册小程序

App.json是小程序的主配置文件，对微信小程序进行全局配置

App.wxss这项可以缺少，这这配置的样式其它页面可以共享

 

Pages目录下有两个子目录，index目录和logs目录

Pages下的每个目录表示的是下面那个区域的每个页面

pages下的一个目录代表一个页面，index和logs就是两个页面

每个页面下又都有4个文件

他们的文件名与他们的目录名是对应的因为框架特殊规定，方便管理

Utail是放工具代码的地方，出了放工具代码，我们还要放音频，视频，图片的目录，这些目录可以在主目录下自行创建

3、调试工具简单介绍（简单了解调试器）

 

 

调试器通常有9个模块，这里10个和之前接触的浏览器F12的调试是差不多的

Console:后面讲控制面板

Source：显示脚本文件

Network:网络相关的

Security:安全相关的

Storage:缓存，

Appdata:显示具体的数据

Wxml:在模拟器中调试我们的样式，

Sensor:xx感应的

Trace:手机调试

4、文件管理和快捷键使用

1）、创建子目录（image）并添加图片

那么如何添加一张图片呢？复制到这里？这是不允许的

只有找到项目的目录文件，img文件夹复制到文件夹里才可以。

然后就可以看见了

2）删除img下的文件或者目录

删除的时候，如果删除img目录，则下面的文件全部删除了

右键删除

其它类似的操作上图右键有即可操作

3）如何创建一个新的页面

创建页面（在page文件夹下创建一个文件夹即可）

4）快速找到项目文件位置

5）快捷键

四、主配置文件介绍（app.json）

 

工具打开以后会找app.json找不到会抛错

创建项目时会自动创建如下图

介绍

具体配置

练习创建一个cart页面（两种办法如下）

1. 自己在page页面下创建一个cart文件夹，然后创建4个同名的后缀不同文件，然后在app.json引入，一般pages标签下第一个就是首页，可以查看
2. 在app.json下pages引入编写，保存，会自动在page下创建文件夹和4个必要的文件（推荐，笔者自己喜欢的方式）

上面的每一个标签都要自己去练习吧。

笔者今天先总结到这里，其它部分分下次总结

笔者的小程序已经发布.感兴趣的在微信小程序中搜索：敬业的小码哥计算器

原创不易，点个赞吧