【微信小程序实战教程】之微信小程序中的 JavaScript

微信小程序中的 JavaScript

微信小程序的业务逻辑都是通过JavaScript语言来实现的,本章我们将详细的讲解JavaScript的基本概念,以及在小程序中如何使用JavaScript语言。JavaScript是一种轻量的、解释型的、面向对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言,支持面向对象、命令式和函数式的编程风格。

1 小程序的运行环境

1.1 MINA 框架介绍

小程序的开发框架被称为MINA框架,其框架结构如图1所示。
在这里插入图片描述
图1 MINA框架结构

通过上面的框架结构图,我们可以看到小程序的MINA框架有三个部分组成,首先是View视图层,其次是App Service逻辑层和Native系统层。小程序中所有的页面都在View视图层中,每个页面由WXML文件和WXSS文件来搭建页面视图的结构和展现样式。

App Service逻辑层是由App Service线程来加载、运行的,其生命周期常驻内存。App Service逻辑层顾名思义就是用来处理业务逻辑的,是MINA框架的数据交互服务中心。逻辑层有两个部分组成,一个是Manager,其主要功能是负责小程序逻辑处理部分的执行;另一个部分是底层提供的WAService.js文件,用于封装小程序的所有API接口,让其他平台的运行环境能够通过封装的API来使用微信客户端的能力。

小程序的MINA框架第三部分是Native系统层,这一层中接入了微信客户端的原生能力。小程序的视图层和逻辑层是双向通信的,在视图层和逻辑层之间提供了数据传输和事件系统。在视图层和逻辑层通过系统层的JSBridge进行通信,逻辑层把数据变化通知到视图层,然后触发视图层的页面更新,然后视图层再把事件通知给逻辑层进行业务处理。

那么在小程序的视图层中,是如何把数据变化实时地展示出来的呢?

首先,WXML其实就是一个具有元素、属性和文本的节点树结构,在节点树结构中,每一个节点都有一个上下文的关系,所以在渲染WXML的时候,小程序的运行环境会把WXML节点树转换成一个JavaScript对象。当逻辑层发生数据变更时,就需要通过App Service逻辑层提供的setData()方法把数据从逻辑层传递到视图层。微信客户端的WebView容器在渲染节点内容时,会把传递的数据进行前后的差异对比,然后再通过diff算法进行计算,将计算后的结果应用在原来的节点树上,最后渲染出正确的UI界面。

学习小程序的MINA框架的底层实现原理可以帮助我们更加清晰的了解和认识小程序的开发,小程序在MINA框架上做了很多的优化,例如当逻辑层的App Service线程遇到阻塞时,UI线程照样可以正常地处理和渲染视图,这样也就避免了跨线程通信时的内存消耗。其实,小程序对MINA框架优化的地方还有很多,例如在小程序启动时也做了一些优化处理,这就需要我们继续学习小程序的启动和运行机制。

1.2 小程序启动机制

大家在平常使用小程序的过程中肯定会到这种情况,就是在小程序首次打开并启动的情况下,启动过程较长,如果后续再次打开的话,启动的速度就会很快。那么小程序是如何启动的呢?

其实,小程序有两种启动状态,一种是热启动,另一种是冷启动。

首先,我们先来看一下什么是热启动。当用户已经打开过某个小程序后,在一定时间内再次打开该小程序,就不需要再次重新启动了,只需要把后台态的小程序切换到前台使用即可,这个启动过程就是热启动。

小程序的冷启动是指用户首次打开的小程序被微信主动销毁后,再次打开该小程序就需要重新启动。小程序在什么情况下会被主动销毁呢?这里有两种情况,一种是小程序进入后台状态之后,客户端会帮助用户在一定时间内维持小程序的启动状态,当超过一定时间之后,微信客户端会主动销毁处于后台状态的小程序,这个超时时间默认为五分钟。另外一种情况,就是当小程序在短时间内连续收到两次以上的系统告警时,微信客户端也会主动销毁正处于后台状态的小程序,每次系统告警的间隔时间默认为五秒。

在小程序冷启动时,如果发现有新的版本,就会帮助用户异步下载最新版本的代码包,并同时使用微信客户端的本地代码包进行启动。小程序异步下载的最新版本的代码包需要下次重启启动小程序时才能被应用到小程序中,如果需要在本次下载最新版本代码包后就应用到小程序中,需要通过小程序提供的API来实现。

1.3 小程序加载机制

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

在这里插入图片描述
图2 小程序的启动流程图

通过上面的小程序启动流程图我们可以看到,在图的左侧部分是小程序启动的时候,微信客户端里面的视图层和逻辑层的交互逻辑以及数据缓存的存取操作。在小程序启动时,会向CDN服务器请求最新版本的代码包。如果是第一次启动的话,用户要等到代码包下载完毕,并将最新代码注入到Web容器内执行之后才能看到小程序的页面。如果遇到网络不好的情况,用户就会感觉小程序启动的时间较长,微信客户端会吧代码包缓存到本地,在下次启动时,会从CDN服务器上请求是否有最新版本的代码包。

CDN其实就是一个内容分发网络,主要作用是帮助用户把请求的内容分发到距离用户最近的一个网络节点服务器,提高用户访问的响应速度和成功率,以此来解决网络带宽和服务器性能延迟的问题。

小程序在启动时会做一些校验,当有最新版本的代码包时,小程序会运行之前已经缓存好的代码包,同时异步下载最新版本的代码包,让用户在下次启动时来使用。

1.4 小程序对JavaScript的支持

微信小程序的主要开发语言就是JavaScript语言,开发者可以使用JavaScript语言来开发小程序的业务逻辑以及调用小程序的API来完成业务需求。

JavaScript是遵循ECMAScript标准,ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言, JavaScript是ECMAScript的一种实现。理解JavaScript是ECMAScript一种实现后,可以帮助开发者理解小程序中的JavaScript同浏览器中的JavaScript以及Node.js中的JavaScript是不相同的。

遵循ECMAScript标准的JavaScript语言由以下几个部分组成:

  • 基础语法
  • 数据类型
  • 语句
  • 关键字
  • 操作符
  • 对象

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

在这里插入图片描述
图3 浏览器中的JavaScript

浏览器中的JavaScript是由ECMAScript、DOM(全称 Document Object Model,即文档对象模型)、BOM(全称 Browser Object Model,即浏览器对象模型)三部分组成的,其中DOM和BOM对象模型为Web前端开发者提供了让操作浏览器的API,用于修改浏览器的表现,例如修改URL、修改页面展示、数据记录等。

Node.js是基于Google v8引擎实现的JavaScript运行时,它使用了高效、轻量的事件驱动以及非阻塞的IO模型。我们通常会将Node.js作为一门后端语言来使用。Node.js中的JavaScript构成如图4所示。

在这里插入图片描述
图4 Node.js中的JavaScript

Node.js中的JavaScript是由ECMAScript、NPM以及Native模块组成。其中,NPM是Node.js的包管理系统,通过NPM可以拓展各种包来快速实现一些功能,同时通过一些Native原生模块来实现Node.js语言本身不具有的能力,例如FS文件操作、HTTP请求等。

了解过浏览器的JavaScript和Node.js的JavaScript实现之后,我们再来看一下小程序的JavaScript实现。小程序的JavaScript构成如图5所示。

在这里插入图片描述
图5 小程序中的JavaScript

小程序的JavaScript是由ECMAScript、小程序框架、小程序封装的API模块组成的,与浏览器中的JavaScript相比,小程序的JavaScript没有BOM和DOM模型对象,所以类似于jQuery、Zepto这种浏览器类库是无法在小程序中运行的。而且,小程序中的JavaScript缺少Native原生模块和NPM包管理的机制,在小程序中是无法加载原生库以及无法直接使用NPM包的,如果想要使用NPM包,需要通过微信开发者工具提供的构建NPM功能来实现。

1.5 小程序宿主环境差异

小程序的JavaScript除了与浏览器的JavaScript以及Node.js的JavaScript实现有所不同之外,在小程序中,不同平台的JavaScript脚本运行环境也是有所不同的。小程序JavaScript脚本的运行环境主要包含以下三个平台的运行环境。

  • iOS平台上,小程序的JavaScript代码运行在JavaScriptCore中,由WKWebView进行渲染;
  • Android平台上小程序的JavaScript代码通过X5内核解析,然后由X5内核进行渲染;
  • 在微信开发者工具中,小程序的JavaScript代码运行在nwjs中,由ChromeWeb进行渲染;

微信开发者工具中的nwjs是基于Chrome和Node.js运行的,又被称为Node Webkit,内部封装了webkit的内核,提供了桌面应用的运行环境,让浏览器中运行的网页程序也可以在桌面程序中运行。小程序宿主环境如图6所示。

在这里插入图片描述
图6 小程序宿主环境差异

在小程序的三个宿主环境中关于ECMAScript标准的实现是不一致的,ECMAScript标准截止到目前一共有八个版本,在Web前端开发中大部分环境使用的是ES5和ES6标准。但是目前在小程序中,iOS8、iOS9系统所使用的运行环境并没有完全兼容到ES6的标准,所以ES6的一部分语法和关键字在小程序中是不兼容的。这就导致在微信开发者工具中和真机中运行时,同样的代码所呈现的效果会出现不一致的情况。针对这种问题,在开发微信小程序时可以使用微信开发者工具上的远程调试功能,实时查看小程序在真机上的表现。

2 生命周期

2.1 应用的生命周期

小程序的生命周期分为小程序应用生命周期和小程序的页面生命周期,我们先来看一下小程序应用生命周期,如图7所示。

在这里插入图片描述
图7 小程序应用生命周期

小程序应用生命周期有四个钩子函数,分别是onLaunch、onShow、onHide、onError,具体代码实现如例1所示。

【例1】小程序应用生命周期

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

当用户第一次进入小程序的时候,微信客户端会帮助用户初始化小程序的运行环境,同时会从CDN服务器下载或者是从本地缓存中获取小程序的代码包,然后把代码注入到运行环境中。小程序初始化完成后,微信客户端会向小程序逻辑层的app.js文件中的app实例派发onLaunch事件,此时就会调用app.js文件中的App构造器参数上定义的onLaunch()钩子函数。

在进入小程序后,用户可以通过小程序界面右上角的关闭按钮或者是手机上的home键离开小程序,离开后并没有立即销毁小程序,而是进入后台状态,此时就会调用App构造器参数上定义的onHide()钩子函数。当用户通过热启动再次回到小程序时,微信客户端会把后台状态的小程序唤醒,此时小程序进入前台状态,同时调用App构造器参数上的onShow()钩子函数。当小程序发生脚本错误时,或者小程序API调用失败时,会触发App构造器参数上的onError()钩子函数。

2.2 页面的生命周期

小程序页面生命周期钩子函数如图8所示。

在这里插入图片描述
图8 小程序页面生命周期

小程序页面生命周期有五个钩子函数,分别是onLoad、onShow、onReady、onHide以及onUnload。其具体代码实现如例2所示。

【例2】小程序页面生命周期

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

当小程序页面加载时,微信客户端会向逻辑层定义的page实例派发一个onLoad事件,此时Page构造器参数上定义的onLoad()钩子函数就会被调用,unLoad()方法在页面被销毁之前只会调用一次,在该方法中可以获取到当前页面被调用时的一些打开参数。

小程序页面显示之后,Page构造器参数所定义的onShow()构子函数就会被调用,onShow()方法是在每次页面显示时都会被调用,页面初始化完成后也会被调用一次,当用户从别的页面返回当前页面时也会被调用。在当前页面初次渲染完成后,Page构造器参数上定义的onReady()钩子函数就会被调用,onReady()方法是在onShow()方法之后被调用的,并且在当前页面被销毁之前只会调用一次。

onReady()方法被触发之后,逻辑层就开始与视图层进行交互了,用户在当前页面基础上再次打开一个新页面时,当前页面会触发Page构造器参数上定义的onHide()钩子函数,在关闭当前页面时,会触发Page构造器参数上的onUnload()钩子函数。

小程序是由两大线程组成,分别是负责页面视图的View线程和处理数据与服务的App Service线程,两大线程如图9所示。

在这里插入图片描述
图9 View线程和App Service线程

两大线程协同工作来完成小程序页面生命周期的调用。当小程序首次启动后,两个线程会被同时创建,当App Service线程创建后会依次调用onLoad()onShow()方法,开发者可以在这两个方法内发送HTTP请求。当View线程初始完毕之后,App Service线程也已经初始化完毕,此时也会触发页面的首次渲染。View线程渲染完页面后,会再次告诉App Service线程渲染结果,同时也会触发onReady()钩子函数的调用。onReady()钩子函数调用完毕后,如果之前发送的HTTP请求已经拿到服务器返回的数据,那App Service线程就会把服务返回的数据再次发送给View线程,View线程再次渲染视图,直到当前页面销毁并触发App Service线程的onUnload()钩子函数。

3 模块化

在小程序中,可以将一些公共代码抽离成一个单独的JavaScript文件,一个JavaScript文件就是一个模块,一个JavaScript文件中也可以有多个模块。模块可以通过module.exports或者exports对外暴露接口。exports是module.exports的一个引用,如果在模块中随意更改exports的指向会造成未知的错误,所以推荐使用module.exports来暴露模块接口。

模块对外暴露接口的代码如例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

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

【例4】导入模块

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

4 小程序的API

为方便开发,微信小程序封装了一些API模块,方便开发者快速实现一些功能,这些API模块包括调用移动设备的基础能力、访问移动设备的硬件能力以及微信的开放能力。

小程序API提供的开发能力包括网络访问、存储、路由、跳转、转发、界面交互、数据缓存、系统文件访问、位置等一系列模块。开发者可以借助这些API实现更多的需求开发,我们会在后面的章节中详细介绍小程序的核心API。

5 本章小结

本章主要介绍了微信小程序的JavaScript实现,以及微信小程序中的JavaScript与浏览器的JavaScript和Node.js中的JavaScript的区别。通过本章的学习,了解了微信小程序的启动和加载机制,掌握小程序应用生命周期和页面生命周期钩子函数,这些钩子函数在小程序项目的开发中应用非常广泛,需要初学者熟练掌握。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/396384.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 开发工具 Hbuilder 简介及应用

一、简介 HBuilderX 是一款流行的前端开发工具,由DCloud公司开发。它支持多种编程语言,如HTML、CSS、JavaScript、Vue、UniApp等,非常适合用来开发Web应用、移动端应用和跨平台应用。 官网地址:https://www.dcloud.io/hbuilderx.…

UE基础 —— 工具和编辑器

目录 Level Editor Static Mesh Editor Material Editor Blueprint Editor Physics Asset Editor Behavior Tree Editor Niagara Editor UMG UI Editor Font Editor Sequencer Editor Animation Editor Control Rig Editor Sound Cue Editor Media Editor nDisp…

SB3045LFCT-ASEMI无人机专用SB3045LFCT

编辑:ll SB3045LFCT-ASEMI无人机专用SB3045LFCT 型号:SB3045LFCT 品牌:ASEMI 封装:TO-220F 批号:最新 最大平均正向电流(IF):30A 最大循环峰值反向电压(VRRM&…

【IEEE独立出版】第四届计算机科学与区块链国际学术会议 (CCSB 2024)

第四届计算机科学与区块链国际学术会议 (CCSB 2024) 2024 4th International Conference on Computer Science and Blockchain 2024年9月6-8日 中国-深圳 老牌会议 | 涵盖计算机学科 | 往届均完成见刊、稳定检索 | 论文录用速度快 | 有ISBN号! *关于IEEE出版社 电气电子工…

Ubuntu23.10 安装kvm并使用nmtui创建桥接网络

1.实验准备 (1)使用Vmware安装Ubuntu23.10 2.实验步骤 (1)配置ssh (2)安装qemu (3)安装libvirt服务 (4)安装virtinst (5)启动libvir…

Android14音频进阶调试之命令播放mp3/aac非裸流音频(八十)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【原创干货持续更…

糟糕界面集锦-控件篇03

非常感激 Gordon Allison 提供这个样本。 很高兴通知你们各位,微软的界面设计原来是由艺术家而不是界面设计师来完成的。 在 Word 97 的字体对话框中用户可以用一堆复选框来选择字体属性。这没什么问题。但是!其中有4 对选项是互斥的:删除线…

web通用漏洞

web通用漏洞 文章目录 web通用漏洞1. SSRF1. gopher伪协议2. 常见绕过1. ip地址绕过2. DNS重绑定攻击 3. mysql未授权4. tomcat漏洞5. redis未授权写webshell6. redis 未授权写入ssh公钥7. redis 未授权计划任务shell反弹 2. XXE测试 3. XSS4. CSRF关于vmware的网络参考 1. SSR…

AI面试:未来招聘的新常态?

一、引言:招聘变革的序章 在数字化浪潮的推动下,各行各业正经历着前所未有的变革,而人力资源管理作为企业发展的核心驱动力之一,也迎来了其转型升级的关键时刻。传统招聘流程中,简历筛选、初步面试、复试乃至终面&…

使用ubuntu串口数据收和发不一致问题

串口配置 使用virtual Serial Port Driver Pro模拟串口两个串口,com2和com3,使用默认配置;通过virtual box 串口映射功能,在Ubuntu里使用CuteCom打开com2接受和发送数据,在windows里使用com3发送和接收数据。 遇到问…

【简历】扬州某一本大学:前端秋招简历指导,面试通过率低

注:为保证用户信息安全,姓名和学校等信息已经进行同层次变更,内容部分细节也进行了部分隐藏 简历说明 这是25届一本前端同学的简历。这是一个老牌一本学校,老牌一本定位求职层次,可以从传统的中厂上升到大厂。学历可以…

使用WPF将window 添加到TabControl里面的方法

首先 1.window 不能添加到其他控件中,原因是他是最高级的。。 在window usercontrol,以及page,frame 基本都遵循这个道理,可以添加的则是 除window以外的其他窗体。 2.添加到TabControl 下面的TabItem 控件添加usercontrl我遇到的…

JAVA中的volatile和synchronized关键字详解

1.volatile 保证可见性:当一个变量被声明为volatile,编译器和运行时都会注意到这个变量是共享的,并且每次使用这个变量时都必须从主内存中读取,而不是从线程的本地缓存或者寄存器中读取。这确保了所有线程看到的变量值都是最新的…

家里浮毛多?宠物空气净化器真的有效果吗?

看到朋友养了几只猫狗,感觉很幸福。犹豫了许久之后,还是买了一只猫,也算不用老是去朋友家撸猫,自己在家就可以实现随时随地撸猫。养了猫之后,我的精神状态都变好了并不少,整个人都容光焕发了,朋…

如何快速从文本中找到需要的信息,字典和正则灵活运用

import re #打开文本文件 f open("stock_data.txt",encoding"utf-8") #单独读取第一行数据处理进行分割,末尾换行符去掉 headers f.readline().strip().split(,) print(headers) #定义一个字典,以股标代码做为KEY,每个行做为值 st…

2-2 伺服电机(舵机)(meArm机械臂)

2-2 伺服电机(舵机)(meArm机械臂) 2-2 伺服电机(舵机)介绍直流伺服电机工作原理(1)首先发出指令给伺服电机,让其旋转90度(2)伺服电机接收指令&…

未来已来:探索IT行业的革新与大模型技术的突破

摘要: 在数字时代的浪潮中,IT行业正以前所未有的速度迅速发展,带来一系列令人瞩目的革新和进步。 从数据仓库软件市场的显著增长到色觉障碍辅助模式的扩展,再到国产大飞机C919的成功运营,这些新动态不仅展示了技术的力量&#xff…

MySQL学习(20):InnoDB引擎逻辑架构、物理架构

1.InnoDB逻辑结构 (1)表空间(在磁盘中是后缀为ibd的文件):一个mysql实例可以对应多个表空间,用于存储记录、索引等数据。 (2)段:分为数据段、索引段、回滚段。数据段就是B树的叶子节点&#xf…

C语言典型例题31

《C程序设计教程(第四版)——谭浩强》 习题2.8 请编写程序将China译为密码,密码的规律是:用原来字母后面的第4个字母代替原来的字母。 例如:C后面的4个字母是G,h后面第4个字母为l 代码: //《C程序设计教程…

初学者入门的可视化超级色彩公式

色彩不仅是视觉元素,也是数据表达的重要工具。在临床数据的可视化过程中,合理的色彩搭配能帮助观众迅速理解数据背后的意义。例如,高危状态的患者可能用红色表示,而健康状态用绿色表示。不同色彩之间的对比度和相对位置将决定数据…