微信小程序（逻辑层与程序注册构造器）

布满荆棘的人生 2023-06-17 04:54 21阅读 0赞

【本节大纲】  
（1）小程序逻辑层 App Service（APP服务）  
（2）ServiceWorker  
（3）web worker  
（4）程序构造/注册器App()  
【前言】  
**逻辑层 App Service（APP服务）**

*  小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
 *  逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
 *  开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在**小程序启动的时候运行**，**直到小程序销毁**。这一行为类似 ServiceWorker，所以逻辑层也称之为 **App Service**。

# ServiceWorker #

#### 背景： ####

*  在互联网早期时代，几乎没人会考虑用户处于离线状态时该如何呈现一个 web 页面，只会考虑在线状态。
 *  但是，随着移动互联网的到来以及网络在世界其他地区的普及，参差不齐的网络质量在用户使用的现代网络中已经越来越普遍。
 *  因此，网站在离线状态时候的表现，以便用户不受网络可用性的限制，已变得非常有价值。

#### 本质： ####

*  Service Worker 是一种 **Web Worker**。它本质上是一个与主浏览器线程分开运行的 **JavaScript 文件**，可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息。

#### 作用： ####

由于 Workers 与**主线程分开运行**，因此 Service Worker 独立于与其关联的应用程序。这将导致以下结果：

1.  当应用程序处于没有活动状态时，Service Worker 可以从服务器接收推送消息。这可以让应用程序向用户显示推送通知，即使它未打开。

> **注意**：浏览器在没有运行的情况下是否能收到通知取决于浏览器如何与操作系统集成。  
> **例如**：在桌面操作系统上，Chrome 浏览器和 Firefox 只会在浏览器运行时收到通知。然而，Android 是在接收到推送消息时唤醒任何浏览器，并且无论浏览器状态如何都将始终接收推送消息，所以在web app常用此方法

1.  Service Worker 不能直接访问 DOM

#### 生命周期： ####

*  安装 Service Worker，需要在 JavaScript 主进程中进行注册
 *  注册完毕后，便会开始激活加载相关事件
 *  使用完毕后销毁

# web worker #

#### 背景： ####

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

#### 作用： ####

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在**后台运行**，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。

### 简介： ###

*  当在 HTML 页面中执行脚本时，页面状态是不可响应的，直到脚本完成。
 *  web worker 是运行在后台的 JavaScript，**独立于其他脚本**，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时H5的 web worker 在后台运行。

#### 浏览器支持： ####

所有主流浏览器均支持 web worker，除了 **Internet Explorer**。

#### 通俗理解： ####

**web worker 是运行在后台的 JavaScript，不会影响页面的性能**

> **注意**：  
> Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。  
> 这样有利于随时响应主线程的通信。但是，这也造成了 **Worker 比较耗费资源**，不应该过度使用，而且一旦使用完毕，就应该关闭。

# 逻辑层 App Service #

#### 在 JavaScript 的基础上，增加了一些功能，以方便小程序的开发： ####

1.  增加 **App(\{\})** 和 **Page(\{\})** 方法，进行**程序注册**和**页面注册**。
2.  增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈，至于实例与**页面栈**，后续会一一介绍。
3.  提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
4.  提供模块化能力，每个页面有独立的作用域。

#### 注意： ####

小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

#### 缘由： ####

小程序逻辑层的行为类似 ServiceWorker，而ServiceWorker的本质是一种 Web Worker，它本质上是一个与主浏览器线程分开运行的 JavaScript 文件。由于 web worker 位于外部文件中，所以无法访问相关BOM和DOM。

# 程序与页面 #

#### 程序与页面： ####

*  从逻辑组成来说，一个小程序是由多个“页面”组成的“程序”。
 *  往往需要在“程序”启动或者退出的时候存储数据或者在“页面”显示或者隐藏的时候做一些逻辑处理，了解程序和页面的概念以及它们的生命周期是非常重要的。
 *  逻辑组成上分为小程序级别和页面级别，所以小程序的生命周期也可以分为：**程序生命周期和页面生命周期**。

# 程序构造/注册器App() #

1.  **App()作用**：**注册小程序**，小程序加载时首先在入口文件 app.js 中调用 App 方法进行注册，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
2.  **App()别名**：**程序构造器或者程序注册器**
3.  **App()参数**：**Object对象**  
    **二级参数**：  
    data初始化数据  
    小程序生命周期：
    
    1.  **onLaunch**小程序初始化
    2.  **onShow**小程序启动/从后台进入前台展示—前台态
    3.  **onHide**小程序隐藏/从前台进入后台隐藏—后台态
    4.  **onError**小程序报错调用
    
    globalData全局数据

#### 获取程序构造/注册器getApp()： ####

宿主环境提供了 App() 构造器用来注册一个程序App，App() 构造器必须写在项目根目录的入口文件app.js里，在其他JS脚本中可以使用宿主环境提供的 **getApp()** 来获取程序实例。  
例如：在index.js获取程序构造器  
![在这里插入图片描述][20191127162211493.png]

#### App() 参数 ####

App构造器接受一个Object参数

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>Function</td> 
   <td>当小程序初始化完成时，会触发 onLaunch（全局只触发一次）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>Function</td> 
   <td>当小程序启动，或从后台进入前台显示，会触发 onShow</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>Function</td> 
   <td>当小程序从前台进入后台，会触发 onHide</td> 
  </tr> 
  <tr> 
   <td>onError</td> 
   <td>Function</td> 
   <td>当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息</td> 
  </tr> 
  <tr> 
   <td>其他字段</td> 
   <td>任意</td> 
   <td>可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问</td> 
  </tr> 
 </tbody> 
</table>

**基础App构造器案例**

//app.js
    App({ 
    
      /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */
      onLaunch: function () { 
        
      },
    
      /** * 当小程序启动，或从后台进入前台显示，会触发 onShow */
      onShow: function (options) { 
        
      },
    
      /** * 当小程序从前台进入后台，会触发 onHide */
      onHide: function () { 
        
      },
    
      /** * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 */
      onError: function (msg) { 
        
      }
    })

#### 小程序全局数据 ####

小程序的JS脚本是运行在**JsCore**的线程里，小程序的每个页面各自有一个**WebView线程**进行渲染，但是小程序切换页面时，小程序逻辑层的JS脚本运行上下文依旧在**同一个JsCore线程**中。

#### 共享全局数据： ####

因为小程序逻辑层的JS脚本运行上下文始终在同一个JsCore线程中，因此不同页面直接可以通过App实例下的属性来共享数据，App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。

#### 小程序全局共享数据 ####

//app.js
    App({ 
      globalData: { 
        userInfo: null,
        num:1
      }
    })

//其他页面脚本other.js
    //获取应用实例
    const app = getApp()
    console.log(app.globalData.num); //输出1

> 注意：  
> 所有页面的脚本逻辑都跑在同一个JsCore线程，页面使用setTimeout或者setInterval的**定时器**，然后跳转到其他页面时，这些定时器并没有被清除，需要开发者自己在页面离开的时候进行清理。  
> 涉及到跳转与生命周期，后期一一介绍。

[20191127162211493.png]: https://img-blog.csdnimg.cn/20191127162211493.png