第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(…);
}
iOS：
UIView *component;
if(tag == "View")
{
component = [UIView new];
}
else if(tag == "Text")
{
component = [UILabel new];
}上面描述的是基本的动态创建组件的过程，当然，实际的实现过程要比这个复杂得多，这里只做了原理上的描述。很显然，系统会根据不同平台，以及在JSX中的描述，生成不同的原生组件。
React Native使用的是JSX，类似地，微信小程序使用的是wxml（微信标记语言），它是一种腾讯自己设计的类JSX的语言，下面是wxml的代码示例。
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>下面则是JSX的代码示例。
<View style={{flex:1}}>
<DrawerLayoutAndroid
ref={drawerLayoutAndroid => { this.drawerLayoutAndroid = drawerLayoutAndroid; }} drawerWidth={150}
drawerPosition={DrawerLayoutAndroid.positions.left}
renderNavigationView={() =>navigationView}>
<View style={{flex: 1, alignItems:'center'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>我是主布局内容</Text>
</View>
</DrawerLayoutAndroid>
<View style={{flexDirection:'row'}}>
<Text style={{flex:1}} onPress={this.onPress.bind(this)}>Open</Text>
<Text style={{flex:1}}
onPress={()=>this.drawerLayoutAndroid.closeDrawer(0)}>Close</Text>
</View>
</View>从上述的两段代码可以看出，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），我会不定期推出相关的技术文章。