微信申请号终于在这里。

尽管它仍处于封闭测试阶段，微信仅邀请了一些公司参加封闭测试。大概每个人都在乎申请号的最终形式。如何将“服务编号”转换为“小程序”？

正式宣布的教程

在开始开发应用程序编号之前，请看一下正式的“小程序”教程！ （以下内容来自微信发行的官方“小程序”开发指南）

本教程将逐步引导您创建微信小程序，您可以体验小程序在手机上的实际效果。此小程序的主页将显示欢迎消息和当前用户的微信化身。单击该头像以在新打开的页面上查看当前小程序启动日志。

1.获取微信小程序的AppID

首先，我们需要有一个帐户。如果您可以看到该文档，我们应该已经为您邀请并创建了一个帐户。请注意，服务帐户或订阅帐户的AppID不能直接使用。使用提供的帐户登录，然后可以在网站的“设置”-“开发人员设置”中查看微信小程序的AppID。

注意：如果我们不使用注册时绑定的管理员微信号码，请在手机上体验小程序。然后，我们还需要操作“绑定开发者”。也就是说，在“用户身份开发人员”模块中，您需要体验绑定上小程序的微信号。本教程的默认注册帐户和使用体验是使用管理员微信号码。

2.创建项目

我们需要使用开发人员工具来完成小程序创建和代码编辑。

安装开发人员工具后，打开并使用微信进行扫描以登录代码。选择创建一个“项目”，填写上面获得的AppID，为本地项目设置一个名称（不是小程序 ]名称，例如“我的第一个项目”，然后选择一个本地文件夹作为代码存储目录，只需单击“新建项目”即可。

为了让初学者了解微信小程序的基本代码结构，在创建过程中，如果所选的本地文件夹为空文件夹，则开发人员工具将提示是否需要创建快速启动项目。选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。

成功创建项目后，我们可以单击项目以进入并查看完整的开发人员工具界面，单击左侧导航，然后在“编辑”中查看和编辑我们的代码，并在“调试”中测试在微信客户端上编写代码并模拟小程序的效果，您可以将其发送到手机以预览“项目”中的实际效果。

3.编写代码

在开发人员工具的左侧导航中单击“编辑”，我们可以看到该项目已被初始化并包含一些简单的代码文件。最关键和必不可少的是app.js，app.json和app.wxss。其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序将读取这些文件并生成小程序个实例。

下面我们简要了解这三个文件的功能，这方便从头开始修改和开发我们自己的微信小程序。

app.js是小程序的脚本代码。我们可以监视和处理小程序的生命周期函数，并在此文件中声明全局变量。调用MINA提供的丰富API，例如本示例中的同步存储和同步读取本地数据。

app.json是整个小程序的全局配置。在此文件中，我们可以配置组成小程序的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，不能在该文件中添加任何注释。

app.wxss是整个小程序的公共样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。

4.创建页面

在本教程中，我们有两个页面，即索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在页面目录中。需要将微信小程序中每个页面的[路径+页面名称]写入app.json的页面中，并且页面的第一页是小程序的主页。

每个小程序页面由四个不同的后缀文件组成，它们在同一路径下具有相同的名称，例如index.js，index.wxml，index.wxss，index.json。具有.js后缀的文件是脚本文件，具有.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，具有.wxml后缀的文件是页面结构文件。

index.wxml是页面的结构文件：

在此示例中，用于构建页面结构，绑定数据和交互式处理功能。

index.js是页面的脚本文件。在此文件中，我们可以监视和处理页面的生命周期功能，获取小程序实例，声明和处理数据以及响应页面交互事件。

index.wxss是页面的样式表：

页面样式表不是必需的。当存在页面样式表时，页面样式表中的样式规则将与app.wxss中的样式规则重叠。如果不指定页面的样式表，则还可以直接使用页面的结构文件中app.wxss中指定的样式规则。

index.json是页面的配置文件：

不需要页面的配置文件。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。

日志页面结构

日志页面使用控制标签来组织代码，使用wx：for-items绑定日志数据，并循环日志数据以扩展节点

结果如下：

5.移动预览

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

当前，预览和上传功能尚不可用，您需要等待微信的下一次正式更新。

如您所见，微信给出的官方开发指南仍然非常简单，并且许多细节，代码和功能没有清晰显示。以下是开发教程。

开发教程

1.准备

准备很重要。要开发微信申请号，您需要事先从微信的官方网站（）下载开发工具。

（[1）下载了最新的微信开发人员工具，打开后您会看到以下界面：

（[2）单击“新建网站+”项目，然后将出现以下屏幕：

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

AppID：根据官方说明填写。

Appname：项目的最外层文件夹的名称。如果将其命名为“ ABC”，则所有后续项目内容都将保存在“ / ABC / ...”目录中。

本地开发目录：项目存储在本地目录中。

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

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

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

2.项目框架

微信当前，用户组非常大。正式帐户启动后，每个人都可以看到它的受欢迎程度，它也促进了H5的快速发展。随着官方帐户业务的需求变得越来越复杂，应用程序帐户“现在到来”是正确的。

在阅读了文档一两次之后，我们发现基于微信提供的桥接工具，它向开发人员提供的方式也在经历着从操作DOM到操作数据的全面变化。在官方帐户中很难达到h5有点类似于混合动力开发。

与混合开发方法不同：微信开放接口更加严格，并且结构必须采用他提供给我们的组件。此处不能使用外部框架和插件，从而使开发人员可以与DOM完全分开，开发思想已经发生了很大变化。

工人要想尽力而为，首先必须磨砺工具。了解其核心功能，首先了解其整个操作过程非常重要。

生命周期：

在index.js中：

在开发人员工具控制台上，您可以看到：

在主页控制台上，您可以看到订单为App Launch-> App Show-> onload-> onShow-> onReady。

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

您可以想象在这里可以处理很多事情，例如可以执行装载箱之类的事情。

路线：

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

wx.navigateTo（OBJECT）：保留当前页面，跳至应用程序中的页面，使用wx.navigateBack返回原始页面。

wx.redirectTo（OBJECT）：关闭当前页面并跳转到应用程序中的页面。

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

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

组件：

这次微信在组件供应方面也很全面，基本上可以满足项目的需求，因此开发速度非常快，可以在开发前仔细浏览几次，开发效率将达到很好。

其他：

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

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

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

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

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

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

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

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

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

Color是底部的字体颜色，selectedColor是用于切换到页面的突出显示颜色，borderStyle是切换菜单上方的一行颜色，backgroundColor是底部菜单栏的背景颜色。文字描述比较抽象，建议您逐一调试并检查其效果，以加深印象。

“列表”下的代码顺序必须一个接一个地放置，并且不能随意更改

在.pagexml后的文件名中隐藏了.wxml后缀。这是微信开发代码中人性化的一点，它可以帮助您节省编写代码的时间，而无需经常声明文件后缀。

“ iconPath”是未获得的显示页面的图标路径，这两个路径可以直接是网络图标。

“ selectedIconPath”是当前显示页面上突出显示的图标的路径，可以将其删除。删除后，默认情况下该图标将显示为“ iconPath”。

“文本”是页面标题，也可以删除。删除后，将仅显示该图标。如果只删除其中一个，该职位将被占用。

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

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

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

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

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

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

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

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

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

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

1 1.“ Js”文件需要在“ app.json”文件的“页面”中预先配置。为了阐明项目结构，我在示例项目的索引主页的同一目录中创建了其他四个页面文件，如下所示：

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