跳到主要内容

小程序

行业优势​

  • App 平台
    • 流量变现
    • 小程序生态
    • 类应用分发市场
  • 企业应用
    • 移动流量枯竭，新流量红利
    • 解决部分获客难问题，极地的拉新成本
    • 大幅降低开发成本
    • 业务上更多的试错机会

平台类产品，现有流量可以输出给商家端

多个现有 APP 要实现业务互通

建议使用小程序

技术优势​

  • H5 相比 APP 开发，开发门槛更低
  • 优于 H5，接近 Native 体验
  • 相机 位置 网络 存储等丰富的原生能力
  • 入口主要是顶部下拉，搜索，扫码，用完即走，简单方便
  • 不用像 App 那样下载，直接打开退出即可，支持热更新

原理​

使用小程序 DSL+JS 开发，通过中间层桥接后调用原生能力

使用 webview 来渲染界面

小程序的运行环境​

  • 视图层 逻辑层
  • Event Data 通信
  • JSBridge
  • Native

区别于传统 Web 的单线程模型，小程序中的渲染层和逻辑层分别由两个线程管理。渲染层-Webview，逻辑层-JSCore。所有的通信都要经过 Native，包括网络请求。

逻辑层和视图层通过 setData 和 Event 通信和 JSBridge 通信：

逻辑层数据变更 setData 驱动渲染层的视图更新，渲染层交互触发事件，触发逻辑层的事件响应函数。

小程序的运行环境分成 View 渲染层和 Service 逻辑层​

渲染层​

负责解析 .wxml 模板和.wxss 样式

负责运行 Webview 的 Dom 和原生控件

渲染层个数可以有多个同时运行，但是不超过 6 个

一个小程序存在多个界面、所以渲染层存在多个 WebView 线程​

这两个线程的通信会经由客户端(下文中也会采用 Native 来代指客户端)做中转，逻辑层发送网络请求也经由 Native 转发，小程序的通信模型

逻辑层​

负责解析 .config.json/.js/.json

负责运行 iOS 的 jsCore，Android 的 V8

个数只能有 1 个

即 js 脚本工作在逻辑层。

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

渲染层的界面使用了 WebView 进行渲染;逻辑层采用 JSC 线程运行 JS 脚本。

小程序中的 JSBridge 和普通的 JSBridge 有什么区别？​

小程序中的 JSBridge 没有完整的浏览器环境，依赖客户端提供的环境

JSBridge​

JSBridge 是一种连接 JavaScript 和原生应用之间的桥梁技术，它的主要作用是使 JavaScript 能够调用原生功能，包括访问设备地址位置、摄像头以及支付等，从而在混合开发中简化前端与原生应用之间的交互。

实现 Native 端和 Web 端双向通信的一种机制