知识储备

:::tip 你需要具备的基础能力 这不是0基础教程，你需要首先具备html、css和一些JavaScript知识 :::

小程序是什么

微信是中国使用量最大的手机 App 之一，市场极大。2017年，微信正式推出了小程序，允许外部开发者在微信内部运行自己的代码，开展业务，截止2020年6月，小程序数量已经超过了550万个。
小程序可以视为只能用微信打开和浏览的网站。 小程序和网页的技术架构是几乎一样的，用到的 JavaScript脚本语言和 CSS 样式表也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签。所以，小程序页面本质上就是网页。

小程序和h5的区别

​网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
:::tip 总结来说，小程序和WEB开发在语言上相通，但是内核不相通。 :::

注册微信小程序

前往微信公众平台 (opens in a new tab)，注册小程序。
点击“小程序”进入注册。

填写一个尚未在公众平台注册过的邮箱，完成如下设置后，点击注册。

此时，腾讯会给你的这个邮箱发一条验证码，点击链接验证即可。

填写主体信息，选择“个人”。

填写管理员信息，进行身份验证（很快！）

您也可以用已经存在的公众号注册小程序 (opens in a new tab)
完成注册后，进入管理界面。 点击设置，拉到最下边，获取AppID（重要）并记录下来。


在基本设置中完善小程序信息，类别随意选择。
:::caution 您不需要进行微信验证，这是花钱的。是商业性App需要的东西。
:::

进入微信开发工具下载界面 (opens in a new tab)下载微信开发工具。选择Stable版即可。
不出意外的话，您的电脑应该是64位。
:::tip 🔔 建议不要安装在C盘。 ::: 安装完成后，打开。

添加开发者

在微信小程序管理平台上，选择添加协同开发者。

为所有人添加权限。

创建小程序

如图，打开微信开发者工具，新建一个小程序，确定好小程序的工程名、路径，填写刚刚记录下来的AppID，后端服务不用管，一般刚注册时是没有云开发的。选择下面的空白模板。

注意，一定要使用空白模板！

如下，工程就建立好了：

小程序的结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

app.js : 小程序逻辑
app.json : 小程序公共配置
app.wxss : 小程序公共样式表，所有的页面都要遵循这个里面的css配置

一个小程序页面由四个文件组成，分别是：

js :页面逻辑
wxml :页面结构
json :页面配置
wxss :页面样式表

微信开发IDE界面

Hello World

新建页面

下面将通过实际操作，帮助你写一个Hello World Demo！
先在Pages文件夹上右键-新建文件夹。

然后在这个文件夹上新建页面，命名为Hello World。


如此，系统就自动生成了一个页面的四个必须文件。

将页面设置为主页

找到app.json。

app.json的pages配置项集合的第一条就是默认的主页。
我们把刚刚自动生成的helloworld页面配置移到最前面。

注意，配置项的最后一条末尾必须没有逗号。
按住ctrl+s，保存工程，自动编译，左边的模拟器就会将刚刚设置的页面渲染出来。

编写wxml代码

删掉原有的代码。将右边的编辑区清空。

让我们把原有的div想象成view，编写下面的嵌套盒子。

<view>
  <p>Hello World!</p>
</view>

Ctrl+s保存，在左边的渲染器中可以看到新写的代码。

编写wxss代码

简单的代码wxml代码似乎有点空洞，那我们开始写css（wxss）吧！
修改wxml代码，为盒子添加class类。

<view class="text_box">
  <p class="p1">Hello World!</p>
</view>

打开helloworld.wxss文件，编写样式代码。

.text_box{
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: center;
  margin-top: 100rpx;
}
.p1{
  font-size: 70rpx;
  color: aqua;
}

保存文件之后左边的模拟器刷新渲染，可以看到新的样式。

:::caution 注意单位rpx 为了更好的适配不同的屏幕大小，所以小程序使用相对单位 rpx ，小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此，无论在iPhone13pro上还是iPhone 13 Mini上都是如此。1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px。在后面的开发中，请广泛使用rpx。 :::

到这里，准备操作就做完了。