初学者制作微信小程序的简单入门教程

小程序已经成为中国重要的前端业务，与Web和移动应用程序同等重要。小程序开发者供大于求，市场招聘需求异常旺盛，企业争相抢购。

尽管如此，还是缺乏关于小程序的教程。它们要么不够系统，要么过于跳跃。很多关键点只有寥寥数语，让初学者一头雾水。当我自学时，我很难找到更好的教程。

本文是我的小程序学习笔记，整理成教程的形式，希望对初学者有用。我讲一下需要学习的主要知识点。我的目标是，读完本教程后，您将能够学习如何编写小程序。

考虑到很多同学没有开发经验，小程序是他们首先接触的开发领域。我会详细解释一下，希望新人能够毫无困难地阅读本教程。

1.什么是小程序？

在学习小程序之前，我们先简单说一下什么是小程序。

从字面上看，小程序就是微信中的一个应用程序。外部代码以小程序的形式在微信移动应用中运行。

不过，更准确的说法是，小程序可以看作是只能用微信打开和浏览的网站。小程序的技术模型与网页相同，使用的语言和CSS样式也相同，只是网页的HTML标签稍微修改为WXML标签。因此，小程序页面本质上就是网页。

小程序的特别之处在于，虽然是网页，但不支持浏览器，所有浏览器API都无法使用。只能使用微信提供的API。这也是小程序只能用微信打开的原因，因为底层已经彻底改变了。

2. 小程序的优势

小程序最大的优势就是基于微信。

微信App的大部分功能（如拍照、扫描、支付等）都可以在小程序中使用。微信提供了各种封装的API。开发者不需要自己实现，也不需要考虑iOS和之间的平台差异。只需一行代码即可调用它们。

而且，开发者无需考虑用户注册和登录。他们直接使用微信注册登录。微信用户自动成为您的用户。

3.知识准备

由于小程序是基于Web技术的，所以在学习之前最好了解一点Web开发知识。具体来说，需要以下两方面的知识。

(1)语言：了解基本语法，能够编写简单的JS脚本程序。

(2)CSS样式：了解如何使用CSS来控制网页元素的外观。

另外，虽然HTML标签和浏览器API不是必备知识，但了解浏览器如何渲染网页对于理解小程序模型有很大帮助。

总的来说，先学习Web开发，再学习小程序是比较合理的方式。而且Web开发的资料很多，很容易找到问题的解决方案。然而Web开发需要学习的东西太多，不是短时间内能够掌握的。如果你想快速入门，先学习小程序也未尝不可，遇到不懂的地方再查资料。

4、开发准备

开发小程序的第一步是在微信公众平台注册并申请。这是免费的。

申请完成后，您将获得（小程序编号）和（小程序密钥），稍后会用到。

然后，下载微信提供的小程序开发工具。这个工具是必需的，因为只有它才能运行和调试小程序源代码。

开发人员工具支持和两个平台。我安装的是（64位）版本，本教程的内容也是基于该版本的，但是该版本的操作应该是完全一样的。

安装并打开该软件后，会要求您使用微信扫描二维码登录。

登录后，进入新建项目页面，可以创建不同的项目。默认是新建一个小程序项目。

点击右侧+号，弹出新建小程序页面。

如果直接新建一个小程序，就会生成一个完整的项目脚手架。对于初学者来说，这不利于掌握每个文件的作用。更好的学习方法是从头开始手写每一行代码，然后切换到“导入项目”选项将其导入到开发人员工具中。

导入的时候需要给小程序起一个名字，并填写项目代码所在的目录，以及之前申请的那个。

5. 示例

现在，我邀请你行动起来，写一个最简单的小程序，只需五分钟就可以完成。

第一步，为小程序创建一个新的项目目录。你可以随意命名，这里叫--demo。

您可以在资源管理器中创建一个新目录。如果你熟悉命令行操作，也可以打开它（如果不熟悉，需要安装），在里面执行以下命令，新建一个目录并进入。

> --演示

> cd --演示

第二步，在目录下新建脚本文件app.js。该脚本用于初始化整个小程序。

app.js的内容只有一行代码。

应用程序（{}）;

上面代码中，App()是小程序原生提供的。该函数的意思是创建一个新的小程序实例。它的参数是一个配置对象，用于设置实例的行为属性。这个例子不需要任何配置，所以只使用一个空对象。

第三步，新建一个配置文件app.json，记录项目的一些静态配置。

app.json 是 JSON 格式。 JSON是一种基于语言的数据交换格式。它只有五个语法规则，非常简单。不熟悉JSON的同学可以参考这个教程。

app.json文件的内容必须至少有一个属性来指示小程序包含哪些页面。

{“”：[“/home/home”]}

上面的代码中，属性是一个数组，数组中的每一项都是一个页面。在本例中，小程序只有一页，因此数组只有一项 /home/home。

/home/home 是一个三级文件路径。

第四步是创建一个新的 /home 子目录。

$ -p /home

然后，在此目录中创建一个新的脚本文件 home.js。文件内容如下。

页（{}）;

在上面的代码中，Page()是由小程序本地提供的。它是用于初始化页面实例的函数。它的参数是一个配置对象，用于设置当前页面的行为属性。这是一个空对象，这意味着没有设置任何属性。

第五步，在/home目录下创建一个新的home.wxml文件。 WXML是微信页面标签语言，类似于HTML语言，用于描述小程序页面。

home.wxml的内容很简单，只写一行。

至此，基本就完成了。现在，打开小程序开发工具，导入项目目录--demo。如果一切正常，就可以在开发者工具中看到运行结果。

点击工具栏上的“预览”或“真机调试”按钮，您还可以在手机上查看真机运行结果。

6.WXML标签语言

上一节中的 home.wxml 文件仅包含最简单的一行。实际开发中，你不会这样写，而是添加各种标签，以便后面添加样式和效果。

小程序的WXML语言提供了各种页面标签。接下来，修改 home.wxml 并添加两个最常用的标签。