小程序宿主环境

我们将微信客户端提供的环境称为作为宿主环境。借助宿主环境提供的功能，该可以完成普通网页无法完成的许多功能。

在上一章中，我们解释了小型程序中涉及的文件类型。我们结合了这个项目来讨论这些文件如何一起工作。

渲染层和逻辑层

首先，让我们简要了解小程序的操作环境。小程序的运行环境分为呈现层和逻辑层。 WXML模板和WXSS样式在呈现层中起作用，而JS脚本在逻辑层中起作用。

的呈现层和逻辑层分别由两个线程管理：呈现层的接口用于呈现；逻辑层使用线程来运行JS脚本。一个小程序具有多个接口，因此呈现层中有多个线程。这两个线程之间的通信将通过微信客户端（以下也称为微信客户端）进行传输，逻辑层通过转发发送网络请求，小程序的通信模型如下图所示。

有关渲染层和逻辑层的详细文档，请参阅小型程序框架。

程序和页面

在打开迷你程序之前，微信客户端会将整个迷你程序的代码包下载到本地。

然后，您可以通过app.json字段了解当前小程序的所有页面路径：

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

此配置描述定义了项目中的两个页面，分别位于//和/ logs / logs中。在该字段中写的第一页是小程序的主页（打开小程序时看到的第一页）。

因此，微信客户端加载主页的代码，并通过小程序底部的某些机制可以呈现主页。

小程序启动后，将执行app.js中定义的App实例的回调：

App({ onLaunch: function () { // 小程序启动之后 触发 } })

整个小应用程序只有一个App实例，该实例由所有页面共享。有关更多事件回调，请参阅注册过程App。

接下来，让我们简要看一下如何编写小程序页面。

您可以看到/ logs / logs下实际上有4种文件。微信客户端将首先基于logs.json配置生成一个接口。您可以在此json文件的顶部定义颜色和文本。 。然后，客户端将加载此页面的WXML结构和WXSS样式。最后，客户端将加载logs.js，您可以看到logs.js的一般内容为：

Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } })

Page是页面构造函数，该构造函数生成一个页面。生成页面时，框架会将数据的最终结构和.wxml一起呈现，因此您可以看到所看到的的外观。

呈现接口后，页面实例将收到回调，您可以在此回调中处理逻辑。

有关Page构造函数的更多详细文档，请参阅注册页面Page。

组件

迷你程序为开发人员提供了许多基本组件。开发人员可以将各种构件（如构件块）组合在一起，以形成自己的小程序。

就像小程序中的div和p这样的HTML标签一样，您只需要在WXML中编写相应的组件标签名称即可在界面上显示组件，例如，您需要在界面上显示地图，只需要这样写：

<map>map>

使用组件时，还可以通过属性将值传递给组件，以便可以以不同的状态显示组件。例如，如果我们希望地图中心的纬度和经度为广州，那么您需要声明地图的（中心经度）和（中心纬度）两个属性：

<map longitude="广州经度" latitude="广州纬度">map>

开发人员还可以通过事件的形式来感知组件的内部行为。例如，如果用户单击地图上的标记，则可以使用js编写一个函数来处理它：

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度">map>

当然，您也可以使用或控制组件的外部样式以适应界面的宽度，高度等。

有关更多组件，请参阅的组件。

API

为了使开发人员能够轻松调整微信提供的功能，例如获取用户信息，微信支付等，该提供了许多API供开发人员使用。

要获取用户的地理位置，您需要做的是：

wx.getLocation({ type: 'wgs84', success: (res) => { var latitude = res.latitude // 纬度 var longitude = res.longitude // 经度 } })

要调用微信扫描功能，您只需要：

wx.scanCode({ success: (res) => { console.log(res) } })

应该注意，大多数API回调都是异步的，因此您需要处理代码逻辑的异步问题。

有关更多API功能，请参阅小程序API。

通过本章，您已经大致了解了运行的一些基本概念。开发小程序后小程序开发环境包，需要发布小程序。在下一章中，您将知道在发布之前需要做哪些准备工作。