知乎客户端跨平台-Hybrid-调试实战

做这样的功能，需要维护一个 socket 服务，PC端需要和这个服务器通信，客户端也需要，开发起来依旧是比较麻烦。但也算较好的解决了 本地模拟 的一些问题。

在开发上述功能的过程中，发现了 flipper 这个工具

flipper 提供了一个桌面客户端，然后这个桌面客户端提供了一个和手机客户端通信的机制，免去了 socket 服务的开销，依靠这个通信机制，我们可以把上述的功能复制过来

基于这个通信机制把 api 名称和 api 参数传到手机客户端上，然后再在客户端里注入的 js 调用相应的 api，无需再维护 socket 服务

###使用 flipper

希望全面了解 flipper 的可以上 https://fbflipper.com/

具体文档查看：flipper 文档

工程中就基于 flipper 开发了一个 api 调试的功能，以及获取当前 Hybrid 页面的客户端数据，下面有一个简单的示例，简单介绍一下接入流程和开发一个插件

###桌面插件

需要有简单 React 组件开发经验，不会的话，照葫芦画瓢 10 分钟也能搞定。

桌面插件是一个 React 组件，用来描述界面，接受发送数据

#####0.前置条件

下载 Node，Yarn

Node.js
Yarn

#####1.创建工程

创建目录，执行 yarn init，目录下会出现一个文件 package.json 注意 name得以 flipper-plugin- 开头

{

“name”: “flipper-plugin-myplugin”,

“version”: “1.0.0”,
“main”: “index.js”,
“license”: “MIT”,
“dependencies”: {}
}

#####2.开始编程

创建 index.js，在 index.js 里面可以编写自己的插件，一个简单的组件可能是这样。

这个插件有三个要注意的点

id 为 “myplugin”，id 很重要，桌面插件和客户端插件 id 一样的话才能发生通信
订阅了客户端 “clientMessage” 的消息
给客户端发送了 “getData” 的消息（稍后会在客户端中接收这个消息）

import {FlipperPlugin, Button, FlexCenter} from ‘flipper’;

export default class extends FlipperPlugin {
static title = ‘My Plugin’;
static id = ‘myplugin’;
static icon = ‘internet’;

constructor(props) {
super(props);
this.init();
}

init(){
this.state