小程序技术原理分析

2023-11-17

背景

随着移动互联网的沉淀,超级APP成为新的底层平台,于是开始探索在体内构建轻应用的可能,开发新的流量入口、建立全面的用户关系。
在这里插入图片描述

轻型应用帮助平台拓宽了横线竞争的战场,由软到硬,由应用到系统,各领域的头部企业纷纷潜入轻应用底层。在自己的生态上发展轻型应用。

从2017年1月小程序正式发布以来,日活用户超4亿,全面进入了生活服务、政务、交易、内容、电商、教育等日常生活中各个领域。

我们今天就一起来了解一下微信小程序这个背靠“微信”这座巨无霸大山的小应用背后的技术。
我们会从以下几个角度去分析小程序的运行机制和它的整体技术架构。

小程序诞生的技术背景

最初在小程序没有出来之前,微信WebView逐渐成为移动Web重要入口。微信发布了一整套网页开发工具包,称之为 JS-SDK,让所有Web
开发者都可以使用到微信的原生能力。

但JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题,比如受限于设备性能和网络速度,会出现白屏的可能。因此又设计了一个增强版JS-SDK,也就是“微信 Web 资源离线存储”,但在复杂的页面上依然会出现白屏的问题,在页面切换会有生硬和点击的迟滞感。
这个时候需要一个可以让用户体验更好的一个系统,小程序应运而生。

相比于原来的WebView,小程序的优点有:

  • 快速的加载(静态资源存放在本地)
  • 更强大的能力(依托于宿主环境提供的能力)
  • 原生的体验
  • 易用且安全的微信数据开放(调用微信获取用户信息)
  • 高效和简单的开发(开发语言都是js,html和css也基本一致)

WebView 是移动端(手机、IPad)提供的运行 JavaScript 的环境,是系统渲染 Web 网页的一个控件,可与页面 JavaScript 交互,实现 APP 与 Web 的混合开发,WebView 渲染 Web 页面需要强大的渲染内核支持,这其中 Android 与 IOS 系统的内核又有所不一样。

小程序与普通网页开发的区别

宿主环境

微信小程序宿主环境微信客户端,它是依赖于微信客户端上运行的,并且跟小程序 基础库 版本有重大关联关系。
我们可以把微信客户端 以及 小程序基础库 简称为微信小程序的宿主环境

微信小程序可以调用宿主环境提供的微信客户端的能力,完成许多普通网页无法完成的功能。这就使得小程序比普通网页拥有更多的能力。小程序会运行在不同版本(不同的微信客户端+不同基础库)的宿主环境下,因此不可以避免地有时候需要为不同版本的宿主环境做程序上的兼容。

执行环境

小程序的开发和普通的网页开发相比有很大的相似性,主要开发语言都是 JavaScript,但是二者还是有些差别的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

小程序技术原理分析 的相关文章

  • 从多层嵌套数组 JavaScript 中获取所有键值

    我有一个这样的对象 var data id 36e1e015d703120058c92cf65e6103eb title Alex McGibbon id 60beb5e7d7600200e5982cf65e6103ad title Ale
  • 为什么 lodash 将我的数组转换为对象?

    我是 lodash 的新手 创建了一个函数 该函数从值为 null 或空白的对象中删除键 但是当我传递包含某些部分作为数组的对象时 它会删除数组并将其转换为对象 下面是我尝试过的代码 mixin removeFalsies this rem
  • RxJS - 我需要取消订阅吗

    如果我有这样的事情 class MyComponent constructor this interval Observbale interval 1000 const c new MyComponent const subscriptio
  • 如何限制 Chrome 中的最大文本区域宽度和高度或如何禁用文本区域调整大小

    Chrome 允许通过在右下角添加文本区域来调整文本区域的大小 但有时这种移动可能会破坏页面的设计 所以我想知道如何限制该操作的最大和最小宽度 即如何完全禁用该功能和thml javascript css在页面上 您可以使用 resize
  • 元素存在之前的html5音频绑定时间更新

    我试图从音频标签绑定 timeupdate 事件 该标签尚不存在 我习惯这样做 body on click selector function e 我用音频标签尝试了这个 body on timeupdate audioPlayerJS a
  • 在设置后用 Javascript 替换 'var' css 属性

    我有一个元素 其上设置了 var 属性 如下所示 div class divwithbackground div CSS divwithbackground after background image var page header se
  • Sequelize 关联 - 请改用 Promise 风格

    我正在尝试将 3 张桌子连接在一起Products Suppliers and Categories然后排SupplierID 13 我读过了如何在sequelize中实现多对多关联 https stackoverflow com a 25
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 为什么人们将自己的自定义/用户函数添加到 jQuery 对象中? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我见过人们将自己的自定义 用户功能添加到jQuery目的 例如 myUserFunc function regular JS code 你为什么
  • AngularJS 服务并承诺最佳实践

    我有一个 AngularJS 应用程序services 调用 http资源并返回promise我在控制器中解决了这个问题 这是我正在做的事情的示例 app service Blog function http q var deferred
  • Nodejs 异步 Promise 队列

    我需要使用速率受限的 API 例如 我一秒钟只能进行 10 个 API 调用 因此我需要等待当前秒结束才能进行另一个 API 调用 为了实现这一目标 我想创建一个可以自行管理的异步队列 它的主要功能是让我向队列添加一个新的 Promise
  • 如何创建显示/隐藏 Docusaurus 项目中所有详细标签状态的按钮?

    根据讨论here https stackoverflow com questions 58579048 how to add or remove the open attribute from all details tags in a r
  • Lodash _.hasIntersection?

    我想知道两个或多个数组是否有共同的项目 但我不在乎这些项目是什么 我知道 lodash 有一个 intersection方法 但我不需要它来遍历每个数组的每个项目 相反 我需要类似的东西 hasIntersection一旦找到第一个常见的出
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • 数据表 - 从 AJAX 源过滤数据

    我有一个数据表 正在从 api 获取数据 现在我的状态是活动的 非活动的 如果标志是活动的 那么我需要在数据表中显示 否则我不应该显示过期的 这是我的fiddle https jsfiddle net lakshmipriya001 qLp
  • 跟踪预防阻止了对 https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js 存储的访问

    大约一年半前 我使用 OfficeJS API 编写了一个 Excel 加载项 它一直工作到大约两周前 Excel 似乎已经进行了更新 现在我可以右键单击任务窗格并查看开发工具 而以前我无法做到这一点 并且必须运行外部 MS Edge 开发
  • 反转比例函数

    这对我来说很有趣 看下面的D3代码 var scale d3 scale linear domain 100 500 range 10 350 scale 100 Returns 10 scale 300 Returns 180 scale
  • 单击 html 中的按钮后如何从 javascript 函数写入文件

    我正在尝试编写真正基本的代码 在 html 文件上按下按钮后 通过 JavaScript 函数在本地写入 txt 文件 这不可能吗 我可以仅使用 javascript 文件写入文件 但在尝试同时使用两者时则不能
  • 阻止 PM2 上不同时运行的请求

    在我的 Express 应用程序中 我在应用程序中定义了 2 个端点 一种用于 is sever up 检查 另一种用于模拟阻塞操作 app use status req res gt res sendStatus 200 app use
  • 使用 jQuery 的 ajax 方法以 blob 形式检索图像

    我最近问了另一个 相关 问题 这导致了这个后续问题 提交数据而不是输入表单的文件 https stackoverflow com questions 17643142 submitting data instead of a file fo

随机推荐

  • SAR: 1 4 https://www.vulnhub.com/entry/sar-1%2C425/

    SAR 1 About Release Back to the Top Name Sar 1 Date release 15 Feb 2020 Author Love Series Sar Download Back to the Top
  • 一种基于卷积神经网络的图像去雾研究-含matlab代码

    目录 一 绪论 二 去雾卷积网络 2 1 特征提取 2 2 多尺度映射 2 3 局部均值 2 4 非线性回归 三 实验与分析 四 Matlab代码获取 一 绪论 雾是一种常见的大气现象 空气中悬浮的水滴 灰尘 细沙或其他颗粒等都会引起成像清
  • SpringBoot 配置全局异常处理

    SpringBoot 项目pom xml 依赖配置文件
  • 数字化时代新经营模式千载难逢的翻身机会

    随着互联网的兴起 它对于线下实体商户的冲击早已不是一天两天了 网上店铺的崛起 吸引走了大部分流量 这对于靠流量吃饭的线下商户来说 是致命的打击 相关数据统计 这几年 随着网络购物越来越火热 越来越成为一种消费主流 线下实体商户的闭店率出现了
  • 迪文串口屏TTL与主控板RS232电平信号转换方案

    一 TTL和RS232简述 串口 COM口是指的物理接口形式 硬件 按位 bit 发送和接收字节 而TTL RS 232是指的电平标准 电信号 TTL和RS232不同在于 电平表示的逻辑含义不同 1 TTL 逻辑高电平 1 3 3V或5V
  • (转)工业机器人用什么语言编程的?

    机器人的开发语言一般为C C C Builder VB VC等语言 主要取决于执行机构 伺服系统 的开发语言 而机器人编程分为示教 动作级机器人编程语言 任务级编程语言三个级别 机器人编程语言分为专用操作语言 如VAL语言 AL语言 SLI
  • Dynamic Web project,Jsp可正常访问,servlet出现404,刷新出现Http500,解决方式

    新手建立首个Dynamic Web project Jsp可正常访问 servlet出现404 刷新出现Http500 解决方式如下 Tips 关于配置servlet到web xml Servlet class 为pakagename se
  • PyTorch 的 Autograd详解

    点击蓝字 关注视学算法 作者丨xiaopl 知乎 来源丨https zhuanlan zhihu com p 69294347 编辑丨极市平台 PyTorch 作为一个深度学习平台 在深度学习任务中比 NumPy 这个科学计算库强在哪里呢
  • Go语言学习9-结构体类型

    结构体类型 引言 1 结构体 1 1 类型表示法 1 2 值表示法 1 3 属性和基本操作 附录 引言 书接上篇 我们了解了Go语言的接口类型 现在介绍Go语言的结构体类型 主要如下 1 结构体 结构体类型既可以包含若干个命名元素 又称字段
  • React从入门到精通二

    React从入门到精通之购物车案例 1 购物车需求说明 使用到的data list 2 项目code 1 购物车需求说明 list data展示到列表中 每个item的通过 按钮来控制购买的数据量 删除按钮可以删除当前的item Total
  • Request+超详细代码+视图分析(获取值)

    Request 1 request对象和response对象的原理 1 request和response对象是由服务器创建的 我们来使用它们 2 request对象是来获取请求消息 response对象是来设置响应消息 2 request对
  • constrain用法_constrain是什么意思_constrain的用法

    constrain的音标 英 k n stre n 美 k n stre n constrain的用法 v 强迫 强制 迫使 限制 限定 约束 第三人称单数 constrains 现在分词 constraining 过去式 constrai
  • Numpy学习笔记

    基于Wes McKinney的Python for Data Analysis第四章NumPy Basics Arrays and Vectorized Computation整理代码得来 最近在自学Python 感觉还是要敲一下的 又懒得
  • ChatGPT的评估指标有哪些?微调与上下文学习是否存在相似性?

    NLP 分很多的任务 不同的任务有不同的指标来度量模型质量 比如AUC Precision Recall是分类模型的度量指标 ChatGPT可以看作一个生成式语言模型 简单说就是给它输入一段文字 它会输出另一段文字 当然输出和输入之间是有关
  • 关于ArithmeticException 异常捕获(double类型的数据除于0为什么是无穷大?)

    关于ArithmeticException 异常捕获 double类型的数据除于0为什么是无穷大 在做实验编写应用程序 从命令行中输入表示两个小数的参数的字符串 求它们的商 要求程序捕获NumberFormatException异常和Ari
  • 测试用例管理工具SynapseRT(jira插件)的具体使用(一)

    话说我们测试团队使用Zephyr进行测试用例管理一段时间后 得到大家的认可 反馈还不错 但我还是觉得它功能太单一 缺点较多 例如提供信息较少 无法记录和跟踪需求 管理人员无法直观了解测试进度等等 为了解决这些问题 我找到了SnapseRT插
  • 基于DVWA的文件上传漏洞测试

    目录 DVWA Low Medium DVWA Low DVWA Security的 low 级别可以直接上传 一句话 木马 1 1 编写测试木马 1 2 没有后缀过滤直接上传 1 3回显上传路径 直接访问即可 http localhost
  • 算法 - 快速排序(C#)

    csharp view plain copy print
  • 分治法 ( Divide And Conquer ) 详解

    文章目录 引言 分治法的范式 递归式 求解递归式的三种方法 代入法 递归树法 主方法 引言 在这篇 blog 中 我首先会介绍一下分治法的范式 接着给出它的递归式通式 最后我会介绍三种方法 代入法 递归树 和主方法 求解递归式 分治法的范式
  • 小程序技术原理分析

    小程序技术原理分析 背景 小程序诞生的技术背景 小程序与普通网页开发的区别 宿主环境 执行环境 小程序架构 一 技术选型 二 双线程模型 三 双线程通信 四 小程序的基础库 五 小程序运行时 运行机制 更新机制 六 性能优化 总结 背景 随