微信小程序中的JavaScript使用详解:MINA框架与运行环境介绍

2025-03-15
来源:网络整理

在微信中

微信系的业务逻辑是通过语言实现的。在本章中,我们将详细解释基本概念,以及如何在小程序中使用语言。它是一种轻巧,解释的,面向对象的第一功能语言,并且是一种动态原型和多范式脚本语言,支持面向对象,命令和功能性编程样式。

1。 1.1 MINA框架的运行环境简介

小程序的开发框架称为MINA框架,其框架结构如图1所示。

图1 MINA框架结构

通过上面的框架结构图,我们可以看到该小程序的MINA框架由三个部分组成,第一个是视图层,其次是App 和 。小程序中的所有页面都在视图层中,每个页面都由WXML文件和WXSS文件组成,以构建页面视图的结构和演示样式。

APP逻辑层加载并通过应用程序线程及其生命周期居民内存运行。顾名思义,APP逻辑层用于处理业务逻辑,是MINA框架的数据交互服务中心。逻辑层由两个部分组成。其中之一是,其主要功能是负责的逻辑处理部分的执行;另一部分是基础层提供的.js文件,该文件用于封装的所有API接口,以便其他平台的操作环境可以通过封装的API使用微信客户的功能。

迷你程序MINA框架的第三部分是系统层,该系统层连接到微信客户端的本机功能。小程序的视图层和逻辑层在双向通信,在视图层和逻辑层之间提供数据传输和事件系统。视图层和逻辑层通过系统层通信。逻辑层通知数据更改到视图层,然后触发视图层的页面更新,然后视图层通知事件的逻辑层用于业务处理。

那么,如何在迷你程序的视图层中实时显示数据更改?

首先,WXML实际上是一个带有元素,属性和文本的节点树结构。在节点树结构中,每个节点都有上下文关系,因此,当渲染WXML时,Mini程序的运行环境将将WXML节点树转换为对象。当数据更改发生在逻辑层中时,需要通过APP逻辑层提供的()方法将数据从逻辑层传递到视图层。当微信客户端的容器渲染节点内容时,它将在差异之前和之后比较传递的数据,然后通过diff算法对其进行计算,将计算结果应用于原始节点树,最后渲染正确的UI接口。

学习小程序MINA框架的基本实施原则可以帮助我们更清楚地理解和理解小程序的发展。该小程序对MINA框架进行了许多优化。例如,当逻辑层的应用程序遇到阻塞时,UI线程仍然可以正常处理并渲染视图,从而避免在交叉通信期间内存消耗。实际上,在许多地方,Mini计划优化了MINA框架。例如,当启动迷你程序时,还可以进行一些优化处理,这要求我们继续学习Mini程序的启动和操作机制。

1.2迷你计划启动机制

当您使用迷你程序时,这种情况肯定会发生。当Mini程序打开并首次启动时,启动过程很长。如果以后再次打开,启动速度将非常快。那么Mini计划如何启动呢?

实际上,有两个用于迷你计划的启动状态,一个是热门开始,另一个是冷启动。

首先,让我们看一下什么是热门开始。当用户打开一个小程序并在一定时间内再次打开小程序时,无需再次重新启动它。您只需要将小程序在后台切换到前景即可。此启动过程是热门启动。

迷你程序的冷启动是指用户开放的迷你程序首次被微信积极销毁,如果再次打开,则需要重新启动迷你程序。在什么情况下,迷你计划将被积极销毁?这里有两种情况。一个是,在Mini程序进入背景状态之后,客户将在一定时间段内帮助用户维护Mini计划的启动状态。超过一段时间后,微信客户将在背景状态下积极销毁迷你计划。这个超时时间默认为五分钟。另一种情况是,当Mini计划在短时间内收到两个以上的系统警报时,微信客户还将积极销毁背景状态处的迷你程序。每个系统警报之间的默认间隔为五秒钟。

当微型程序被冷启动时,如果找到了新版本,它将帮助用户异步下载最新版本的代码软件包,并使用微信客户端的本地代码包进行启动。当小程序下次重新启动时,下载的最新版本的代码软件包需要将下载。如果这次下载最新版本的代码软件包后需要将其应用于小程序,则需要通过提供的API实现它。

1.3迷你程序加载机制

在了解小程序的启动机制之后,让我们看一下小程序的启动过程。小程序的启动过程如图2所示。

图2。小程序的启动流程图

通过上面的Mini 启动流程图,我们可以看到该图的左侧是微信客户端中视图层和逻辑层的交互式逻辑以及Mini程序启动时数据缓存的访问操作。当小程序启动时,将从CDN服务器请求最新版本的代码软件包。如果这是第一次开始,则用户必须等到下载代码软件包并将最新代码注入Web容器中以执行,然后才能看到的页面。如果您遇到不良的网络情况,则用户会觉得Mini程序将启动很长时间。微信客户端将在本地缓存代码软件包。下次您启动它时,它将请求是否有来自CDN服务器的代码包的最新版本。

CDN实际上是一个内容分布网络。它的主要功能是帮助用户向最接近用户的网络节点服务器分配请求的内容,提高用户访问的响应速度和成功率,并解决网络带宽和服务器性能延迟的问题。

启动时,小程序将执行一些验证。当有最新版本的代码软件包时,将运行先前的缓存代码软件包,同时,请与最新版本的代码软件包下载,以便用户可以在下一个启动时使用它。

1.4对小程序的支持

微信小计划的主要开发语言是语言。开发人员可以使用语言来开发迷你程序的业务逻辑,并致电迷你程序API来满足业务需求。

它遵循标准,是ECMA 通过ECMA-262标准化的脚本编程语言。这是一个实现。理解是一种实现,可以帮助开发人员了解中的相同浏览器和node.js中的不同浏览器。

标准语言由以下部分组成:

浏览器中的结构如图3所示。

浏览器中的图3

浏览器由三个部分组成:DOM(全名,即文档对象模型)和BOM(全名,即浏览器对象模型)。其中,DOM和BOM对象模型为Web前端开发人员提供了用于操作浏览器的API,以修改浏览器的性能,例如修改URL,修改页面显示,数据记录,等等。

Node.js是基于V8引擎实现的运行时。它使用高效且轻巧的事件驱动和非阻滞IO模型。我们通常使用node.js作为后端语言。 Node.js中的组成如图4所示。

图4。

Node.js由NPM和模块组成。其中,NPM是node.js的软件包管理系统。通过NPM,可以扩展各种软件包以快速实施一些功能。同时,一些本机模块用于实现Node.js语言本身没有的功能,例如FS文件操作,HTTP请求等。

在了解浏览器和Node.js实现之后,让我们看一下Mini程序的实现。迷你程序的组成如图5所示。

图5。

小程序由小程序框架和封装的API模块组成。与浏览器相比,没有BOM和DOM模型对象,因此与浏览器类库的对象相似,无法在小程序中运行。此外,中缺乏本机模块和NPM软件包管理机制,因此无法在小程序中加载本机库并直接使用NPM软件包。如果要使用NPM软件包,则需要通过构建由微信开发人员工具提供的NPM功能来实现它们。

1.5迷你计划主机环境的差异

除了浏览器和node.js的不同实现外,不同平台的脚本运行环境在中也有所不同。 脚本的运行环境主要包括以下三个平台的运行环境。

微信开发人员工具中的NWJS基于node.js,也称为节点,并在内部封装,提供桌面应用程序的运行环境,允许在浏览器中运行的Web程序在桌面程序中运行。迷你程序的主机环境如图6所示。

图6迷你计划主机环境的差异

在小程序的三个主机环境中,标准的实现是不一致的。截至目前,标准有八个版本。在Web前端开发中的大多数环境中,使用ES5和ES6标准。但是,在MINI程序中,IOS8和IOS9系统使用的操作环境与ES6标准不完全兼容,因此在MINI程序中,ES6的某些语法和关键字不兼容。这会导致在微信开发人员工具和真实机器中运行时相同代码呈现的效果不一致。为了解决此问题,在开发微信小程序时,您可以在微信开发人员工具上使用远程调试功能,以实时查看的性能。

2生命周期2.1应用程序生命周期

迷你计划的生命周期分为迷你计划的生命周期和迷你计划的页面生命周期。让我们首先看一下迷你程序的生命周期,如图7所示。

图7迷你计划申请生命周期

小程序的应用生命周期中有四个钩子功能,即,, ,,, ,,,,,,,,,,,,,,,, ,, ,, ,, ,, ,, ,,, ,, ,, ,, ,, ,,,,,,,,,,,,,,, ,, ,,, ,,,,,,,,,,,,,,,, ,, ,, ,, ,, ,, ,,, ,, ,, ,, ,, ,,,,,,,,,,,,,,, ,, ,,, ,,,,,,,,,,,,,,,, ,, ,, ,, ,, ,, ,,, ,, ,, ,, ,, ,,,,,,,,,,,,,,,

【示例1】迷你申请生命周期

// app.js App({ onLaunch() {}, onShow() {}, onHide() {}, onError() {} })

当用户首次进入Mini程序时,微信客户端将帮助用户初始化Mini 的运行环境,并将从CDN服务器下载Mini 的代码包或从本地缓存获得Mini 的代码包,然后将代码注入运行环境。初始化Mini程序后,微信客户端将将事件派遣到Mini 逻辑层的App.js文件中的应用程序,此时,在App.js文件中的App构造函数参数上定义的()挂钩函数将被调用。

输入小程序后,用户可以通过接口右上角的关闭按钮或手机上的主页按钮离开小程序。离开后,小程序不会立即销毁,而是进入背景状态。此时,将调用在应用程序构建器参数上定义的()挂钩函数。当用户通过热门启动返回小程序时,微信客户端将在背景状态中唤醒小程序。此时,小程序进入前景状态并在应用程序构造函数参数上调用()挂钩函数。当脚本错误发生在中或 api调用失败时,将触发应用程序构建器参数上的()挂钩函数。

2.2页生命周期

迷你程序页面的生命周期钩函数如图8所示。

图8 Mini计划页面生命周期

在迷你程序页面的生命周期中,有五个挂钩功能,即。特定的代码实现如示例2所示。

【示例2】迷你计划页面生命周期

// page.js Page({ onLoad(options) {}, // 监听页面加载 onReady() {}, // 监听页面初次渲染完成 onShow() {}, // 监听页面显示 onHide() {}, // 监听页面隐藏 onUnload() {} // 监听页面卸载 })

加载Mini程序页面后,微信客户端将将事件派遣到逻辑层定义的页面实例。此时,将调用页面构造函数参数上定义的()挂钩函数。 ()方法只会在页面破坏之前一次调用一次。在此方法中,可以获得当前页面时的一些打开参数。

显示Mini程序页面后,将调用页面构造函数参数定义的()构造函数函数。每次显示页面时,都会调用()方法。该页面初始化后也将调用一次,当用户从另一个页面返回当前页面时,也将调用。完成当前页面的初始渲染完成后,将调用页面构造函数参数上定义的()挂钩函数。 ()方法以()方法为调用,并且在当前页面被破坏之前只会调用一次。

触发()方法后,逻辑层开始与视图层相互作用。当用户根据当前页面再次打开一个新页面时,当前页面将触发页面构造函数参数上定义的()挂钩函数。关闭当前页面时,将触发页面构造函数参数上的()挂钩函数。

小程序由两个主要线程组成,即负责页面视图和应用程序线程处理数据和服务的视图线程。这两个主要线程如图9所示。

图9查看线程和应用程序线程

这两个主要线程共同完成了迷你计划页面的生命周期的呼吁。当小程序首次启动时,将同时创建两个线程。创建应用程序线程时,将依次调用()和()方法。开发人员可以在这两种方法中发送HTTP请求。初始化视图线程后,还已经初始化了应用程序线程,并且页面的第一个渲染也将触发。视图线程呈现页面后,它将再次告诉App 渲染结果,并且()挂钩函数的调用也将被触发。调用()挂钩函数后,如果先前已发送的HTTP请求已接收到服务器返回的数据,则应用程序线程将再次将服务返回的数据发送到视图线程,并且视图线程将再次渲染视图,直到当前页面被破坏并触发App 的()挂钩函数。

3模块

在Mini程序中,可以将一些常见的代码提取到单独的文件中,一个文件是一个模块,并且文件中也可以有多个模块。该模块可以通过接口暴露。它是指。揭示模块接口。

示例3中显示了用于公开接口的代码。

【示例3】导出模块

// common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中,请使用公共代码实现示例4中所示的代码。

【示例4】导入模块

var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } })

4 Mini计划API

为了促进开发,微信小组封装了一些API模块,以促进开发人员快速实施一些功能。这些API模块包括调用移动设备的基本能力,访问移动设备的硬件能力以及微信的开放能力。

迷你程序API提供的开发功能包括网络访问,存储,路由,跳跃,转发,接口交互,数据缓存,系统文件访问,位置和其他模块。开发人员可以使用这些API来实现更多需求开发。我们将在以下各章中详细介绍小程序的核心API。

5本章的摘要

本章主要介绍微信系的实现,以及浏览器和Node.js的微信系列的差异。通过对本章的研究,我了解了微信小组的启动和加载机制,并掌握了Mini 应用程序生命周期和页面生命周期挂钩功能。这些挂钩功能广泛用于开发迷你程序项目,并要求初学者掌握它们。

分享