小程序开发软件开发： 微信官方给出开发教程正式开始，接下来后即可在微信客户端中体验 |昱远信息系统开发

//logs.js
var 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 章：准备工作

准备工作很重要。开发微信应用号需要提前从微信官网（ ）下载开发者工具。

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

2.点击“New web+”项目，会出现如下画面：

3.本页内容需注意——

注意：同样，如果你是和团队成员一起开发项目，建议你使用相同的目录名和本地目录，以保证协同开发的统一。如果你之前有项目，导入过程和上面类似，就不再赘述了。

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

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

第 2 章：项目架构

微信目前拥有非常庞大的用户群。微信公众号上线后，大家可以看到人气，也推动了Html 5的快速发展。也恰到好处。

博卡君发现，微信为开发者提供的方式也在发生全面转变：从操作DOM到操作数据，基于微信提供的一个桥接工具，实现了公众号上很多Html 5难以实现的功能小程序开发软件开发，有点类似于混合开发，但又不同于混合开发：微信的开放接口更加严谨，结构必须使用它提供的组件，这里不能使用外部框架和插件，这样开发者就彻底被淘汰了的操作。 DOM，开发思路发生了很大变化。

工人要想做好工作，首先要磨砺自己的工具。了解它的核心功能很重要，首先要了解它的整个运行过程。

生命周期：

在 index.js 中：

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

在首页控制台可以看到顺序是App Launch–>App Show–>onLoad–>onShow–>onReady。

首先是整个app的启动和显示。可以在app.js中配置app的启动小程序开发软件开发，然后到各个页面的加载和显示等。

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

路由：

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

wx.navigateTo(OBJECT)：保持当前页面，跳转到app中的某个页面，使用wx.navigateBack返回原页面。

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

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

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

组件：

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

其他：

任何外部框架和插件基本都用不上，甚至原生js插件也很难用，因为之前的js插件基本都是DOM操作的形式，这次微信应用号该结构不允许操作任何 DOM，即使是过去开发者使用的动态设置的 rem.js 也不支持。

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

与公众号相比，博卡君发现开发应用号组件化、结构化、多样化。新大陆总是充满惊喜，更多彩蛋等你发现。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11.“Js”文件需要在“app.json”文件的“页面”中进行预配置。为了明确项目结构，博卡君在示例项目中“index”首页的同级目录下创建了另外四个页面文件，如下：

经过以上步骤，机箱底部的五个菜单全部配置完毕。

【昱远信息系统定制开发】