全球首个微信应用号开发教程！通宵吐血赶稿，每…

全球首个微信应用号开发教程！通宵吐血赶稿，每…

微信应用号(小程序，“应用号”的新名字)终于来了！

目前还在内测阶段，微信只邀请了部分企业参与内测。想必大家都很关心申请号的最终形式是什么样的。如何把一个“服务号”改造成一个“小程序”？

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

好了，为了让大家尽快看到这个教程，博卡君注定要熬夜了！今晚开始更新，希望明天一早发布第一篇教程！记录！看看几天后能不能完成变身！

序言

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

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

1。获取微信小程序的AppID

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

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

2。创建一个项目

我们需要通过开发者工具完成小程序的创建和代码编辑。

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

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

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

3。编写代码

点击开发者工具左侧导航中的“编辑”，我们可以看到这个项目已经被初始化，包含了一些简单的代码文件。其中最重要最本质的就是app.js，app.json和app.wxss，。js后缀是脚本文件，。json后缀是配置文件，而。wxss后缀是样式表文件。微信小程序会读取这些文件，生成小程序实例。

我们先简单看一下这三个文件的作用，这样我们就可以轻松地从零开始修改和开发自己的微信小程序了。

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

//app.jsApp({   onLaunch： function () {     // 调用 API 从本地缓存中获取数据    var logs = wx.getStorageSync('logs') || []     logs.unshift(Date.now())     wx.setStorageSync('logs'， logs)   }，   getUserInfo：function(cb){     var that = this;     if(this.globalData.userInfo){       typeof cb == "function" && cb(this.globalData.userInfo)     }else{       // 调用登录接口      wx.login({         success： function () {           wx.getUserInfo({             success： function (res) {               that.globalData.userInfo = res.userInfo;               typeof cb == "function" && cb(that.globalData.userInfo)             }           })         }       });     }   }，   globalData：{     userInfo：null  } })

App.json是整个小程序的全局配置。在这个文件中，我们可以配置applet包含哪些页面、applet窗口的背景颜色、导航栏的样式和默认标题。请注意，不能向该文件添加任何注释。

/**app.json*/{   "pages"：[     "pages/index/index"，     "pages/logs/logs"  ]，   "window"：{     "backgroundTextStyle"："light"，     "navigationBarBackgroundColor"： "#fff"，     "navigationBarTitleText"： "WeChat"，     "navigationBarTextStyle"："black"  } }

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

/**app.wxss**/.container {   height： 100%;   display： flex;   flex-direction： column;   align-items： center;   justify-content： space-between;   padding： 200rpx 0;   box-sizing： border-box; }

3。创建页面

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

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

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

<!--index.wxml--><view class="container">  <view  bindtap="bindViewTap" class="userinfo">    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>    <text class="userinfo-nickname">{{userInfo.nickName}}</text>  </view>  <view class="usermotto">    <text class="user-motto">{{motto}}</text>  </view></view>

在本例中，、<image/>；、<text/>；构建页面结构，绑定数据和交互处理功能。

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

//index.js// 获取应用实例var app = getApp() Page({   data： {     motto： 'Hello World'，     userInfo： {}   }，   // 事件处理函数  bindViewTap： function() {     wx.navigateTo({       url： '../logs/logs'    })   }，   onLoad： function () {     console.log('onLoad')     var that = this    // 调用应用实例的方法获取全局数据    app.getUserInfo(function(userInfo){       // 更新数据      that.setData({         userInfo：userInfo       })     })   } })

Index.wxss是页面的样式表:

/**index.wxss**/.userinfo {   display： flex;   flex-direction： column;   align-items： center; }.userinfo-avatar {   width： 128rpx;   height： 128rpx;   margin： 20rpx;   border-radius： 50%; }.userinfo-nickname {   color： #aaa; }.usermotto {   margin-top： 200px; }

页面的样式表是不必要的。当有页面样式表时，页面的样式表中的样式规则会叠加app.wxss中的样式规则如果不指定页面的样式表，也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

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

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

日志的页面结构

<!--logs.wxml--><view class="container log-list">  <block wx：for-items="{{logs}}" wx：for-item="log">    <text class="log-item">{{index + 1}}. {{log}}</text>  </block></view>

日志页面使用

//logs.jsvar util = require('../../utils/util.js') Page({   data： {     logs： []   }，   onLoad： function () {     this.setData({       logs： (wx.getStorageSync('logs') || []).map(function (log) {         return util.formatTime(new Date(log))       })     })   } })

运行结果如下:

4.手机预览

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

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

如你所见，微信官方给出的开发指南还是很简单，很多细节、代码、功能都没有展示清楚，是时候让博卡君大显身手了！开发教程正式开始！

第1章:准备

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

1.下载最新的微信开发者工具。打开后，你会看到这个界面:

2.点击“Newweb+”项目，将出现以下屏幕:

3.本页所有内容都需要注意-

AppID:根据官方解释填写。

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

本地开发目录:本地存储项目的目录。

注意:同样，如果您和团队成员共同开发这个项目，建议您使用相同的目录名和本地目录，以保证协同开发的统一性。如果你有之前的项目，导入过程和上面差不多，这里就不赘述了。

4.所有准备工作完成后，点击“新建项目”按钮，d出“确定”框。

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

第2章:项目框架

目前微信的用户基数非常大。微信官方账号推出后，微信的受欢迎程度大家有目共睹，也促进了h5的快速发展。随着微信官方账号业务的日益复杂，应用号的到来恰到好处。我们团队看了一两遍文档，发现它提供给开发者的方式也在发生全面的变化，从 *** 作DOM到 *** 作数据。基于微信提供的一个桥接工具，实现了很多h5在微信官方账号中很难实现的功能，有点类似于混合开发，但不同于混合开发的方式:微信的开放接口更加严谨，结构不得不采用他提供给我们的组件，外部框架和插件不能在这里使用，让开发者可以完全脱离 *** 作DOM。

锋利的工具能做好工作。了解它的核心功能很重要，先了解它的整个运作过程。

生命周期:

在index.js中:

工具上的控制台可以看到:

在家用控制台上，你可以看到顺序是Applaunch->:AppShow->；onload->；onshow->；准备好了.

首先是整个app的启动和展示。app的启动可以在app.js中配置其次，进入各个页面的加载和显示，等等。

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

路线:

路由一直是项目开发中的一个核心点。其实这里微信上关于路由的介绍很少。可以看出，微信在路由方面封装的很好，提供了三种跳转方式。

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

wx.redirecto(OBJECT):关闭当前页面并跳转到应用程序中的一个页面。

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

这三个基本够用了，微信在路由方面包的不错。开发者根本不用配置路由，往往很多框架在路由上配置起来很繁琐。

组件:

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

其他:[/s2/]

基本上任何外部的框架和插件都不能用，就连原生的js插件也很难用，因为我们之前的js插件基本上都是 *** 作dom的形式，微信应用的这种架构不允许 *** 作任何dom，甚至连我们以前动态使用的rem.js都不支持。

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

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

接下来，让我们开始一些简单的代码！

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

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

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

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

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

Color是底部字体颜色，selectedColor是切换到页面的突出显示颜色，borderStyle是切换菜单上方线条的颜色，backgroundColor是底部菜单栏的背景颜色。描述比较抽象，建议大家一个一个调试，检查一下效果，加深印象。

“列表”下的编码顺序必须依次放置，不能随便更改。

在文件名中的“pagepath”后面加上后缀“.wxml”是隐藏的，这是微信开发代码中的一个人性化点――帮你节省写代码的时间，不用频繁声明文件后缀。

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

“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.修改完代码，刷新一次，可以看到没有背景的“视图”标签直接变成粉红色。

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

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

11.“js”文件需要在“app.json”文件的“页面”中预先配置。为了阐明项目的结构，我在示例项目中“index”的第一页的同一级别的目录中创建了另外四个页面文件，如下所示:

完成以上步骤后，机箱中的五个底部菜单都配置好了。

我们的应用号开发教程会通过“名片盒”微信官方账号持续更新播出。

关注“名片盒”微信官方账号，回复“申请号”即可查看最新内容！