Micro letter applet underlying principles and operation mechanism of learning articles

Reference Documents

Applet underlying the principle and some thoughts

  • For security and control, dual-threaded execution
  • Web Worker executing user code; UI thread to perform most functions.
  • sample graph

Micro-channel architecture principles applet

  • Only by mvvm template syntax dynamically change the page, do not support the operation of BOM
  • Compilation process:
    • wcc compiled executable file generated .xml js script, the incoming js script right path, got a virtual dom tree.
  • WAWebview.js
    • wx is registered under api, eventually calling WeixinJSBrige method.
    • wxparser object dom to provide mapping between wx element, the element operation management, event management functions
    • Assembly portion implemented using native code, for example: wx-video, wx-canvas, wx-map, wx-textarea, etc.
    • native assembly suspended above webview, most of the components used to achieve the front end.
  • WeixinJSBridge
    • wx.request actual call WeixinJSBridge, call distinguish the browser environment.
  • WAService.js
    • wx API; APP (), Page (); page has the scope to provide a modular; data binding; event distribution; life cycle; routing;
  • Specific architecture composed of two webview: UI layer, Logic layer
    • UI layer runs in a first webview, perform the operation and interaction DOM event response, which is the content code and compiled WAWebview
    • Logic layer runs in a separate JS engine: ios: JavaScriptCore, android: x5, development tools:? Nwjs chrome kernel
    • Logical layer comprises a service code and WAService.js
    • By WeixinJSBridge, =>? Interaction between (native) between two layers
  • sample graph

Small micro-channel architecture program analysis (on)

  • A program has multiple view, which is more webview
  • A small program has only one service process, but also a webview, run the program life cycle inherent in the background
  • 两者都通过WeixinJSBridge和后台通信
  • view模块和service模块均使用postMessage进行通信
  • contentScript.js的代码提供了message消息到chrome.runtime通信接口的转换

浅谈小程序运行机制

  • 使用客户端提供的JavaScript引擎, 沙箱只是单纯的提供JavaScript解释环境, 没有浏览器任何接口
  • 小程序的基础库分别注入到视图层和逻辑层运行
    • 视图层: 提供各类组件来组建界面
    • 逻辑层: 提供各种API来处理逻辑
    • 处理数据绑定, 组件系统, 事件系统, 通信系统等一系列框架
    • 基础库不会打包到某个小程序代码, 会提前内置在微信客户端
  • 基于shadow dom模型
  • 启动机制
    • 热启动: 打开过小程序, 在一定时间内再次打开
    • 冷启动: 首次打开或者被微信销毁后打开
    • 没有重启概念
    • 进入后台后, 维持一段时间的运行后被销毁, 目前是五分钟.
    • 短时间(5s), 连续收到两次系统内存告警, 会进行小程序销毁.
  • 更新机制
    • 冷加载读取缓存/检查更新
    • 热加载直接后台切前台
    • 冷启动时发现有新版本, 会异步下载新版本的代码包, 并同时用客户端本地的包进行启动
    • 即新版小程序发布后, 需要经历两次冷启动, 才会应用
    • 如果需要新版本, 可以使用指定API进行更新
  • Start with the update mechanism
  • setData
    • webview和jsCore是单独模块
    • 两边都通过evaluateJavaScript实现, 即用户传输的数据.
    • 需要将其转换成一份JS脚本, 通过执行脚本进行执行

小程序更新机制

  • 未启动时更新
    • 微信客户端有若干个时机检查本地缓存的小程序有没有新版本, 有静默升级
    • 发布新版本后, 无法同步所有的用户, 24小时, 同步所有新版本信息到用户手机
    • 下次进行冷启动时, 先更新最新版本再打开.
  • 启动时更新
    • 每次冷启动都会检查更新, 异步下载最新的版本的代码包, 但会用本地的包进行启动
    • 新版本在下一次冷启动时, 应用.

疑问

  • Why small micro-channel two webview program, which has to logic thread is running in the webview, how there is no window object?
  • How to write the introduction JS explained it in an operating system environment?
  • What shadowdom that?

Guess you like

Origin www.cnblogs.com/zhangrunhao/p/12068683.html