条件渲染，适合根据数据输出不同状态的 WXML，举个例子：

<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>

循环渲染

循环渲染，适合遍历数据输出多段 WXML，举个例子：

// wx:for 表示需要遍历的数据 // wx:key 使用唯一的字段来标识，有利于提升性能 // wx:for-index 表示数组的下标 // wx:for-item 表示数组的元素 <view wx:for="{{[{id:1, message: 'HelloWorld1'}, {id:2, message: 'HelloWorld2'}]}}" wx:key="id" wx:for-index="idx" wx:for-item="item"> {{idx}}: {{item.message}} </view>

wx:key 有利于提升重新渲染时的效率，建议添加

模块化

WXML的模块化，可以让我们复用一些wxml片段，还挺重要的，举个例子：

// 引入wxml模块 <import src="../../components/grid-article/index"></import> <block wx:for="{{posts}}" wx:for-item="post" wx:key="id"> // 调用wxml模块，同时可传入数据 <template is="grid-article" data="{{post}}"></template> </block>

数据和页面的状态是一一对应的，微信小程序中，设计一份好的数据结构，对于Page和页面的代码都有很大的帮助。

微信小程序并不支持a标签，那么多个页面之间如何跳转呢？

页面间的跳转

小程序以栈的形式维护了历史访问的所有页面，并提供了多种页面间的跳转方式；结合前文提到的App()和Page()的各个生命周期，不同的跳转方式和不同的生命周期关联，如下图：

Paste_Image.png

举个例子，Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）

Paste_Image.png

好了，APP和Page负责维护小程序的生命周期和数据，模板负责接受数据完成页面渲染，页面间的跳转负责将多个页面贯穿起来，那么，如何发生交互呢？接下来我们简单说一下事件。

交互事件

事件绑定

// bindtap 和 catchtap的区别在于 // bindtap 不会阻止事件冒泡 // catchtap会冒泡事件冒泡 <view data-hi="WeChat" bindtap="tapName"> Click me! </view> <view data-hi="WeChat" catchtap="tapName"> Click me! </view> // 绑定的函数tapName只是一个函数名称，默认接受一个event对象作为参数 Page({ tapName: function(event) { console.log(event) } })

接下来，另一个问题是： tapName() 如何接受自定义参数呢？

事件传参

传递自定义参数主要有两种方式：

第一种：将参数绑定到wxml标签上，然后通过 event.target.dataset 获取

第二种：直接使用Page.data或其他数据

到目前为止，一个完整的小程序框架已经实现

小程序只有逻辑和视图两部分，而且不提供组件化解决方案

逻辑主要包含四个东西：两个配置文件 && 两个核心函数

视图很简单，模板语法稍微有点不完善

逻辑层的数据绑定到视图层是由小程序框架自动支持，数据变化，视图自动变化

视图层到逻辑层的，主要通过事件的方式来实现

视图之间的跳转，小程序也提供了它自己的方式，并不支持a标签

框架有了，小程序还提供了官方组件以便快速开发，提供了API以增强应用能力。

这块就不具体介绍了，也需要注意小程序的官方文档还在大规模的更新中，务必查看最新版

官方组件： https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161222

官方API： https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161222

微信小程序的基础知识就是以上的内容，并不复杂，边查边写都可以。

接下来会介绍更进阶一些的内容，内容主要结合好奇心日报这个小程序项目，先看效果：

好奇心日报实际效果图

如何设计微信小程序？

构建系统 && 目录结构

构建系统

由于微信小程序本身对工程化几乎没有任何的支持，所以动手搭建一份： wxapp-redux-starter 。

使用gulp进行编译构建，主要功能包括：

集成了 Redux ，数据管理更方便

开发过程中，使用 xml 取代 wxml ，对开发工具更友好

开发过程中，使用 less 取代 wxss ，功能更强大

引入 es-promise ，以便可以创建并使用 Promise

添加 promisify 工具函数，可以便捷的将官方 Api 转换成 Pormise 模式

引入 normalizr ，可以将数据扁平化，更方便进行数据管理

引入 babel 自动进行 ES2015 特性转换

对 wxml/wxss/js/img 压缩，相对开发者工具提供的压缩，会减小一丢丢体积。

目录结构设计

按照pages、components、redux、vendors/libs、images几个核心部分拆分，直接上目录。

小程序工程目录

dist目录 ：构建输出的文件存放到这个目录。

src目录 ：开发模式的文件，包括app、页面、组件、图片等静态资源、辅助函数库、Redux数据管理器、第三方工具库。

gulpfile.js ：不用多说，gulp构建任务的入口文件。

package.json ：不用多说，管理者构建任务的依赖。

thirdPlugins ：由于小程序并不支持直接使用npm，我们可以自主拉取构建，然后拷贝到vendors里，有时候需要简单修改。

构建系统会将src目录下的代码，编译处理后输出到dist目录，小程序开发工具只需要引入dist目录即可。

有了构建工具，代码开发起来更舒心，但很快就遇到另外一个糟心的问题，那就是如何管理散布在各处的数据？

要知道，微信小程序并没有提供组件化方案，所以 把组件写成无状态组件 特别适合，但是页面管理太多数据很凌乱，有什么办法可以将数据集中管理呢？

引入Redux进行数据集中管理

关于Redux相关的内容，之前有三篇博客详细介绍，有兴趣的建议先移步：

Redux整体介绍： Redux 入门教程，应用的状态管理器

对State进行横向和纵向拆分设计： State设计，Redux 开发第一步

Reducer的最佳实践： Reducer 最佳实践，Redux 开发最重要的部分

这儿就简单介绍一下，如何在微信小程序中引入Redux 以及 如何将微信小程序和Redux连接起来。

引入Redux

直接在 thirdPlugins目录 运行 yarn add redux / npm install redux ，等redux安装好了之后，将 dist目录 的 redux.js/redux.min.js 拷贝到vendors目录中。

需要进行简单的修改才能使用，将压缩版208行代码 (i) 改成 (i || {}) 即可。

简单修改，Redux就可以正常使用

连接微信小程序和Redux

将Redux和微信小程序连接起来才会真的有用处。找了个现成的方案 charleyw/wechat-weapp-redux ，可以直接使用。