2017年1月9日，微信小程序上线，让无数网民为之疯狂。小程序将迎来一场行业革命，可能给现有的电商商业模式和用户的上网体验带来巨大的改变。

2017年即将到来，学习开发微信小程序势必会掀起IT界的热潮，不管你是IT老手，自学成才还是刚入行的菜鸟，吹牛的时候不提微信小程序，估计会很失落。

下面就来说说微信小程序开发需要学习和了解的内容：

首先最基础的还是要了解微信开发知识，没有平台，再牛逼也没法玩下去。废话不多说，下面上一张微信开发知识图谱。PS：想学小程序开发的朋友请前往：微信小程序实战视频课程上线啦！快来学习吧！

那么小程序的基础知识有哪些呢？

一个完整的微信小程序由一个App实例和多个Page实例组成，其中App实例代表小程序应用，多个代表小程序的多个页面。

另外，微信小程序没有提供自定义组件的方式，这使得利用微信小程序开发更复杂的应用程序变得比较困难。

微信小程序非常简单，打开官方教程即可学习，然后自己尝试使用。由于微信官方文档仍在更新，请及时打开最新官方文档检查更新。

微信小程序的基础知识主要分为以下几个部分：

1. 两个配置文件&&两个核心函数

2.WXML模板、页面渲染

3. 页面间跳转

4. 活动

5. 官方组件和官方API

app.json是应用的全局配置文件，决定了页面文件的路径，窗口表现，设置网络超时，设置多个标签页等。

官方示例如下：

{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

登录并复制

主要包括以下配置：

它包含六个属性 ((), le(-(,)), xt(), (),

(-(dark,)),h())，开发者可以根据需求进行配置。

官方给出了如下五个属性((),(),(),(),list())。

设置边框颜色。目前仅支持（和）。

它们都具有以下四个属性((),text(),(),())。

app()用于注册一个小程序，全局只有一个小程序，小程序没有提供销毁的方法，只有进入后台一定时间或者系统资源过高才会真正销毁。

Page()用于注册一个页面，并维护页面的生命周期和数据。

微信官方赋予了Page()函数如下属性（data(),(),(),()，(),(), ()），你也可以在参数中添加任意函数或者数据，并通过此方法在本页面访问。

以下是微信官方给出的代码：

Page({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onShow: function() { // Do something when page show. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) } })

登录并复制

微信还提供了一张页面生命周期的图，可以参考：

小程序虽然是模型，但是并没有采用HTML渲染，而是全部页面通过自定义标签进行渲染。微信小程序采用了微信自带的原生渲染方式，页面布局采用wxml，然后结合基础组件和事件系统构建页面结构，wxml有数据绑定、条件渲染、列表渲染、模板、事件、引用等，这些会给未来的开发和应用开发带来什么好处，只有时间才能告诉我们。

数据绑定，官方示例如下：

{{ message }}

登录并复制

从上面的代码我们可以看出，视图层在接收逻辑层传来的代码时，需要用两个花括号{{}}包裹数据的键值，才能获取数据的值。

条件渲染适合根据数据输出不同状态的WXML，主要使用wx:if和wx:if。

列表渲染——wx:for，wx:for 绑定到数组，可以使用数组中的数据重复渲染组件。注意数组中当前项的下标变量名是默认的，数组中当前项的变量名是 item。以下是官方的示例代码：

{{index}}: {{item.message}}

登录并复制

Page({ data: { items: [{ message: 'foo', }, { message: 'bar' }] } })

登录并复制

{{idx}}: {{itemName.message}}

登录并复制

模板，WXML提供了()，可以让我们复用一些wxml片段。模板还可以根据自己的情况来决定在什么情况下用哪个模板来渲染，如下例所示：

// 引入wxml模块 // 调用wxml模块，同时可传入数据

登录并复制

事件分为冒泡事件和非冒泡事件，当组件上的事件被触发时，事件会传递给父节点，而非冒泡事件则不会。

目前微信小程序仅提供了6个冒泡事件（ 、 、 、tap 、 ），它们对应的触发条件如下图所示。

其余都是非冒泡事件。

事件是通过事件绑定来实现的，写成key的形式，key以bind开头，后面跟着事件的类型，是一个字符串，需要在对应页面中定义一个同名的函数，否则触发事件时会报错。（bind事件绑定不会阻止冒泡事件向上冒泡，但是可以阻止冒泡事件向上冒泡）。

微信小程序中的组件自带一些功能和微信风格的样式，一个组件通常包含一个开始标签和一个结束标签，属性用于修饰组件，内容在两个标签内。

到此为止，关于小程序开发你需要了解的基本内容已经介绍完了，剩下的就请朋友们多多阅读微信官方文档，及时学习和更新吧。

如何设计微信小程序？

1. 构建系统及目录结构

由于微信小程序本身几乎没有对工程化的支持，所以我们搭建了一个：--。使用gulp进行编译构建。

按照/etc/init.d/、/dev/libs拆分成几个核心部分，直接进入目录。

2. 引入集中数据管理

完整的解决方案如下，包括：注入到App中，将数据和方法映射到Page上，一旦发生变更，Page.data也会更新，触发页面重新渲染。

3. 组件化解决方案

组件化方案的核心是将组件关联数据集中管理，仅暴露默认数据和数据操作功能。

终于

虽然目前微信小程序还存在开发工具不完善、真机性能与开发环境差别较大、部分组件性能不佳、部分功能存在缺陷等问题，但这并不妨碍微信小程序成为当下最火的互联网话题和开发学习的新热点。犹如一块巨石投入平静的湖面，能掀起多大的浪花、多长的浪花，让我们拭目以待吧。