1.移动预览

在开发人员工具左侧的菜单栏中选择“项目”，单击“预览”，然后在扫描代码后即可在微信客户端中体验它。

当前，预览和上传功能尚不可用，我们需要等待官方微信帐户的下一次更新。

如您所见，微信给出的官方开发指南仍然非常简单。许多细节，代码和功能没有清楚地显示出来，因此现在是展现自己实力的时候了！开发教程已正式开始！

第1章：准备工作

准备工作非常重要。要开发微信应用程序帐户，您需要事先从微信的官方网站下载开发人员工具。

1.下载最新的微信开发人员工具，打开该界面后，您将看到此界面：

2.单击“新建网络+”项，然后将出现以下屏幕：

3.此页面上的所有内容都需要注意-

注意：再次，如果您和团队成员一起开发项目，建议您使用相同的目录名和本地目录，以确保协作开发的统一性。如果您以前有一个项目，则导入过程与上述内容相似，因此我不再赘述。

4.完成所有准备工作后，单击“新建项目”按钮，将弹出一个弹出框，然后单击“确定”。

5.如上图所示，目前，微信开发人员工具已自动为您构建了一个初始演示项目，其中包含微信应用程序项目的基本内容和框架结构。单击项目名称（即图片中的“”）进入该项目，您可以看到整个项目的基本结构：

第2章：项目框架

微信目前拥有非常庞大的用户群。微信官方账号启动后，每个人都可以看到它的流行，也促进了h5的快速发展。随着对官方帐户的需求变得越来越复杂，应用程序帐户也正变得越来越正确。一两次阅读文档后，我们的团队发现，它为开发人员提供的方式也在发生全面的变化。从操作DOM到操作数据，基于微信提供的桥接工具，很难在官方帐户上实现大量的h5。实现的功能与开发有点类似，但是与开发方法不同：微信的开放界面更加严格，结构必须采用他提供给我们的组件。此处不能使用外部框架和插件，从而使开发人员可以完全无需操作DOM，而开发思路已发生了很大变化。

如果工人想做好自己的工作，则必须首先对其工具进行修磨。了解其核心功能，首先了解其整个操作过程非常重要。

生命周期：

在.js中：

您可以在开发人员工具上看到：

在主页上，您可以看到订单为App-> App Show->->->。

首先是整个应用程序的启动和显示，可以在app.js中配置该应用程序的启动，然后输入每个页面的加载显示。

可以想象这里有很多可以处理的东西，例如可以实现装载箱之类的东西，等等。

路线：

路由一直是项目开发的核心。实际上，微信在这里介绍的路由很少。可以看出，微信已经很好地封装在路由中，并且还提供了三种跳转方法。

wx。（）：保留当前页面，跳转到应用程序中的页面，使用wx。返回原始页面。

wx。（）：关闭当前页面并跳至应用程序中的页面。

wx。（）：关闭当前页面并返回上一页。

这三个基本上就足够了。在路由方面，微信封装非常好。开发人员根本不需要配置路由。通常，许多框架在路由配置中都很麻烦。

组件：

这次，微信在组件供应方面也非常全面，基本上可以满足项目的需求。因此，开发速度非常快。您可以在开发之前先阅读几遍，开发效率会很好。

其他：

基本上没有任何外部框架和插件，即使原生js插件也很难使用，因为过去我们的js插件基本上都以操作dom的形式存在，并且结构这次微信应用程序帐户的帐户是不允许进行任何dom操作，甚至不支持我们以前使用的动态设置的rem.js。

这次微信还提供了，您可以直接使用它进行聊天，而且发展空间很大。

与官方帐户相比，我们发现开发应用程序帐户是组件化，结构化和多样化的。新世界总是充满惊喜，越来越多的复活节彩蛋正等着大家来发现。

现在让我们做一些简单的代码！

1.查找项目文件夹并将其导入到编辑器中。在这里，我使用了文本编辑器。您可以根据自己的开发习惯选择喜欢的编辑器。

2.接下来，您需要根据自己的项目内容调整项目结构。在示例项目中，“”目录主要包含“”页面和应用程序的一些配置文件。

3.示例项目的“”是五个菜单按钮：

4.查找“ app.json”文件以配置这五个菜单。在代码行中找到““”“：

您可以根据实际项目要求进行更改，其中：

注意：微信的底部菜单最多支持五列（五列），因此在设计微信应用程序的用户界面和基本结构时，必须事先考虑菜单栏的布局。

5.根据上述代码规则，我准备了示例项目的基本结构供您参考：

6.配置“ Json”文件后，上图显示了“”的基本结构。可以暂时删除所有不必要的子集，并且需要主动创建丢失的子集。删除子集时，请记住检查是否同时删除了“ app.json”中的相关内容。

注意：我个人建议您创建一个新的“ wxml”文件并一起创建相应的“ js”和“ wxss”文件，因为微信应用程序帐户的配置功能是在解析“ wxml”文件时，将在同一级别的目录中同时找到具有相同文件名的“ js”和“ wxss”文件，因此需要及时在“ app.json”中预先配置“ js”文件。

编写“ wxml”时，只需根据微信应用程序帐户提供的接口进行编码，其中大多数是先前的“ div”，但是我们现在可以使用“ view”。需要其他子集时，可以根据微信提供的界面进行选择。

使用“”名称设置样式，“ id”名称在这里基本上没有用。主要是操纵数据，不要操纵“ dom”。

7.上面是示例项目主页的“ wxml”代码。从图中可以看出，实现页面的代码量很小。

8.“ Wxss”文件是导入的样式文件。您也可以直接在其中编写样式。在示例中使用了导入方法：

9.修改代码并刷新一次之后，您可以看到没有背景的“视图”标签直接变成了粉红色。

注意：修改“ wxml”和“ wxss”下的内容后，可以直接使用F5刷新以直接查看效果。如果您修改“ js”，则需要单击重新启动按钮才能看到效果。

1 0.此外，可以在“ app.wxss”中直接引用公共样式。

1 1.“ Js”文件需要在“ app.json”文件的“页面”中预先配置。为了阐明项目结构，我在示例项目的“”主页的同一目录中创建了另外四个页面文件微信小程序关注公众号开发，如下所示：

完成上述步骤后，案例中的五个底部菜单均已配置。