//日志.js

var util = ('../..//util.js')

页（{

数据： {

日志：[]

}，

：（）{

这。（{

日志：（wx。（'logs'）|| []）.map（（log）{

实用程序（新日期（日志））

}）

}）

}）

结果如下：

4. 移动预览

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

目前预览和上传功能还无法使用，需要等待微信下次官方更新。

可以看到，微信官方提供的开发指南还是很简单的，很多细节、代码、功能都没有展示清楚，接下来就是波卡展现实力的时候了！开发教程正式开始！

第 1 章：准备

做好准备很重要，开发微信应用账号需要先从微信官网（）下载开发者工具。

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

2.点击“New web+”项目，出现以下界面：

3.本页需要注意的内容：

：按照官方解释填写。

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

本地开发目录：项目在本地存放的目录。

注意：再次强调，如果你和团队成员是一起开发项目的，建议大家使用相同的目录名和本地目录，以保证协作开发的统一性。如果你已经有项目，导入过程和上面类似，不再赘述。

4、一切准备工作完成后，点击“新建项目”按钮，在弹出的框中点击“确定”。

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

第 2 章：项目结构

微信目前拥有庞大的用户群体，微信推出公众号之后，大家就可以看到公众号的受欢迎程度，这也带动了Html 5的快速发展，随着公众号服务的需求越来越复杂，应用号的到来可谓恰逢其时。

博卡君发现微信提供给开发者的方式也在发生全面的改变：从操作DOM变成操作数据，基于微信提供的一个桥接工具，在公众号中实现很多Html 5难以实现的功能。有点类似于开发，但不同的是微信开放的接口更加严谨，结构必须采用其提供的组件。外部的框架和插件在这里是不能使用的，让开发者彻底脱离操作DOM，这是开发思维的一大转变。

工欲善其事，必先利其器，首先了解它的核心功能，了解它的整个操作流程，是非常重要的。

生命周期：

在 .js 中：

在开发者工具中你可以看到：

在首页可以看到顺序是App-->App Show-->-->-->。

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

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

路由：

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

wx.()：保留当前页面，并跳转到应用程序中的某个页面。使用wx.返回原始页面。

wx.()：关闭当前页面并且跳转到应用程序中的某个页面。

wx.()：关闭当前页面，回到上一个页面。

这三个基本就够了，微信对路由封装的很好，开发者根本不需要配置路由，往往很多框架的路由配置都很繁琐。

成分：

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

其他：

基本上任何外部框架和插件都无法使用。甚至原生的 js 插件也难以使用，因为之前的 js 插件基本都是以 dom 操作的形式存在的，而微信应用号的架构不允许任何 dom 操作。甚至连开发者以前常用的动态设置 rem.js 也不支持。

这次微信还提供了可以直接用来聊天的功能，发展空间很大。

相比于公众号，播卡君发现应用号的发展组件化、结构化、多样化，新世界总是充满惊喜，还有更多的彩蛋等着大家去发现。

现在让我们从一些简单的代码开始！

1.找到项目文件夹，导入到你的编辑器中，这里Boka使用的是Text编辑器，你可以根据自己的开发习惯选择自己喜欢的编辑器。

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

3.示例项目有五个菜单按钮：

4. 找到“app.json”文件，配置五个菜单。找到“”：

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

“”为底部字体颜色，“”为切换页面高亮颜色，“”为切换菜单上方线条颜色，“”为底部菜单栏背景颜色。文字描述比较抽象，建议大家逐一调试、查看其效果，以加深印象。

“列表”下的代码顺序必须按照顺序排列，不能随意调换。

在“”后面的文件名中，“.wxml”后缀是隐藏的。这是微信开发代码的人性化功能——它可以帮助你节省编写代码的时间，而不必频繁声明文件后缀。

“”是没有获取到的展示页面的图标路径，这两个路径可以直接是网络图标。

「」为当前显示页面的高亮图标路径，可移除，移除后图标默认显示为「」。

“Text”为页面标题，也可删除，删除后只显示图标，删除其中一个会占用该位置。

注意：微信的底部菜单最多支持五列（五），所以在设计微信应用的UI和基本架构时，一定要提前考虑菜单栏的布局。

5.根据以上代码规则，博卡准备了示例项目的基本结构供大家参考：

6、“Json”文件配置完成后，“”的基本结构如上图所示。不需要的子集可以暂时删除，缺失的子集需要主动创建。删除子集时记得检查“app.json”中相关内容是否已被删除。

注意：波卡个人建议大家在新建“wxml”文件的同时，一起创建对应的“js”和“wxss”文件，因为微信应用号的配置特点是，在解析一个“wxml”文件的时候，会同时在同一个目录下寻找同名的“js”和“wxss”文件，所以“js”文件需要及时在“app.json”中预先配置好。

在编写“wxml”时，可以根据微信应用号提供的接口进行编码，大部分都是以前的“p”，但现在只要使用“view”就可以了，如果需要使用其他子集，可以根据微信提供的接口进行选择。

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

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

8.“Wxss”文件是导入的样式文件，也可以直接在里面写样式，示例使用的是导入的方式：

9、修改代码后，刷新页面可以看到没有背景的“view”标签变成了粉红色。

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

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

11、在“app.json”文件的“page”中需要预先配置“Js”文件，为了明确项目结构，在示例项目中与“”首页同一目录下创建了另外四个页面文件，如下：

经过以上步骤，机箱内的五个底部菜单就全部配置好了。