微信申请号(微信公众平台小程序，新名字“申请号”)终于来了！来自开源中文社区的波卡君吐血一夜写微信公众平台应用号开发教程！让我们快点学习吧

微信公众平台小程序还处于内部测试阶段，微信只邀请了部分企业参与封闭测试。每个人都必须关心申请号的最终形式是什么样的。如何将“服务号”转化为“小程序”？

让我们用一个简单的第三方工具的例子来演示开发过程。(公司项目保密，不能分享代码和截图。博卡君一边加班一边偷偷给大家写教程。感谢“名片盒”团队提供了自己的服务号来执行此操作，所以博卡君的教程将通过滚动“名片盒”的微信官方账号来更新发布)

好了，为了让大家尽快看到这个教程，波卡君注定要熬夜了！今晚开始更新，希望明天一早发布第一个教程！记录开始！让我们看看我们能完成多少天的转变。

前言

在开始开发应用号之前，先看看官方发布的教程“小程序”。(以下内容来自微信发布的官方“小程序”开发指南)

本文档将带您一步步创建一个微信小程序，您可以在手机上体验这个小程序的实际效果。这个小程序的首页会显示欢迎信息和当前用户的微信头像。点击头像在新打开的页面查看当前小程序的启动日志。

1.获取微信小程序的AppID

首先，我们需要有一个账户。如果您能看到此文档，我们应该已经邀请并为您创建了一个帐户。注意服务号或订单号的AppID不能直接使用。使用提供的账号登录https://mp.weixin.qq.com，可以在网站的设置-开发者设置中查看微信小程序的AppID。

注意：如果注册时没有使用管理员绑定的微信号，可以在手机上体验小程序。然后我们还需要操作“绑定开发者”。也就是在“用户身份-开发者”模块，需要体验小程序的微信号。默认情况下，本教程使用管理员微信号注册帐户和体验。

2.创建项目

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

开发者工具安装好后，打开使用微信扫码登录。选择创建项目，填写上面得到的AppID，设置一个本地项目的名称(不是applet的名称)，比如我的第一个项目，选择一个本地文件夹作为代码存储的目录，点击新建项目。

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

项目创建成功后，我们可以点击项目，进入并看到完整的开发者工具界面，点击左侧导航，我们可以在edit中查看和编辑我们的代码，在debug中测试代码并在微信客户端模拟小程序的效果，并发送到手机上在project中预览实际效果。

3.写代码

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

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

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

//app . jsapp({ onlunch : function(){//调用API从本地缓存获取数据var log=wx . getstorageync(' log ')|[]log . unshift(date . now()))wx . setstorageync(' log '，log)}，getuserinfo : function(CB){ var即=thisif(this . global data . user info){ CB的类型==' function ' CB(this . global data . user info)} else {//调用登录界面wx . log in({ success : function()){ wx . getuser info({ success : function(RES){ that . global data . user info=RES . user info；type of CB==' function ' CB(that . global data . UserInfo)} })})；}}，global data : { user info : null } })app . JSON是整个小程序的全局配置。在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏样式，以及配置默认标题。请注意，不能向此文件添加任何注释。

/* * app . JSON */{ ' pages ' :[' pages/index/index '，' pages/log/log ']，' window ' : { ' backgroundTextStyle ' : ' light '，' navigationbarbackgroundcolor ' : ' # fff '，' navigationbartitletext ' : '微信'，' navigationbartextstyle ' : ' black ' } } app . wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。

/**app.wxss**/。集装箱{ height : 100%；display: flexflex-direction:柱；align-items:居中；justice-content :空格；padd : 200 rpx 0；盒子尺寸：边框盒子；}3.创建页面

在本教程中，我们有两个页面，索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面，它们都在pages目录中。微信小程序中每一页的【路径页名】都需要写在app.json的pages中，pages中的第一页就是小程序的第一页。

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

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

！-index . wxml-view class=' container ' view bind tap=' bindwiewtap ' class=' userinfo ' image class=' userinfo-avatar ' src=' http : { {userInfo . avatar URL } } ' background-size=' cover '/image text class=' userinfo-昵称' { userinfo .昵称} }/text/view class=' user motional ' text class=' user-motional ' { motional } }/text/view/view在本例中，view/、image/和text/是

Index.js是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期函数，获取applet的实例，声明和处理数据，响应页面的交互事件。

//index.js //获取应用程序实例varapp=getapp()页面({ data : { motto : ' hello world '，user info 3360 } }，//事件处理函数bindwiewtap 3360 function(){ wx . navigatetto({ URL : './logs/logs'})}，onload : function(){ console . log(' onload ')var=this//调用应用程序实例的方法获取全局数据app . getuser info(function(user info){//update data that . setdata({ user info : user info })} } })index . wxss是页面的样式表

/**index.wxss**/。userinfo { display: flexflex-direction:柱；align-items:居中；}.user info-avatar { width : 128 rpx；height: 128rpxmargin: 20rpx边界半径：50%；}.user info-昵称{ color: # aaa}.用户座右铭{ margin-top : 200 px；}页面的样式表是不必要的。当有页面样式表时，页面样式表中的样式规则会覆盖app.wxss中的样式规则，如果没有指定页面的样式表，也可以直接在页面的结构文件中使用app.wxss中指定的样式规则。

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

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

日志的页面结构

！-logs . wxml-view class=' container log-list ' block wx : for-items=' { { logs } } ' wx : for-items=' log ' text class=' log-items ' { index { 1 } }。{{log}}/Text /block/viewlogs页面使用block/control标签组织代码，wx:for-items用于绑定block/上的日志数据，log数据是循环展开节点

//logs.js var util=require('././utils/util . js’)Page({ data : { logs :[]}，Onload:function () {this。setdata({ logs 3360(wx。getstorage ync(' log ')| |[])。map(函数(日志){returnutil。formattime(新日期(日志))})}}})运行如下：

4.手机预览

在开发工具左侧菜单栏中选择“项目”，点击“预览”。扫码后可以在微信客户端体验。

目前还不能实现预览和上传功能，需要等待微信的正式更新。

可以看到，微信给出的官方开发指南还是很简单的，很多细节、代码、功能都没有显示清楚，是时候让博卡君展示一下自己的实力了！开发教程正式开始！

第一章：准备工作

做好准备很重要。开发一个微信应用号，需要提前从微信(weixin.qq.com)官网下载开发者工具。

1.下载最新的微信开发者工具，打开后会看到界面：

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

3.注意本页所有内容——

AppID:根据官方解释填写。Appname:是项目最外层文件夹的名称。如果您将其命名为“ABC”，以下项目的所有内容将保存在目录“/ABC/……”中。本地开发目录：项目存储在本地目录中。注意：再次强调，如果您和团队成员共同开发项目，建议使用相同的目录名和本地目录，以保证协同开发的统一性。如果你之前有项目，导入过程和上面类似，我们就不重复了。

4.所有准备工作完成后，点击“新建项目”按钮，在弹出的对话框中点击“确定”。

5.如上图所示，此时此刻，微信开发者工具已经自动为你搭建了一个初步的演示项目，里面包含了一个微信应用项目的基本内容和框架。点击项目名称(图中“卡片”)进入项目，可以看到整个项目的基本结构：

第2章：项目框架

目前微信的用户群体非常庞大。微信推出微信官方账号后，大家都能看到它的受欢迎程度，这也促进了h5的快速发展。随着微信官方账号业务需求越来越复杂，申请号刚刚好。看了一两遍文档，我们团队发现它给开发者提供的方式也在发生全面的变化，从操作DOM到操作数据。基于微信提供的一个桥接工具，实现了很多h5在微信官方账号难以实现的功能。有点类似于混合开发，但不同于混合开发的地方在于微信的开放界面更加严谨，结构必须采用提供给我们的组件。这里不能使用外部框架和插件，这样开发者就可以完全脱离操作DOM。

锋利的工具很管用。了解其核心功能非常重要。首先，了解它的整个操作过程。

生命周期：

在index.js中：

控制台上的开发人员工具可以看到：

在主页控制台上，可以看到订单是app启动-app显示-onload-on show-on ready。

首先是整个app的启动和展示。app的启动可以在app.js中配置，然后是每个页面的加载和显示等等。

我可以想象这里可以处理很多事情，比如装箱子等等。

路由：

路由一直是项目开发的核心点。事实上，微信很少引入路由。可见，微信在路由方面包装得很好，提供了三种跳转方式。

Wx.navigateTo(OBJECT):保留当前页面，跳转到应用程序中的某个页面，使用wx.navigateBack返回到原页面。

Wx.redirectTo(OBJECT):关闭当前页面，跳转到应用程序中的一个页面。

Wx.navigateBack():关闭当前页面，返回上一页。

这三个基本都用够了，微信包在路由上也很不错。开发人员根本不需要配置路由，很多框架的路由配置往往很繁琐。

组件：

这个微信在组件提供方面也很全面，基本满足了项目的需求，所以开发速度很快。开发前可以仔细浏览几遍，开发效率会很好。

其他：

基本上任何外部框架和插件都不能用，甚至连原生的js插件都不能用，因为我们的js插件基本上都是以操作dom的形式存在的，而且这次微信应用号的架构不允许操作任何dom，甚至不支持我们之前使用的动态设置的rem.js。

微信还提供了WebSocket，可以直接用来聊天，发展空间很大。

对比微信官方账号，发现开发应用号组件化、结构化、多样化。新世界总是充满惊喜，更多的蛋等待被发现。

接下来，开始做一些简单的代码吧！

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

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

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

4.找到“app.json”文件来配置五个菜单。在代码行中找到了“标签栏”:

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

“Color”是底部字体颜色，“selectedColor”是切换到页面的高亮颜色，“borderStyle”是切换菜单上方一行的颜色，“backgroundColor”是底部菜单栏的背景颜色。文字描述比较抽象，建议大家逐一调试，检查效果，加深印象。“列表”下的代码顺序必须按顺序排列，不能随意更改。在文件名中的“页面路径”之后，加上后缀”。wxml”是隐藏的，这是微信开发代码中人性化的一点。——可以节省你写代码的时间，而且不需要频繁声明文件后缀。" " iconPath " "是显示页面的图标路径，这两个路径可以直接是网络图标。“selectedIconPath”是当前显示页面的突出显示图标路径，可以删除。删除后，图标默认显示为“图标路径”。“文本”是页面的标题，也可以删除。移除后，图标将仅显示。如果只移除其中一个，该位置将被占用。注意：微信底部菜单最多支持五列(五个图标)，所以在设计微信应用的UI和基本架构时，要提前考虑菜单栏的布局。

5.根据上面的代码规则，我准备了示例项目的基本框架，供大家参考：

6.配置好“JSON”文档后，“card_course”的基本结构如上图所示。所有不必要的子集都可以临时删除，缺失的子集需要自己主动创建。删除子集时，记得检查“app.json”中的相关内容是否已经删除。

注意：我个人建议你新建一个“wxml”文件，一起创建对应的“js”和“wxss”文件，因为微信应用号的配置特点是解析成“wxml”文件时，会同时在同一个目录下找到相同文件名的“js”和“wxss”文件，所以“js”文件要及时在“app.json”中找到

写“wxml”的时候可以基于微信应用号提供的界面代码，大部分是之前的“div”，但是我们现在可以用“view”了。当需要其他子集时，可以根据微信提供的界面进行选择。

用“类”这个名字来设置样式，“id”这个名字在这里基本没用。主要对数据进行操作，而不是“dom”。

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

8.“WXSS”文件是导入的样式文件，也可以直接在里面写样式。在该示例中，采用了导入方法：

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

注意：修改“wxml”和“wxss”下的内容后，直接刷新F5即可直接看到效果，修改“js”时需要点击重启按钮才能看到效果。

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

11.“js”文档需要在“app.json”文档的“页面”中进行预配置。为了明确项目结构，我在示例项目的“索引”主页的同级别目录中创建了另外四个页面文档，如下所示：

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

以上是微信小程序的教程资料，希望对大家有所帮助，感谢大家对本网站的支持！