《微信小程序开发入门精要》——第1章，第1.1节什么是微信小程序

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第1章，第1.1节什么是微信小程序，作者 李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看

第1章 微信小程序入门
微信小程序开发入门精要
微信小程序是腾讯在2016年9月推出的一种新型的微信扩展。尽管目前还没有正式开发，但依然受到了非常多的关注。这主要是由于腾讯的影响力，以及微信在国内拥有的庞大的用户群体。在2017年1月9日，腾讯已经正式上线了小程序，这意味着任何人都可以在手机微信中使用小程序。由于目前小程序的数量还不多，所以现在进入小程序开发领域，可能会赶上小程序的第一拨红利。OK，废话少说，从本章开始，让我们深入了解微信小程序的原理以及详细的开发过程。

本章要点
什么是微信小程序
注册小程序账号
获取小程序的AppID
设置小程序信息
配置微信小程序的开发环境
微信小程序的结构
开发第一个微信小程序：猜拳游戏

1.1 什么是微信小程序
微信小程序刚一公布，朋友圈就被微信小程序刷爆了！“微信之父”张小龙说：“小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。这也体现了‘用完即走’的理念，用户不关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载”。

我也看了网上的一些关于微信小程序的文章，但内容质量良莠不齐。好吧，我就通过本节让大家了解一下什么是微信小程序，以及微信小程序到底能为我们带来什么。

由于之前有微信公众号，而公众号里面的程序其实就是将移动Web（主要是HTML5、CSS、JavaScript等技术）嵌入到微信中，当然，会调用一些微信提供的API。所以很多人自然而然会想到微信小程序用的也是HTML5。但事实是，微信小程序和HTML5，甚至和Web，没有任何关系。因为Web的性能低下，尤其对于那些追求完美的人，在手机上使用Web简直不能忍受。千万别说，等以后手机性能发展到和现在的PC一样就好了，估计等到那时候，会出现比手机更小巧，当然，性能也更差的设备。如果手机成为了PC，那么这些新出现的设备将会取代现在手机的位置。就像人们永远等待新产品降价再买，但等到这些产品真降价了，又会有更好的产品问世，很难等到既享受新产品，同时又享受低价的时候。

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

https://mp.weixin.qq.com/debug/wxadoc/dev/

微信小程序主要由3个全局的文件和一些与页面有关的文件组成，全局文件包括app.js、app.json和app.wxss。其中，app.js是JavaScript文件，用于编写全局的事件，例如微信小程序启动时要执行的代码，类似于iOS工程中AppDelegate.m文件的作用；app.json用于配置微信小程序，例如由哪些页面组成，类似于Android工程中AndroidManifest.xml文件的作用；app.wxss是公共样式表，用于设置整个工程都可以使用的样式，类似于Android中的theme或style资源，全局都可以使用。

可能有人会问，微信小程序不是使用了JavaScript吗？难道和Web没有关系？这里需要明确，JavaScript只是一种语言，未必用在Web上，JavaScript同样可以用在服务端，如Node.js，当然也可以用在移动端，作为独立的语言运行。

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

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

Android：

View component = null;

if(tag == "View")

 component = new ViewGroup(…);

else if(tag == "Text")

 component = new TextView(…);

UIView *component;

if(tag == "View")

 component = [UIView new];

else if(tag == "Text")

 component = [UILabel new];

}

上面描述的是基本的动态创建组件的过程，当然，实际的实现过程要比这个复杂得多，这里只做了原理上的描述。很显然，系统会根据不同平台，以及在JSX中的描述，生成不同的原生组件。

React Native使用的是JSX，类似地，微信小程序使用的是wxml（微信标记语言），它是一种腾讯自己设计的类JSX的语言，下面是wxml的代码示例。

 view 

 view bindtap="bindViewTap" 

 image src="{{userInfo.avatarUrl}}" background-size="cover" /image 

 text {{userInfo.nickName}} /text 

 /view 

 view 

 text {{motto}} /text 

 /view 

 /view 

下面则是JSX的代码示例。

 View center}} 

 Text right}} 我是主布局内容 /Text 

 /View 

 /DrawerLayoutAndroid 

 View row}} 

 Text >

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

不管JSX和wxml的代码风格是否一样，系统处理它们的原理都是一样的，即根据这些代码自动生成原生的组件，就像前面描述的动态创建原生组件的过程一样。

尽管小程序本身和HTML5无关，但“微信Web开发者工具”（开发小程序的IDE）本身却和HTML5有很大的关系。开发“微信Web开发者工具”的技术是NW.js（node-webkit）,这是一种允许使用HTML5、CSS和JavaScript开发跨平台（Windows、Mac OS X和Linux）桌面应用的框架，和NW.js类似的框架是Electron（Github主导的开源项目），用Electron开发的著名项目包括Atom IDE、Visual Studio Code、WordPress等。也就是说，不管是NW.js，还是Electron，都足够强大，以至于可以开发IDE和很多系统软件。尽管这两个框架都使用了HTML5作为UI描述，但在PC上，HTML5的性能表现良好（毕竟PC的CPU足够强大）。如果读者对使用Web技术开发跨平台桌面应用感兴趣，可以关注我的博客（http://geekori.cn），我会不定期推出相关的技术文章。


  智慧校园源码,智慧学校源码+微信小程序+人脸电子班牌 JAVA开发 

 技术开发环境：Java+springboot+vue+element-ui+mysql 用的是最新的技术栈，完全满足开发要求。

它是一款集智慧教学、智慧教务、智慧校务于一体的校园管理平台


 异步社区

 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。