北京华网天下

从微信JS-SDK认识JSBridge

2024-01-20

来源：网络整理

前言

前段时间，为了实现H5移动端拉取微信卡包并同步卡包数据的功能，项目中引入了**`微信JS-SDK()`**[1]相关包实现了该功能，但是也是由它实现的，这让我很好奇，所以我打算进一步了解一下相关内容，通过查阅相关资料发现这其实是一种实现方法。

所以，只要看懂了，你就能明白微信JS-SDK是怎么回事了。

.jpg 为什么需要它？

相信大多数人都有同样的经历。他们第一次了解到它是从微信JS-SDK（）中。当然，如果你是从事应用或者-开发的，我相信你自然（应该、会）会非常了解。

其实它已经出现并实际使用了很长时间，比如早期桌面应用的消息推送。在移动终端盛行的时代，越来越需要****，因为我们期望移动终端（应用程序或-）能够做更多的事情，包括利用客户端原生功能来提供更好的交互和服务。

但它无法直接调用不同语言（如Java、C/C++等）提供的功能特性，因此需要一个中间层来实现与其他语言的相互协作。这里以Node架构来进行说明。

节点架构

核心内容如下：

中间层节点

底层V8+

这里不难发现Node有一些类似的功能，所以它本身是一个非常简单的东西，更多的是一种形式和一种思想。

为什么叫它？

联合创始人Jeff在他2007年的博客《The of [2]》中认为“任何可以用编写的应用程序，比如网页、APP、小程序、后端等，以及各种相关生态正在变得越来越多”更加丰富。

作为Web技术的逻辑核心，它自然需要承担与其他技术“桥接”的责任，而任何移动操作系统都会包含一个运行的容器环境，比如等等，这意味着运行不需要同样的环境。与运行其他语言一样。另外添加相应的运行环境。

由于微信的出现，该应用程序在中国变得非常流行。当时微信的主要功能之一就是通过网页分享内容。

可以做什么？

举个最常见的前端和后端的例子。后端仅提供搜索接口，不提供更新接口。所以对于前端来说，是没有办法实现更新接口的！

同样，能做什么也取决于原生端提供的调用函数的接口。例如，通过微信JS-SDK，网页开发者可以通过微信使用拍照、选图、语音、位置等手机系统功能，也可以直接使用微信。微信的独特功能包括分享、扫码、优惠券和支付。

作为内外之间的桥梁，表面上允许调用功能，但其核心是建立内外消息的双向沟通通道。

双向通信通道：

发送消息至：

它是如何实现的？

的运行需要JS引擎的支持，包括V8、等，总之，运行环境与原生运行环境天然隔离。因此，在设计时，我们可以类比一下这个过程：

调用有两种实现方式，如下：

在开始分析具体内容之前，还是有必要先了解一下前提知识。

它是什么？

它是本机系统用来将移动应用程序嵌入到 Web 中的技术。它内置高性能内核浏览器，通常封装为SDK中的组件。

除了通用的View属性和设置外，还增强了URL请求、页面加载、渲染、页面交互等功能，提供更强大的功能。

优点是当页面布局需要更新或者业务逻辑发生变化时，可以更方便地提供APP更新：

在微信小程序中

小程序的主要开发语言是逻辑层和渲染层分离，分别运行在不同的线程中，渲染层运行在：

运行环境逻辑层渲染层

iOS系统

安卓

定制内核

小程序开发者工具

西北地区

.jpg

开发过程中遇到的坑之一是：

通话-实施方案一

通过调用，会分为：

【注射原料药】

核心原则：

这里我们不介绍iOS和注入方法。有兴趣的话可以自己查一下资料。我们直接通过**微信JS-SDK**来看一下[3]。

.gif

通过引入JS-SDK后，就可以在页面中使用微信相关的API了，例如：

// 微信授权
window.wx.config(wechatConfig)

// 授权回调
window.wx.ready(function () {...})

// 异常处理
window.wx.error(function (err) {...})

// 拉起微信卡包
window.wx.invoke('chooseInvoice', invokeConf, function (res) {...})
复制代码

如果看它内部编译打包的代码（简化版），其实不难发现：

!(function (e, n) {
  'function' == typeof define && (define.amd || define.cmd)
    ? define(function () {
        return n(e)
      })
    : n(e, !0)
})(this, function (e, n) {
   ...
   function i(n, i, t) {
    e.WeixinJSBridge
      ? WeixinJSBridge.invoke(n, o(i), function (e) {
          c(n, e, t)
        })
      : u(n, t)
   }

   if (!e.jWeixin) {

    var N = {
        config(){
          i(...)
        },
        ready(){},
        error(){},
        ...
    }

    return (
      S.addEventListener(
        'error',callback1,
        !0
      ),
      S.addEventListener(
        'load',callback2,
        !0
      ),
      n && (e.wx = e.jWeixin = N),
      N
    )
  }
})
复制代码