微信小程序开发教程第二章：项目构架

微信目前用户群体非常巨大，微信面世公众号以后，火热程度大家都看看获得，也同样促进着 h5 的高速发展，随着公众号业务的市场需求越来越繁杂，应用领域号现在的到来也就是恰到好处。我们团队具体内容看看了一两次文档后辨认出，它提供更多给开发者的方式也在出现全面的发生改变，从操作方式 DOM 变为操作方式数据，基于微信提供更多的一个过桥工具同时实现很多 h5 在公众号很难同时实现的功能，有点类似 hybrid 研发，不同于 hybrid 研发的方式就是：微信对外开放的USB更为细致，结构必须使用他提供更多给我们的组件，外部的框架和插件都无法在这里采用上，使开发者全然瓦解操作方式 DOM，研发思想转型非常大。

工欲善其事，必先利其器。认知它的核心功能非常关键，先介绍它的整个运作流程。

生命周期：

在index.js里面：

开发者工具上 Console 可以看见：

在首页 console 可以窥见顺序就是 App Launch-->App Show-->onload-->onShow-->onReady。

首先就是整个 app 的启动与表明，app 的启动在 app.js 里面可以布局，其次再步入至各个页面的读取表明等等。

可以想象至这里可以处置很多东西了，例如读取侧边之类的都可以同时实现等等。

路由：

路由在项目研发中一直就是个核心点，在这里其实微信对路由的了解很少，可知微信在路由方面经过较好的PCB，也提供更多三个重定向方法。

* wx.navigateTo(OBJECT)：留存当前页面，重定向至应用领域内的某个页面，采用wx.navigateBack可以回到至原页面。

* wx.redirectTo(OBJECT)：停用当前页面，重定向至应用领域内的某个页面。

* wx.navigateBack()：停用当前页面，品驭型前一页面。

这三个基本上采用足够多，在路由方面微信PCB的较好，开发者显然不必回去布局路由，往往很多框架在路由方面布局很繁杂。

组件：

此次微信在组件提供更多方面也就是非常全面，基本上满足用户项目市场需求，故而研发速度非常慢，研发前可以深入细致下载几次，研发效率可以较好。

其它：

任何外部框架以及插件基本上无法采用，即使原生的 js 插件也很难采用，因为以前我们的 js 插件也基本上全部就是一操作方式 dom 的形式存有，而微信应用领域号此次的架构就是不容许操作方式任何 dom，就没了以前我们习惯采用的动态设置的 rem.js 也就是不积极支持的。

此次微信还提供更多了 WebSocket，就可以轻易利用它搞聊天，可以研发的空间非常小。

跟公众号对照我们辨认出，研发应用领域号组件化，结构化，多样化。新大陆总是充满着惊艳，更多的彩蛋等着大家去辨认出。

接下来已经开始搞出一些直观的代码了！

* 找出项目文件夹，引入你的编辑器里面。在这里，我采用了 Sublime Text 编辑器。你可以根据自己的研发习惯挑选自己讨厌的编辑器。

* 接下来，你须要根据自己的项目内容调整项目结构。在范例项目中，「card_course」目录下面主要涵盖了「tabBar」页面以及该应用领域的一些配置文件。

* 示例项目的「tabBar」就是五个菜单按钮：

* 找出「app.json」文件，用以布局这个五个菜单。在代码行及中找出「tabBar」：

* 你可以根据实际项目市场需求修改，其中：

* 「Color」就是底部字体颜色，「selectedColor」就是转换至该页面高亮颜色，「borderStyle」就是转换菜单上面的一条线的颜色，「backgroundColor」就是底部菜单栏背景颜色。文字描述较为抽象化，建议你一一调试并查阅其效果，增进印象。

* 「“list”」下的代码顺序必须依次置放，无法随便修改。

* 「”pagePath”」之后的文件名内，「.wxml」后缀被暗藏出来了，这就是微信研发代码中人性化的一点——帮忙你节约写下代码的时间，无须频密声明文件后缀。

* 「”iconPath”」为未赢得表明页面的图标路径，这两个路径可以轻易就是网络图标。

* 「”selectedIconPath”」为当前表明页面高亮图标路径，可以换成，换成之后可以预设表明为「”iconPath”」的图标。

* 「”Text”」为页面标题，也可以换成，换成之后氢铵表明图标，例如只换成其中一个，该边线可以被挤占。

特别注意：微信的底部菜单最多积极支持五栏（五个 icons），所以在你设计微信应用领域的 UI 和基本架构时就要预先考量不好菜单栏的轨域。

* 根据以上代码规则，我搞好了示例项目的基本架构，可供你参照：

* 「Json」文件布局不好后，「card_course」的基本结构进注右图，不须要的子集都可以暂时删掉，缺乏的子集则须要你主动新建。删掉子集时回忆起顺带检查一下「app.json」里的有关内容与否已经一并删掉。

特别注意：我个人建议你新建一个「wxml」文件的同时，把对应的「js」和「wxss」文件一起新建不好，因为微信应用领域号的布局特点就是解析至一个「wxml」文件时，可以同时在同级目录下找出同文件名的「js」和「wxss」文件，所以「js」文件须要及时在「app.json」里预先布局不好。

撰写「wxml」时，根据微信应用领域号提供更多的USB编码即可，大部分就是以前的「div」，而我们现在就用「view」即可。须要用其它子集时，可以根据微信提供更多的USB酌情挑选。

采用「class」名于设置样式，「id」名在这里基本没什么用处。主要操作方式数据，不操作方式「dom」。

* 以上就是示例项目首页的「wxml」编码。从图中就可以窥见，同时实现一个页面代码量非常少。

* 「Wxss」文件就是导入的样式文件，你也可以轻易在里面写下样式，示例中使用的就是导入方式：

* 修正代码后创下一次，可以看见未设背景的「view」标签轻易变为了粉色。

特别注意：修正「wxml」和「wxss」下的内容后，轻易 F5 创下就能够轻易看见效果，修正「js」则须要页面重新启动按钮就可以看见效果。

* 另外，公共样式可以在「app.wxss」里轻易提及。

* 「Js」文件须要在「app.json」文件的「”page”」里预先布局不好。为了项目结构清晰化，我在示例项目中的「index」首页同级目录新建其它四个页面文件，具体内容如下：

经过以上步骤，案例中的五个底部菜单就全部布局完了。