小程序的运行环境及原理

NewBoy
276 阅读4分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

宿主环境

程序运行所必须依赖环境称为宿主环境。例如：iOS和Android就是俩个不同的宿主环境，iOS的APP不能在Android环境下运行，Android 的APP也不能在iOS的环境下运行，脱离了宿主环境的软件是无法运行的

微信作为小程序的宿主环境，为小程序提供了哪些支持

  • 通信模型
  • 运行机制
  • 组件
  • API

通信模型

  • 通信主体

    小程序中通信的主体是 渲染层 和 逻辑层

    • WXML模板和 WXSS 样式工作在渲染层
    • js脚本工作在逻辑层 Snip20220119_20.png

  • 通信模型

    小程序中的通信模块分为两部分：

    • 渲染层 和 逻辑层 之间的通信由微信客户端进行转发
    • 逻辑层 和 第三方服务器 之间的通信由微信客户端进行转发

    Snip20220119_22.png

  • 小程序底层原理（面试必问）

    所有的应用，页面渲染的方式主要有三种：

    • 使用网页来渲染，也可以说是 webview 渲染，就是浏览器(H5)
    • native 原生渲染
    • Hybrid 渲染，也叫混合渲染（在同一个页面下，既有 webview 渲染又有 native 渲染)

    小程序属于混合渲染。

    小程序的开发软件就是网页做的（H5+CSS）

    Snip20220107_7.png

    运行环境逻辑层渲染层
    iOSJavaScriptCoreWKWebView
    AndroidX5 JSCoreX5浏览器
    小程序开发工具NWJS（NodeWebkitJS）Chrome WKWebView

    JavaScript 是单线程的，在微信小程序中被分为俩个线程，为什么这么设计呢？因为所有的小程序生态都是建立在微信APP之上的，如果小程序是单线程设计（比如网页中，JavaScript报错了，整个页面的逻辑都无法生效，界面会卡在那里），一旦小程序出现问题，用户将无法返回到微信的原生界面去，因此，小程序采用了俩个线程，分别是渲染层和逻辑层。渲染层负责所有的UI渲染，逻辑层负责管理所有JavaScript代码。

运行机制

  • 小程序启动过程：

    1. 把小程序的代码包下载到本地
    2. 解析 app.json 全局配置文件
    3. 执行 app.js 小程序入口文件，调用 App() 创建小程序例
    4. 渲染小程序首页
    5. 小程序启动完成

  • 页面渲染的过程：

    1. 加载解析页面的 .json 配置文件
    2. 加载页面的 .wxml 模板和 .wwss 样式
    3. 执行页面的 .js 文件，调用 Page（） 创建页面实例
    4. 页面渲染完成

组件

  • 小程序中组件的分类

    小程序的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出页面结构，官方把组件分为9大类

    1. 视图容器（常用）

      • view

        普通视图区域，是一个块级元素，类似 HTML 中的 div。常用来实现页面布局效果

      • scroll-view

        可以滚动的视图区域，常用来实现滚动列表效果

      • swiper 和 swiper-item

        轮播图容器组件和 轮播图 item 组件

    2. 基础内容（常用）

      • text

        文本组件，类似 HTML 中的 span标签，是个行内元素

      • rich-text

        富文本组件，支持把 HTML 字符串渲染为 WXML 结构

    3. 表单组件（常用）
    4. 导航组件（常用）
    5. 媒体组件
    6. map 地图组件
    7. canvas 画布组件
    8. 开放能力
    9. 无障碍访问

API

  • 小程序 API 概述

    小程序的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力。例如：获取用户信息，本地存储，支付功能等等

  • 小程序 API 的分类

    • 事件监听API
      • 特点：以 on 开头，用来监听某些事件的触发
      • 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
    • 同步API
      • 特点
        • 以 sync 结尾的API都是同步API
        • 同步API的执行结果，可以通过函数返回值直接获取，如果执行出错抛出异常
      • 举例：wx.setStorageSync('key','value')向本地存储中写
    • 异步API

      • 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果

      • 举例：wx.request()发起网络数据请求，通过 success 回调函数接收数据

avatar
文章
阅读
粉丝