微信小程序底层实现原理

一、 wa的运行环境

根据微信官方的说明,wa的运行环境有3个平台,IOS的webkit(苹果开源的浏览器内核),Android的X5(QQ浏览器内核),开发时用的nw.js(C++实现的web转桌面应用);

二、为什么wa不直接运行在浏览器(webview)中,而要绕过浏览器直接调用内核呢?

因为运行在浏览器中的webapp是做不了监控的,而wa的表现是半native app,半web app,而native app与web app和一个很重要的区别就是native app有自己的生命周期,在这之中,我们可以根据生命周期的不同时间段做出不同的调整,比如常驻内存,防止被系统杀掉,系统后台保存活度等等,而web app就没有这回事了,仅仅能够根据事件做出不同的调整,跟原生app比起来,体验就差了一些。基于此,wa当然不会像web app一样了,他需要有自己的生命周期。

  本质上来说,wa还是运行在浏览器模式中,而承载wa的系统就是微信,用微信来管理wa的生命周期。而微信,现在本身就是一个系统。

  微信官方贴出来的生命周期函数主要有以下3个:onLaunch(初始化完成),onShow(启动时,后由后台进入前台),onHide(由前台进入后台)

三、wa与h5的区别

从技术的发展角度来看,微信小程序是从微信中的 webViewJS-SDK 进化到了今天的形态。那么,小程序和普通的h5页面到底有什么区别呢?

  • 运行环境:小程序基于浏览器内核重构的内置解析器,而 h5 的宿主环境是浏览器。所以小程序中没有 DOMBOM 的相关 APIjQuery和一些 NPM 包都不能在小程序中使用;
  • 系统权限:小程序能获得更多的系统权限,如网络通信状态、数据缓存能力等;
  • 渲染机制:小程序的逻辑层和渲染层是分开的,而 h5 页面 UI 渲染跟 JavaScript 的脚本执行都在一个单线程中,互斥。所以 h5 页面中长时间的脚本运行可能会导致页面失去响应。

其实,小程序开发过程中我们面对的是 iOSAndroid 微信客户端和辅助开发的小程序开发者工具。根据官方文档,这三大运行环境也是有所区别的:

所以微信小程序介于 web 端和原生 App 之间,能够丰富调用功能接口,同时又跨平台。

四、wa的生命周期

五、wa的渲染模式

小程序的渲染层和逻辑层分别由2个线程管理:

  • 渲染层:界面渲染相关的任务全都在 WebView 线程里执行。一个小程序存在多个界面,所以渲染层存在多个 WebView线程。
  • 逻辑层:采用 JsCore 线程运行JS脚本。

视图层和逻辑层通过系统层的 WeixinJsBridage 进行通信:逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。

(页面渲染的具体流程是:在渲染层,宿主环境会把 WXML 转化成对应的 JS 对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的 setData 方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面)

为什么要这么设计呢?主要还是处于管控和安全上的考虑。我们需要阻止开发者使用一些浏览器提供的,诸如跳转页面、操作 DOM、动态执行脚本的开放性接口。

双线程模型是小程序框架与业界大多数前端 Web 框架不同之处。基于这个模型,可以更好地管控以及提供更安全的环境。缺点是带来了无处不在的异步问题(任何数据传递都是线程间的通信,也就是都会有一定的延时),不过小程序在框架层面已经封装好了异步带来的时序问题。

六、组件系统

我们知道小程序是有自己的组件的,这些基本组件就是基于 Exparser 框架。 Exparser 基于 WebComponentsShadowDOM 模型,但是不依赖浏览器的原生支持,而且可在 纯 JS 环境中运行。

小程序中,所有节点树相关的操作都依赖于 Exparser,包括 WXML 到页面最终节点树的构建、CreateSelectorQuery 调用和自定义组件特性等。

现在微信小程序也支持自定义组件了,用法和组件间通信类似于 Vue

在内置组件中,有一些组件并不完全在 Exparser 的渲染体系下,而是由客户端原生参与组件的渲染。比如说 Map 组件。它渲染的层级比在 WebView 层渲染的普通组件要高。

引入原生组件的优点是:

  • 扩展 Web 的能力
  • 体验更好,减轻 WebView 的渲染工作
  • 绕过 setData、数据通信和重渲染流程,性能更好

本文部分参考:

https://www.jianshu.com/p/ca720137818f

https://www.jianshu.com/p/548d095516a8

原文地址:https://www.cnblogs.com/fmyao/p/12537246.html

时间: 2024-10-11 21:14:50

微信小程序底层实现原理的相关文章

移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉得是网页版应用. 有的人很鸡冻,但是--最后文章会提及具体的权限开放问题,所以,还是保持一颗冷静的?比较好. 那我们先来看看组件和API开放了哪些服务: 视图容器:视图(View).滚动视图.Swiper 基础内容:图标.文本.进度条 表单组件:按钮.表单等等 操作反馈 导航 媒体组建:音频.图片.

学习微信小程序之css17clearfix原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clearfix原理</title> <style> *{ padding:0; margin: 0; } .header,.aside,.main,.footer{ border: 1px solid yellow; background-co

CSDN博文精选 微信小程序全方位解析

责编:陈秋歌,关注微信开发等领域,寻求报道或者投稿请发邮件chenqg#csdn.net.研发心得.项目实战.前沿技术.外文翻译--,只要是技术干货,十分欢迎投稿至chenqg#csdn.net.人人都是主编,这里就是你的舞台. 欢迎加入"微信开发技术"群,参与热点.难点技术交流.请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」. 九个月之前,应用号首次被提出.近日,应用号以"小程序"的名称,正式向200人发出公测邀请."无需下载,用完

微信小程序通过api接口将json数据展现到小程序示例

实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',

微信小程序weapp的底层实现原理

首先声明: 以下所有内容仅是对微信小程序weapp的个人研究,仅有参考价值,不确保正确: 以下所有内容仅用于交流学习,不能做其他用途,欢迎大咖指点 其他 以下简称wa(weapp, 微信小程序) 一. wa的运行环境 根据微信官方的说明,wa的运行环境有3个平台,IOS的webkit(苹果开源的浏览器内核),Android的X5(QQ浏览器内核),开发时用的nw.js(C++实现的web转桌面应用): 二. 为什么wa不直接运行在浏览器(webview)中,而要绕过浏览器直接调用内核呢? 因为运

从session原理出发解决微信小程序的登陆问题

原理知识准备  对于已经熟悉了session原理的同学来说,我们都清楚:在浏览器端我们会存储一个sessionId,用它来作为凭证,在服务器端得到有关本次浏览器与服务器会话的所有信息,这些信息是储存在服务器端的存储空间中的,它完全可以用来判断一个浏览器端的登录状态,因为它是由服务器端来掌控的,是安全的. 那么浏览器端是用什么来存储这个sessionId? 并且浏览器又是如何将sessionId传回给服务器的呢? 大体上是有两种方法的: 1.使用浏览器端实现的cookie功能,每次浏览器都会将服务

【转】微信小程序原理

微信小程序原理 kamidox 关注 2016.11.05 09:42* 字数 2356 阅读 14621评论 5喜欢 75赞赏 1 微信小程序使用了前端技术栈 JavaScript/WXML/WXSS.它背后的原理是怎么样的呢? 写在前面 微信小程序使用了前端技术栈 JavaScript/WXML/WXSS.但和常规的前端开发又有一些区别: JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js.它运行在微信 App 的上下文中,不能

微信小程序免费制作一键生成平台是什么原理?速成应用代理需要多少钱

微信10亿活跃用户,10亿的流量等待瓜分.想想现在人们用哪个应用最多?当然是微信,而微信小程序就是依托微信而存在的,先天优势就在那里,怎么可能不火?作为想要创业以及苦于一直没有机会发现好商机的你,为什么要错过速成应用微信小程序加盟代理这个项目? 小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载.全面开放

微信‘小程序’: web前端的春天 or 噩梦?

最近大家看到这张图是不是都快吐了?这两天一睁眼就被这张图刷屏了 喵了咪的,点到哪里都是这个报道和新闻 最近因为工作 和生活略忙,爱吹文章的我,更新频率也低了,在这里抱个歉,希望大家理解和包容,希望"粉丝们"(装逼完成.跑-.),不要离开我这么帅的人! 此文观点声明先: 只通过技术角度分析讨论 [小程序]对程序员.web前端.后端人员技术路线的影响 不从产品角度 展望[小程序]以后的发展和方向– 这个都被媒体或专业市场分析人员分析烂了 「 微信应用号是什么?」 张小龙曾表示,用户关注一个