本文节选自异步社区所著《微信小程序开发精要》第1章1.1什么是微信小程序？作者是李宁。更多章节请关注云栖社区“异步社区”公众号查看

第一章 微信小程序介绍

微信小程序开发必备

微信小程序是腾讯在2016年9月推出的一种新型微信扩展，虽然还没有正式开发，但已经受到了很大的关注，这主要得益于腾讯的影响力以及微信在中国庞大的用户群。2017年1月9日，腾讯正式上线小程序，这意味着任何人都可以在手机上使用微信里的小程序。由于目前小程序还不是很多，现在进入小程序开发领域或许可以赶上第一波小程序红利。OK，废话不多说，从这一章开始，我们一起来深入了解一下微信小程序的原理以及详细的开发流程吧。

章节重点

什么是微信小程序

注册小程序账号

获取小程序

设置小程序信息

配置微信小程序开发环境

微信小程序的架构

开发第一个微信小程序：石头剪刀布游戏

1.1 什么是微信小程序

微信小程序一经发布，朋友圈就被刷屏了！“微信之父”张小龙说：“小程序就是不用下载安装就能用的应用程序，实现了应用‘触手可及’的梦想，用户只要扫一扫或者搜索就能打开应用，这也体现了‘用了就走’的理念，用户不在乎安装太多应用，应用将无处不在，随时可用，却无需安装或卸载。”

网上也看过一些关于微信小程序的文章，但是内容质量参差不齐，那么我就用这一节来给大家讲一下微信小程序是什么，微信小程序能给我们带来什么。

因为之前有微信公众号，而公众号里的程序其实就是把移动端的Web（主要是CSS等）嵌入到微信里面，当然也会调用微信提供的一些API。所以很多人很自然的就以为微信小程序也是用的它。但事实是微信小程序跟Web一点关系都没有，甚至跟Web都没有关系。因为Web的性能低，特别是对于追求完美的人来说，在手机上使用Web简直是无法忍受的。别说等手机性能发展到跟现在的PC一样的水平就没事了，估计到时候会出现比手机更小，当然性能更差的设备。如果手机变成PC的话，那么这些新设备就会取代现在的手机。就像人们总是等新产品降价了再去买，但当这些产品真的降价了，就会有更好的产品出来，等到可以同时享受新品和低价，是很难的。

既然都说微信小程序跟Web没关系，那证据又是什么呢？这一点从微信小程序官方文档的描述中就可以看出来。感兴趣的读者可以到以下地址查看微信小程序官方文档。

微信小程序主要由3个全局文件和一些页面相关的文件组成。全局文件包括app.js、app.json和app.wxss。其中，app.js是用来编写全局事件的文件，比如微信小程序启动时要执行的代码，类似于iOS项目中.m文件的作用；app.json用于配置微信小程序，比如它是由哪些页面组成的，类似于项目中.xml文件的作用；app.wxss是公共样式表，用于设置整个项目可以使用的样式，类似于or中的资源，可以全局使用。

有人会问，微信小程序不是用的吗？跟 Web 没关系吗？这里要明确一点，它只是一门语言，不一定用在 Web 上，也可以用在服务端，比如 Node.js，当然也可以用在移动端，作为一门独立的语言运行。

微信小程序的页面部分由4个文件组成，这里的页面其实就是窗口，假设页面名称为，那么页面由.js、.wxml、.wxss、.json组成。.js用于编写页面的逻辑代码；.wxml是腾讯自己设计的标记语言，可以称为微信标记语言，用于描述UI；.wxss是页面的样式表，是私有的；.json是页面的配置文件。

这里重点是 .wxss，用过的读者应该对 JSX 很熟悉，JSX 是一种类似 XML 的描述 UI 的语言，它的基本原理就是通过 XML 文件来描述 UI，动态创建原生的 UI。比如用 View 来描述顶层视图，用 Text 来描述文本输出控件。那么我们就可以用下面的代码来模拟这个动态创建的过程。

Android： View component = null; if(tag == "View") { component = new ViewGroup(…); } else if(tag == "Text") { component = new TextView(…); } iOS： UIView *component; if(tag == "View") { component = [UIView new]; } else if(tag == "Text") { component = [UILabel new]; }

上面介绍了动态创建组件的基本流程，当然实际的实现过程比这复杂得多，这里只描述一下原理，显然系统会根据平台的不同、JSX中的描述，生成不同的原生组件。

使用的是 JSX，同样微信小程序使用的是 wxml（ ），这是腾讯自己设计的一种类 JSX 语言，下面是 wxml 的代码示例。

{{userInfo.nickName}} {{motto}}

以下是 JSX 的代码示例。

{ this.drawerLayoutAndroid = drawerLayoutAndroid; }} drawerWidth={150} drawerPosition={DrawerLayoutAndroid.positions.left} renderNavigationView={() =>navigationView}> 我是主布局内容 Open this.drawerLayoutAndroid.closeDrawer(0)}>Close

从上面两段代码片段我们可以看出，JSX 与 wxml 非常相似，只是具体的组件名称和命名风格有所不同。例如 JSX 中所有组件名称首字母都是大写（如 Text），而 wxml 中所有组件名称首字母都是小写（如 text）。此外，组件属性也存在一定差异。

无论 JSX 与 wxml 的代码风格是否相同，系统都会以同样的方式处理，即根据这些代码自动生成原生组件，就如同上面介绍的动态创建原生组件的过程一样。

虽然小程序本身和没什么关系，但是“微信Web开发者工具”（开发小程序的IDE）本身和关系很大。开发“微信Web开发者工具”所用的技术是NW.js（node-js），这是一个允许使用、CSS和开发跨平台（、Mac OS X和）桌面应用的框架。与NW.js类似的框架有（由 牵头的开源项目），与之开发的著名项目包括Atom IDE、Code、等。换句话说，无论是NW.js还是、，它们都足够强大，可以开发IDE和许多系统软件。虽然两个框架都使用作为UI描述，但在PC上， 的表现不错（毕竟PC的CPU足够强大）。如果读者对使用Web技术开发跨平台桌面应用感兴趣，可以关注我的博客（），我会不定期推出相关的技术文章。