解析从小程序开发者工具源码看原理实现

如何查看小程序开发者工具源码

下面我们通过微信小程序开发者工具的源码来说说小程序的底层实现原理。以开发者工具版本号State v1.02.1904090的源码来窥探小程序的实现思路。如何查看微信源码,对于mac用户而言,查看微信小程序开发者工具的包内容,然后进入Contents/Resources/app.nw/js/core/index.js,注释掉如下代码就可以查看开发者工具渲染后的代码。

// 打开 inspect 窗口
if (nw.App.argv.indexOf('inspect') !== -1) {
    tools.openInspectWin()
}

然后重启小程序开发者工具,就出现如下左侧页面,点击其中一个页面就能看到view层的dom结构,如下图右侧。

小程序架构设计

1、小程序渲染是在同一个线程吗?双线程机制

开发过小程序的都知道,小程序是双线程设计,即视图渲染与业务逻辑分别在运行在不同的线程中。这个设计主要是解决web技术中的一个痛点:

web页面开发渲染线程和脚本线程是互斥的,长时间的脚本运行可能会导致页面失去响应或者白屏,体验糟糕。

小程序为了更好体验,将页面的渲染线程和脚本线程分开设计在不同线程中执行,具体实现:

  • 视图view层在webview中渲染,一个页面对应一个webview
  • 业务逻辑Appservice层运行在同一个JSCore线程中,具体ios是JavaScriptCore,android是X5 JSCore,开发者工具是webview中;

这样解决了长时间的脚本阻塞页面渲染的情况,但是也带来一些新的问题:

  • 天生的延迟,线程间要通信
  • 业务逻辑层因为运行在JSCore中无法访问DOM和BOM的api;

开发者工具使用webview加载业务逻辑层的代码,虽然依赖的环境有DOM和BOM api,为了保持一致;小程序对所有的模块进行了局部化处理使其不能访问这些api。这样双线程通过native,开发者工具通过后台websocket服务充当二者消息中转媒介,并且提供一些基础功能。具体可以参考官网图:

2、小程序是web渲染吗?界面渲染机制

页面渲染的方式主要有三种:

  • 纯web渲染
  • 纯native原生渲染
  • Hybrid渲染,即web和native渲染结合

因为小程序的宿主环境是微信,不太可能使用纯native渲染,否则所有小程序需要跟微信一起编码发版。采用纯web渲染貌似是可行的,支持快速在线更新,通过加装最新资源到本地即可渲染;但是纯web渲染在一些有复杂交互的页面上可能会面临一些性能问题,这是因为在web技术中,UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行,这就容易导致一些逻辑任务抢占UI渲染的资源。所以小程序采用Hybrid方式渲染,用官网的描述如下:

界面主要由成熟的 Web 技术渲染,辅之以大量的接口提供丰富的客户端原生能力。

同时,每个小程序页面都是用不同的WebView去渲染,这样可以提供更好的交互体验,更贴近原生体验,也避免了单个WebView的任务过于繁重。

既然采用Hybrid方式渲染,那么页面的渲染可能会用到原生native来渲染,什么情况会用到原生渲染呢?

答案是使用到小程序提供的map、video、canvas、textarea等组件,页面中原生渲染的渲染原理可以参考官网原生组件。但是在小程序开发者工具中原生组件是使用html标签来模拟实现的。具体可以看下一节的map组件渲染结果。

3、小程序是用web的html标签渲染吗?Exparser组件框架

上面说到小程序主要由成熟的web技术渲染,能否直接使用html提供的标签如div、table等组织页面呢,答案不可以。主要考量:

  • 管控与安全:web技术可以通过脚本获取修改页面敏感内容或者随意跳转其它页面
  • 能力有限,会限制小程序的表现形式
  • 标签众多,增加理解成本

所以,小程序不能直接使用html标签渲染页面,其提供了10多个内置组件来收敛web标签,并且提供一个JavaScript沙箱环境来避免js访问任何浏览器api。

既然小程序不能直接使用html标签来渲染页面,那它提供的如view、cover-view等内置组件是否意味着最终都转换为html提供的内置标签来渲染呢?答案当不是。我们来看如下代码:

<view class="map-container">
  <map latitude='39.9088230000' style="height: 100%; width:100%;" longitude='116.3974700000' scale='16' id="id" bindregionchange="onRegionChange"></map>
  <view catchtap="onTap">test</view>
</view>

上面代码在开发者工具中最终渲染元素如下图:

可以看出,小程序提供的组件并没有最终转换为为html对应的标签来渲染,而是使用自定义的元素来渲染。这些内置组件都是由Exparser框架负责管理,它内置在小程序基础库中,为小程序的各种组件提供基础的支持。

Exparser框架基于Shadow DOM模型,模型上与WebComponents的ShadowDOM高度相似,具体可以参考官网组件系统。
内置组件的命名规范都是以wx-开头的,外部引用内置组件如view,最终会调用底层的wx-view组件;Exparser的view组件创建方式如下:

4、小程序可以操作dom吗?数据驱动

小程序为了管控与安全,提供一个JavaScript沙箱环境来运行JavaScript代码,js代码不能访问任何浏览器相关的接口,那就意味着js是不能操作dom和bom的,否则可能报错。小程序实现沙箱环境呢?即通过将业务逻辑封装到一个局部环境中,局部环境修改dom和bom的相关api指向。具体封装形式如下:

那么问题来了,小程序是怎么给业务代码加上以上封装的呢?其实很简单,在小程序开发者工具中有一个后台服务,访问小程序的每个模块的path时,后台服务会调用wrapSourceCodeInDefine方法将请求的JS文件的内容分别包裹在define域中,方法的代码如下图所示:

这里的define是小程序底层实现模块化的方法之一,还有一个是require方法;通过define来定义一个模块,require来引用一个define定义的模块。从上面小程序对业务模块代码的封装可以看出:

define定义的模块对传递了跟浏览器相关的接口同名的API,如window、document、localStroage等等
可能有人会说通过Function('return this')()来访问全局作用域window对象,但是小程序堵死了这条路,重写了Function,eval重置为undefined。例如下图:

require在引用模块时只传递require、module、exports三个参数,那么其他参数值就为undefined,不能在业务代码中访问这些接口

可以看看require定义的源码:

在实际的微信环境,业务逻辑层运行在JSCore中,其没有浏览器相关的信息,访问dom无从谈起;但是小程序开发者工具使用webview来运行业务逻辑代码,它有dom相关接口;所以通过上面沙箱环境来统一使js无法操作dom。

业务代码无法访问dom,怎么实现页面动态更新呢?

答案就是采用类vue这种MVVM框架的数据驱动思想,即让视图状态和视图绑定在一起,状态变更时,视图也能自动变更,这样就不用直接操作dom。

视图的动态更新具体是采用virtual dom技术实现,virtual DOM相信大家都已有了解,大概是这么个过程如下图:

实际处理可以简单描述如下:

用JS对象模拟DOM树 -> 比较两棵虚拟DOM树的差异 -> 把差异应用到真正的DOM树上。

其中,virtual dom是通过内置的wcc可以将wxml转换为js对象形式,以此来表示DOM树结构。

下面以官网的一幅图来说视图动态更新的过程:

// wxml
 <view>{{msg}}</view>

// js
data: {
   msg: 'Hello World'
}

上面说明了视图如何更新的,其实在数据响应的过程中,还有最重要的一环,即业务逻辑层的如何将变化的数据同步到视图层呢,这就涉及到双线程的通信了

5、小程序基础库作用到底是什么?

我们在开发者工具开发小程序时,一般都会选择一个基础库,如小程序开发者工具选择界面:

小程序基础库是用JavaScript写的,但是我们并没有在我们的小程序中直接引用,那么我们是怎么使用基础库提供功能的呢?答案是:

微信宿主环境会提前内置基础库,打开小程序时会自动将基础库注入到小程序的视图层和业务逻辑层中,小程序开发者工具则是由底层HTTP服务负责注入。

下图是小程序底层HTTP服务通过script脚本注入的相关代码:

小程序基础库功能包括两个部分视图层的WAWebview.js和业务逻辑层的WAService.js。下面就简单说下对应功能:

WAService为业务逻辑层提供基础功能

下看看一下WAService.js源码内容缩略图:

从源码可以看出基础库提供的WAService.js有很多功能,主要包括以下几部分

  • WeixinJSBridge:消息通信的统一封装易于调用,主要微信环境与native,开发环境与开发者工具后台服务的通信。
  • wx: wx对象下面的api方法封装
  • appServiceEngine:定义了全局的方法如define,require, App,Page,Component,getApp,getCurrentPages等
  • virtualDOM: VirtualDOM,Diff和Render UI实现
  • expraser: expraser框架组件的方法定义,这意味着逻辑层也具有一定的组件树组织能力。
  • Reporter: 小程序日志组件

WAWebview为视图层提供基础功能

小程序基础库为视图层提供的基础功能有些与WAService相同,主要功能如下:

  • 消息通信封装为WeixinJSBridge
  • 日志组件Reporter封装
  • wx对象下的api,跟WAService里的不同的是其大部分都是处理UI显示相关的方法
  • 小程序Expraser组件框架的实现和内置组件的注册
  • VirtualDOM,Diff和Render UI实现
  • 定义页面相关事件触发

以上就是解析从小程序开发者工具源码看原理实现的详细内容,更多关于从小程序开发者工具源码看原理实现的资料请关注我们其它相关文章!

时间: 2021-06-08

JS实现监控微信小程序的原理

原理 之前也做过浏览器web端的SDK数据埋点上报,其实原理大同小异:通过劫持原始方法,获取需要上报的数据,最后再执行原始方法,这样就能实现无痕埋点. 举个例子:我希望监控所有web页面的ajax请求,每次发送ajax,都需要在控制台打印出发送的url 平时我们开发,发送ajax一般用的都是封装好的库,例如jQuery,Axios等,然而这些库,底层仍然用的是浏览器原生的XMLHttpRequest对象,因此,我们只需要修改XMLHttpRequest对象即可 注意:由于JS的灵活性,修改原生方

微信小程序 冒泡事件原理解析

在微信小程序的事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列表: 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove 手指触摸后移动   touchcancel 手指触摸动作被打断,如来电提醒,弹窗   touchend 手指触摸动作结束   tap 手指触摸后马上离开   longpress 手指触摸后,超过350ms再离开

微信小程序button标签open-type属性原理解析

这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信开放能力):合法值中的其中之一: getUserInfo说明:引导用户授权 而获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 而按钮的bindgetuserinfo属性 说明:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的

微信小程序wxml列表渲染原理解析

这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}}" wx:for-item="item" wx:key="index"> <view>{{

微信小程序 下拉刷新及上拉加载原理解析

这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小

微信小程序 轮播图实现原理及优化详解

轮播图的创建 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加wx:for-item="it"来改变默认的item名 优化 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

微信小程序事件流原理解析

这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是事件? 事件是视图层到逻辑层的通讯方式: 事件可以将用户的行为,反馈到逻辑层进行处理: 事件可以绑定在组件上,触发事件后,就会执行逻辑层中对应的事件处理函数: 事件对象可以携带额外信息. 二.事件模型 事件分为事件捕获阶段.事件冒泡阶段.事件处理阶段 事件对象的属性: type:触发事件的类型 timestamp:触发事件当时的时间戳 targe

微信小程序之数据绑定原理解析

最近在帮朋友写个小程序,本人小白一枚,但是好在计算机科班出身,有些概念一看还是明白的,只是之前没实际写过程序.于是最近看了好多资料和视频,不得不说,对于小白来讲,还是有点难度,但是不大. 通过最近看资料和别人的视频,总结一下: 1.页面布局,先画好.都是盒子,需要几个盒子,你就先画几个盒子.比如下面这个页面: 红色盒子 浅蓝盒子 绿色盒子(这个绿色盒子里又可以切分成两个盒子:白色字体较大一个盒子,白色字体较小一个盒子) 蓝色盒子 2.数据先静态,后动态 简单的说就是刚开始,你可以直接先往页面里塞

微信小程序 checkbox使用实例解析

这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图如下: 实例代码如下: type_add.js // pages/detail_add/detail_add.js Page({ /** * 页面的初始数据 */ data: { selectData: "", //下拉列表的数据 height: 20, focus: false }, checkboxChange: fun

微信小程序tabBar设置实例解析

这篇文章主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结 注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的 这个tabBar属于全局属性,因此就在全局配置文件app.json中配置 1.tabBar的配置 "color": "#8a8a8a", "selectedColo

微信小程序转发事件实现解析

这篇文章主要介绍了微信小程序转发事件实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 和生命周期是同级,在.js文件里面设置 // 分享按钮 onShareAppMessage: function () { return { title: '前端伪大叔', path: "/pages/list/list", imageUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK

微信小程序图片自适应实现解析

这篇文章主要介绍了微信小程序图片自适应实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 关于微信小程序图片自适应的做法 在日常业务场景中,很多地方都需要图片进行列表的显示,但是这样就存在一个问题,由于每张上传的图片规格并不是一样的,就会发生图片要么过大,要么过小,或者被拉伸的情况,如下图 对于这个情况,我的思路是可以使用image标签内的bindload属性进行计算,bindload属性的介绍如下 下面就是具体的方法流程 1.首先我们在页

使用Vue.js开发微信小程序开源框架mpvue解析

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

开源一个微信小程序仪表盘组件过程解析

前言 最近开发了一个小程序动态仪表盘组件,并以第三方小程序组件的形式发布到npm,任意小程序项目都可以安装这个模块,从而获得仪表盘功能. 组件功能目前还非常简单,先来预览一下效果: 感兴趣的直接看源码: https://github.com/tower1229/weapp-plugin-dashboard 下面是踩坑过程. 如何开发微信小程序自定义组件 官方提供了一个CLI工具专门用于开发小程序自定义组件,首先全局安装这个工具: npm install -g @wechat-miniprogra

微信小程序中weui用法解析

前言 在做微信小程序的时候就想着找一个UI库,方便我们前端开发,然后查找资料,发现了这个WeUI特别适合放在微信小程序里.下面就简单的了解一下. WeUI是一套跟微信原生的视觉体验类似的一套样式库,由微信官方设计团队为微信内网页和小程序设计的,让用户视觉更加统一.包含了外卖常用标签的各种元素. 1.git下载,找到dist文件: https://github.com/wechat-miniprogram/weui-miniprogram 2.把dist文件中的style复制到根目录 app.wx