雷锋网注释：本文的作者是程序员Bokajun。 Leifeng.com已被作者授权发布。拒绝擅自转载！
微信申请号（小程序，申请号的新名称）终于在这里！
它仍处于内测阶段，微信仅邀请了一些公司参加内测。大概每个人都在乎申请号的最终形式是什么样的？如何将服务帐户转换为小程序？
目前，让我们使用一个简单的第三方工具示例来演示开发过程。公司的项目属于机密信息，无法共享代码和屏幕截图。博卡先生在加班时偷偷地为每个人写教程。感谢名片盒团队提供的服务号码来执行此操作。
好的，为了让所有人尽快看到本教程，博卡先生注定要熬夜！更新将于今晚开始，我希望明天早上发布第一个教程！录制开始！看看几天后是否可以完成转换！
前言
在开始开发应用程序编号之前，请看一下官方小程序教程！以下内容来自微信发行的官方小程序开发指南。
本文档将带您逐步创建微信小程序，您可以在手机上体验小程序的实际效果。此小程序的主页将显示欢迎消息和当前用户的微信化身。单击该头像以在新打开的页面上查看当前小程序启动日志。
1.获取微信小程序的AppID
首先，我们需要有一个帐户。如果您可以看到该文档，我们应该已经为您邀请并创建了一个帐户。请注意，服务帐户或订阅帐户的AppID不能直接使用。使用提供的帐户登录，然后可以在网站的“设置”-“开发人员设置”中查看微信小程序的AppID。
注意：如果我们不使用注册时绑定的管理员微信号码，请在手机上体验小程序。然后，我们还需要操作“绑定开发人员”。即，在“用户身份-开发人员”模块中，您需要体验绑定上小程序的微信号。本教程的默认注册帐户和使用体验是使用管理员微信号码。
2.创建项目
我们需要使用开发人员工具来完成小程序创建和代码编辑。
安装开发人员工具后，打开并使用微信进行扫描以登录代码。选择创建“项目”，填写上面获得的AppID，为本地项目设置一个名称（不是小程序名称）（例如“我的第一个项目”），然后选择一个本地文件夹作为代码存储。对于目录，请单击“新建项目”。
为了让初学者了解微信小程序的基本代码结构，在创建过程中，如果所选的本地文件夹为空文件夹，则开发人员工具将提示是否需要创建快速启动项目。选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。
成功创建项目后，我们可以单击项目进入并查看完整的开发人员工具界面，单击左侧导航，在“编辑”中查看和编辑我们的代码，在“调试”中测试代码并模拟小程序对微信客户端的影响。在“项目”中，您可以将其发送到手机以预览实际效果。
3.编写代码
在开发人员工具的左侧导航中单击“编辑”，我们可以看到该项目已被初始化并包含一些简单的代码文件。最关键和必不可少的是app.js，app.json和app.wxss。其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序将读取这些文件并生成小程序个实例。
下面我们简要了解这三个文件的功能，这方便从头开始修改和开发我们自己的微信小程序。
app.js是小程序的脚本代码。我们可以监视和处理小程序的生命周期函数，并在此文件中声明全局变量。调用MINA提供的丰富API，例如本示例中的同步存储和同步读取本地数据。
// app.js
App（{
onLaunch：函数（）{
//调用API从本地缓存中获取数据
var日志= wx.getStorageSync（'logs'）|| []
logs.unshift（Date.now（））
wx.setStorageSync（'logs'，日志）
}，
getUserInfo：function（cb）{
var that = this;
if（this.globalData.userInfo）{
typeof cb ==“ function” && cb（this.globalData.userInfo）
}其他{
//调用登录界面
wx.login（{
成功：函数（）{
wx.getUserInfo（{
成功：函数（res）{
that.globalData.userInfo = res.userInfo;
typeof cb ==“ function” && cb（that.globalData.userInfo）
}
}）
}
}）;
}
}，
globalData：{
userInfo：null
}
}）
app.json是整个小程序的全局配置。在此文件中，我们可以配置组成小程序的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，不能在该文件中添加任何注释。
{
“页面”：[
“页面/索引/索引”
“页面/日志/日志”
]，
“窗口”：{
“ backgroundTextStyle”：“浅色”，
“ navigationBarBackgroundColor”：“ #fff”，
“ navigationBarTitleText”：“微信”，
“ navigationBarTextStyle”：“黑色”
}
}
app.wxss是整个小程序的公共样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。
/ ** app.wxss ** /
.container {
高度：100％;
显示：flex;
flex-direction：列;
align-items：居中；
justify-content：间隔；
填充：200rpx 0;
box-sizing：border-box;
}
4.创建页面
在本教程中，我们有两个页面，即索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在pages目录下。需要将微信小程序中每个页面的[路径+页面名称]写入app.json的页面中，并且页面的第一页是小程序的主页。
每个小程序页面由四个不同的后缀文件组成，它们在同一路径下具有相同的名称，例如index.js，index.wxml，index.wxss，index.json。具有.js后缀的文件是脚本文件，具有.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，具有.wxml后缀的文件是页面结构文件。
index.wxml是页面的结构文件：
{{userInfo.nickName}}
{{motto}}
在此示例中，用于构建页面结构，绑定数据和交互式处理功能。
index.js是页面的脚本文件。在此文件中，我们可以监视和处理页面的生命周期功能，获取小程序实例，声明和处理数据，以及响应页面交互事件。
// index.js
//获取应用示例
var app = getApp（）
页面（{
数据：{
座右铭：“ Hello World”，
userInfo：{}
}，
//事件处理功能
bindViewTap：function（）{
wx.navigateTo（{
url：'../ logs / logs'
}）
}，
onLoad：函数（）{
console.log（'onLoad'）
var that = this
//调用应用程序实例方法以获取全局数据
app.getUserInfo（function（userInfo）{
//更新数据
that.setData（{
userInfo：userInfo
}）
}）
}
}）
index.wxss是页面的样式表：
/ ** index.wxss ** /
.userinfo {
显示：flex;
flex-direction：列;
align-items：居中；
}
.userinfo-avatar {
宽度：128rpx；
高度：128rpx；
保证金：20rpx;
边界半径：50％；
}
.userinfo-昵称{
颜色：#aaa;
}
.usermotto {
margin-top：200像素；
}
页面样式表不是必需的。当存在页面样式表时，页面样式表中的样式规则将与app.wxss中的样式规则重叠。如果不指定页面的样式表，则还可以直接使用页面的结构文件中app.wxss中指定的样式规则。
index.json是页面的配置文件：
不需要页面的配置文件。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。
日志页面结构
{{index + 1}}。 {{log}}
日志页面使用控制标签来组织代码，使用wx：for-items绑定日志数据，并循环日志数据以扩展节点
// logs.js
var util = require（'../../ utils / util.js'）
页面（{
数据：{
日志：[]
}，
onLoad：函数（）{
this.setData（{
日志：（wx.getStorageSync（'logs'）|| []）。map（function（log）{
返回util.formatTime（新日期（日志））
}）
}）
}
}）
结果如下：
5.移动预览
在开发人员工具的左侧菜单栏中选择“项目”，单击“预览”，然后在扫描代码后即可在微信客户端中体验它。
当前，预览和上传功能尚不可用，您需要等待微信的下一次正式更新。
如您所见，微信给出的官方开发指南仍然非常简单。许多细节，代码和功能没有清楚地显示出来，因此现在是Boka Jun展示自己实力的时候了！开发教程已正式开始！
第1章：准备工作
准备很重要。要开发微信申请号，您需要事先从微信的官方网站（）下载开发工具。
1.下载了最新的微信开发人员工具，打开后将看到以下界面：
2.单击“新建网络+”项，然后出现以下屏幕：
3.此页面上的所有内容都需要注意
注意：同样，如果您和团队成员一起开发项目，建议您使用相同的目录名和本地目录，以确保协作开发的统一性。如果您以前有一个项目，则导入过程与上述内容相似，因此我不再赘述。
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”“：
您可以根据实际项目要求进行更改，其中：
“颜色”是底部字体颜色，“ selectedColor”是页面的突出显示颜色，“ borderStyle”是切换菜单上方的一行颜色，“ backgroundColor”是底部菜单栏的背景颜色。文字描述比较抽象，建议您逐一调试并检查其效果，以加深印象。
注意：微信的底部菜单最多支持五列（五个图标），因此在设计微信应用程序的UI和基本结构时，必须事先考虑菜单栏的布局。
顺便说一句：我们的团队目前有两个设计师团队，并且三个代码团队正在同时工作。根据微信给出的设计指南，设计方将绘制一个示例，然后我们将基于该示例进行UI部分。效率更高的代码无需等待UI完全绘制。双方都可以同步！
5.根据上述代码规则，我准备了示例项目的基本结构供您参考：
6.配置“ Json”文件后，上图显示了“ card_course”的基本结构。可以暂时删除所有不必要的子集，并且需要主动创建丢失的子集。删除子集时，请记住检查是否同时删除了“ app.json”中的相关内容。
注意：我个人建议您创建一个新的“ wxml”文件，并一起创建相应的“ js”和“ wxss”文件，因为微信应用程序号的配置功能是解析为一个“ wxml”文件同时，具有相同文件名的“ js”和“ wxss”文件将同时在同一级别的目录中找到，因此需要在“ app.json”中预先配置“ js”文件及时。
编写“ wxml”时，只需使用应用程序编号微信提供的接口代码，其中大多数是先前的“ p”，但现在我们可以使用“ view”。当需要其他子集时，可以根据微信提供的界面进行选择。
使用“ class”名称设置样式，而“ id”名称在这里基本上没有用。主要操作数据，不操作“ dom”。
7.上面是示例项目主页的“ wxml”代码。从图中可以看出，实现页面的代码量很小。
8.“ Wxss”文件是导入的样式文件，您也可以直接在其中写入样式。在示例中使用了导入方法：
9.修改代码并刷新一次之后，您可以看到没有背景的“视图”标签直接变成了粉红色。
注意：修改“ wxml”和“ wxss”下的内容后，可以直接使用F5刷新以直接查看效果。如果您修改“ js”，则需要单击重新启动按钮才能看到效果。
10.此外，可以在“ app.wxss”中直接引用公共样式。
1 1.“ Js”文件需要在“ app.json”文件的““ page””中预先配置。为了阐明项目结构，我在示例项目的“索引”主页的同一目录中创建了另外四个页面文件，如下所示：
完成上述步骤后，案例中的五个底部菜单均已配置。
Leifeng.com的注释：本文由Bokajun授权的Leifeng.com（公开号：Leifeng.com）发布。如果需要转载，请联系原始作者并注明作者和出处。内容不能删除。
相关阅读：
微信应用程序编号，小程序最新开发教程的第二部分
微信申请号，小程序开发教程第三部分
禁止未经许可擅自转载雷锋网的原创文章。有关详细信息，请参见转载说明。