「每天3分钟」小程序与微信之间那些不得不说的事

微信小程序的初衷是通过尽可能的简单、高效的方法让开发者可以在微信中开发具有原生APP体验的服务。

微信小程序是依托微信的，简而言之，若想打开微信小程序，则需要拥有微信客户端，即官网所说的微信客户端给小程序提供的环境为宿主环境。

小程序只有借助微信客户端提供的环境才能实现自身的价值，我们可以通过小程序来实现各类功能。

本节我们来说说微信小程序的文件是如何配合工作的。我们不能一味的只知道如何使用，我们更应该了解其在工作间如何配合，如在页面显示字符，数据绑定是如何做到的？

对于使用用户而言，其并不用考虑底层功能的实现方法，其只考虑功能使用是否便捷，是否达到预定效果等；而对于开发者而言，我们需要知道其相互之间的关系，这样我们才能够开发出更加优秀的产品。

1 小程序运行环境

我们在打开任意的网站时，都是通过浏览器去访问的，而这里浏览器就相当于微信，网站页面就相当于小程序，网站页面是依托浏览器来展示的，因此，我们也可以将浏览器看做网站页面的宿主环境。

我们在谈小程序运行环境之前，先来说说Web页面运行机制。用户在浏览器地址栏中输入URL后，浏览器通过解析RUL获取协议、主机、端口和路径，从而将其组装成一个HTTP请求报文，然后根据DNS服务器获取到域名的IP地址，打开Socket建立TCP链接，并发送HTTP/HTTPS请求。服务器通过接受请求并处理（获取所需数据），然后通过TCP链接将响应报文返回。浏览器根据HTML结构生成DOM Tree、根据CSS生成CSSOM，将DOM和CSSOM整合成RenderTree，并通过其开始渲染和展示。在开发中，我们一般通过多种方式来将数据绑定到页面上，比如JSP中使用JSTL来绑定数据，使用JS的innerHTML来给特定标签绑定数据等。

而小程序将运行环境分为渲染层和逻辑层，其中我们上节所谈到的WXML模板和WXSS样式是在渲染层来处理，JS脚本是在逻辑层来处理。小程序将渲染层和逻辑层分别放置在两个线程中管理，渲染层的界面使用WebView进行渲染；逻辑层采用JsCore运行JS脚本。这样，两者互不干涉，却又存在必然联系。在一个小程序中，我们并不会做单一的业务处理，我们会有多种业务，无论有多少业务界面，都在渲染层中处理，因此渲染层会存在多个WebView线程。

无论是渲染层还是逻辑层，它们都会经过微信客户端做中转，逻辑层发送的网络请求获取数据也是通过微信客户端做中转。

整个小程序框架系统分为逻辑层（App Service）和视图层（View），小程序提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。——摘自《官网指南》

说白一点就是我们不需要关注其具体是如何实现的，我们只需要关注我们的业务逻辑，以及业务数据的展示即可，其他的都由微信客户端帮助我们完成。这极大程度降低了开发难度和开发成本，同时也减少了开发周期。

视图层是由小程序提供的自己的描述语言WXML与WXSS编写，由其提供的各类组件进行展示。

逻辑层是基于JavaScript引擎来提供JS代码的运行环境以及小程序的特有功能。逻辑层将获取到的数据进行处理后发送给视图层，同时监听视图层的各类事件。小程序在JavaScript的基础上新增了一下功能：

增加App（程序注册）和Page（页面注册）方法；
增加getApp（获取App实例）和getCurrentPages（获取当前页面栈）方法；
提供丰富的API接口；
提供模块化，每个页面都有独立的作用域。
注：由于小程序框架的逻辑层并非运行在浏览器中，因此JavaScript在web中的一些能力是无法使用的，如window、document等。

2 小程序与其页面的运行机制

我们通过微信客户端打开小程序时，其会将整个小程序的代码包下载到本地。然后通过我们在app.json中pages字段的配置知道当前小程序的所有页面路径，在pages字段的第一个页面就是小程序的首页，即打开小程序看到的第一个页面。

{
  "pages": [
    "pages/index/index"
  ]
}

接着我们看一下pages/index目录下存在四种文件类型的文件，微信客户端会先根据.json文件中的配置生成一个页面，接着装载WXML模板和WXSS模板。最后微信客户端可以装载.js文件并绑定数据。

//Pages是页面构造器，用于生成一个页面
Pages({
    data: {//参与页面渲染的数据
        msg: []
    },
    onLoad: function() {
        //页面渲染后执行
        this.setData({
          msg: 'Hello World !'
        });
    }
})

3 不同于HTML的组件标签

小程序为开发者提供了丰富的基础组件，我们可以通过各类组件的组合，拼合成自己的小程序。其就像HTML中，使用div、p等标签组成页面一样的道理。同时，我们可以根据小程序提供的组件属性来进行各类数据的操作。

4 微信原生API

小程序为开发者提供了丰富的API，可以方便的使用微信提供的功能，如获取用户信息，本地存储，支付等功能。其将API分为事件监听、同步、异步等几类。详细说明将在后续章节中具体讨论。