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

在开发上述功能的过程中,发现了 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 = {
data: ‘null’,
message: ‘null’
};
//订阅客户端发送的数据
this.client.subscribe(‘clientMessage’, res => {
if(res){
this.setState({message:res.message});
}
});
}

sendData(){
//给客户端发消息
this.client.call(‘getData’, {request:“”}).then(res => {
this.setState({data:res.data});
});
}

render() {
const {data, message} = this.state;
return (

点我调用 getData

{'getData 的内容是:' + data}

{'clientMessage 的内容是:' + message}

) } }

const mainStyle = {
“margin-top”:60,
“flex-direction”:“column”
}
const commonStyle = {
margin: 20,
};

#####3.加载插件

我编写完桌面插件之后,按照 flipper 提示的方式进行配置,还是无法动态加载我写的插件,最后我是把 flipper 的源码拉下来,将插件工程放到了

flipper/src/plugins/ 文件夹下面,然后执行 yarn build --version --mac 在 dist 文件夹下直接打出包,再使用的。

我不确实这是我的问题还是 flipper 的问题。

这是成功加载起插件的图例,假如没有写对应手机客户端插件的话,是不会显示我们写好的 MyPlugin,所以接下来介绍怎么写一个对应的手机客户端插件

###客户端插件

#####0.依赖

当大家想接入一个 debug 相关的库的时候,可能会考虑说,不想把 debug 的功能带到线上去,有几种做法,大家自行选用

a.在代码中去判断一下,在恰当的时候,把 debug 相关的功能给关掉

好处是做起来很简单轻松
坏处是会在线上引入一个线上根本不需要的库,增大了包体积
b.在非线上的时候引入正式库,在线上包中引入 ‘no-op’ 库,‘no-op’ 库可以理解为正式库的一个空实现, 这里有一个讨论 关于 no-op 的讨论

好处是不会增大太多包体积,虽然还是要引入一个不必要的包
不好的地方可能就是如果官方没有实现 no-op 的库,就需要你自己写

例如:

debugImplementation ‘com.facebook.stetho:stetho-okhttp3:1.5.0’
releaseImplementation ‘com.zhihu.android.library:stetho-no-op:1.0.0’

这种方式似乎也是很多类似库通用的处理方式

c.第三种,新建一个文件夹,比如 flipper,在里面写相关初始化代码,通过某种方式执行这些代码,然后再在 sourceSets 加上 srcDirs 即可 下面的意思是在 mr 或者 debug 包中才加上 srcDirs

dependencies {

debugImplementation ‘com.facebook.flipper🐬0.11.1’
mrImplementation ‘com.facebook.flipper🐬0.11.1’
}
android {
sourceSets {

debug {
java.srcDirs += “src/flipper/java”;
}
mr {//
java.srcDirs += “src/flipper/java”;
}
}

####1.初始化

/** 官方示例 */
public class MyApplication extends Application {

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, false);
/** 这里是 flipper 官方的示例代码,实际上在我们的工程中不是这么做的,实际工程中使用了上面依赖方式的第三种 */
if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
final FlipperClient client = AndroidFlipperClient.getInstance(this);
client.addPlugin(new InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()));
client.addPlugin(new MyFlipperPlugin());
client.start();
}
}
}

/**
* 我们的方式,示例代码,下面精简了一点
*(我们的工程里有一个 Task,在编译 app 时 gradle 插件会自动定位到所有的 Task,并运行时生成依赖图,按依赖顺序启动 Task)
*/
public class FlipperTask extends Task{

public FlipperTask(String name) {
super(name);
}

@Override
public void afterSetup() {
setScheduler(AndroidSchedulers.mainThread());
beFinalizedBy(“Task1”);
}

@Override
public void onRun() {
final Application app = (Application) getInput(“app”);
SoLoader.init(app, false);
FlipperClient client = AndroidFlipperClient.getInstance(app);
if (client != null){
client.addPlugin(new InspectorFlipperPlugin(app, DescriptorMapping.withDefaults()));
client.addPlugin(new MyFlipperPlugin());
client.start();
}
}
}

#####2.编写插件

注意

id 要和桌面插件一致
同时实现了 “getData” 的接收,和 “clientMessage” 的发送

public class MyFlipperPlugin implements FlipperPlugin { ¨K7K }

这样一个简单的插件就写完了,赶紧跑起来试用一下吧!

###手机客户端:

###桌面客户端:

最后,通过这一个简单的 demo,我们把传递的参数改成 ’ Hybrid 接口’ 和 ’ Hybrid 接口的参数’,指示客户端进行的接口调用,复制出远程调用的功能就可以了。

###总结

最终,基于方便的日志查看,基于 flipper 开发的各类插件,比如远程调用 Hybrid 接口,获取当前 Hybrid 数据等等,可以在短时间之内提供一个较好的调试和测试体验。

让测试不需要了解开发细节,客户端开发能独立测试,前端能快速自己确定问题,降低开发中联调的耦合程度。

现在很多公司都会有许多 Hybrid 页面,如何低成本的调试一直是一个问题,大家好什么好的想法也可以一起交流。

###最后
针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!

最后

小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取
自学效果低效漫长且无助**。

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-KlhF4xfy-1719113594258)]一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32623.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python数列求和

1 问题 如何用python解决数学问题?如何用python数列求和? 2 方法 代码清单 1 Courier New字体,23磅行间距>>> def sum_num(): input_num input("输入一个0-9的整数:") try: input_num int(input_num) …

AI时代的音乐革命:创作更简单,灵魂在哪里?

#AI在创造还是毁掉音乐# 我是李涛,一名音乐创作者,最近一直在思考一个问题:AI到底是在创造音乐,还是在毁掉音乐? 几个月前,我第一次接触到AI音乐创作工具。它让我震惊,只需要输入几个关键词&a…

Apollo9.0 PNC源码学习之Planning模块(一)—— 规划概览

0 前言 规划本质就是搜索问题,数学角度来看就是寻找函数最优解 规划模块复杂的就是相关的逻辑处理和过程计算 对于规划的三维问题,目前解决方案:降维+迭代 将SLT问题分解为ST和SL二维优化问题:在一个维度优化之后,再另一个维度再进行优化,最后整合成三维的轨迹。 虽然降…

人机交互中的真问题与假问题

在人机交互领域,存在一些真正的挑战和问题,这些问题影响着如何有效地设计、开发和使用人机界面和交互系统。具体涉及: 人机交互系统需要尽可能自然和普适,以便用户可以轻松理解和使用。例如,语音识别系统需要能够准确地…

Excel使用小技巧

1、快速求和 选中数据区域&#xff0c;然后按组合键<Alt> 2、Excel表格美化 选中单元格区域&#xff0c;插入——表格&#xff0c;确定。也可以按快捷键CtrlT。 3、多个单元格同时输入 选中所有单元格&#xff0c;在编辑栏输入数据&#xff0c;按下Ctrl键的同时&#xf…

How to create a langchain doc from an str

问题背景&#xff1a; Ive searched all over langchain documentation on their official website but I didnt find how to create a langchain doc from a str variable in python so I searched in their GitHub code and I found this : 在 langchain 的官方文档中&#…

链表题目之模拟类

还有一些题目是没有特别复杂的技巧&#xff0c;但是考察仔细程度以及基本的链表处理能力&#xff0c;从而考察在基本的逻辑处理上考虑的全面和细致层度。这类题目对于业务代码编码能力的鉴定的确是有一些帮助。 分隔链表(86) 题目&#xff1a;86. 分隔链表 把大于等于的放到一…

游戏工厂:AI(AIGC/ChatGPT)与流程式游戏开发

游戏工厂&#xff1a;AI&#xff08;AIGC/ChatGPT&#xff09;与流程式游戏开发 码客 卢益贵 ygluu 关键词&#xff1a;AI&#xff08;AIGC、ChatGPT、文心一言&#xff09;、流程式管理、好莱坞电影流程、电影工厂、游戏工厂、游戏开发流程、游戏架构、模块化开发 一、前言…

Vue76-路由对浏览器历史记录的影响

一、push模式 默认是push 二、replace模式 替换当前记录&#xff01; &#xff08;当前指针指向的那一条记录&#xff09; 三、小结

完全禁用 Windows Defender

你有没有这样的情况&#xff0c;安装软件时&#xff0c;关闭了Windows实时保护&#xff0c;过几天&#xff0c;打开软件时&#xff0c;发现里面的附件被吞噬&#xff0c;因为Defender又自动打开了&#xff0c;那么&#xff0c;有没有一款可以完全禁用Defender的工具&#xff0c…

年薪50w+的项目经理,手把手教你如何复盘

复盘是一种重要的学习和改进工具&#xff0c;对于项目经理来说&#xff0c;能帮助识别项目中的成功与失败&#xff0c;为未来的项目管理提供宝贵经验。 理论部分 定义目标。在开始复盘之前&#xff0c;明确复盘的目标是什么。是为了找出项目中的问题并提出解决方案&#xff0c…

Linux的设备模型

在设备模型出现以前,Linux的驱动存在以下问题: 1,设备和驱动没有分离。也就是说设备的信息是硬编码在驱动代码中的,这给驱动程序造成了极大的限制。如果硬件有所改动,那么必然要修改驱动代码。比如LED如果修改了管脚,那么就必然要修改驱动程序。这样就导致驱动的通用性很…

腾讯大牛,手把手教你建立自己的Android学习知识体系,附实例+面经+建议!

主要让我介绍了我的项目&#xff0c;又出了几个题让我做。 项目就是让我介绍我科研做的那个流式二维码数据传输系统&#xff0c;我介绍的时候面试官听的很仔细&#xff0c;让我详细介绍了拍到的二维码是如何定位、采样和识别转换成二进制流的。然后问我传输速率是多少&#xff…

Android开启wifi调试

1.首先需要电脑和手机设备在同一个局域网下 1.1 手机和电脑连接同一个wifi&#xff0c;这样就是在同一个局域网下 1.2 可以用手机开一个热点&#xff0c;然后电脑连接手机开启的热点&#xff0c;这样也算在同一个局域网下 2.开启手机设备的无线调试功能 这个功能好像是可以在…

yarn安装配置及使用教程

Yarn 是一款 JavaScript 的包管理工具&#xff0c;是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具&#xff0c;它提供了确定性、依赖关系树扁平化等特性&#xff0c;并且与 npm 完全兼容。以下是 Yarn 的安装及使用教程&#xff1a; Yarn 安装…

stm32学习笔记---新建工程步骤和点灯演示

目录 STM32的三种开发方式 基于寄存器的方式 基于库函数的方式 基于Hal库的方式 固件库介绍 新建基于标准库的工程步骤 配置寄存器来完成点灯操作 添加库函数来完成点灯操作 添加库函数 开始点灯操作 第一步&#xff1a;使能时钟 第二步&#xff1a;配置端口模式 …

JVM专题六:JVM的内存模型

前面我们通过Java是如何编译、JVM的类加载机制、JVM类加载器与双亲委派机制等内容了解到了如何从我们编写的一个.Java 文件最终加载到JVM里的&#xff0c;今天我们就来剖析一下这个Java的‘中介平台’JVM里面到底长成啥样。 JVM的内存区域划分 Java虚拟机&#xff08;JVM&…

使用 Ubuntu x86_64 平台交叉编译适用于 Linux aarch64(arm64) 平台的 QT5(包含OpenGL支持) 库

使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库 目录 使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库写在前面前期准备编译全流程1. 环境搭建2. 复制源码包并解压&#xff0c;创…

【Python机器学习】NMF——将NMF应用于人脸图像

将NMF应用于之前用过的Wild数据集中的Labeled Faces。NMF的主要参数是我们想要提取的分量个数。通常来说&#xff0c;这个数字要小于输入特征的个数&#xff08;否则的话&#xff0c;将每个像素作为单独的分量就可以对数据进行解释&#xff09;。 首先&#xff0c;观察分类个数…

细胞核的分割与分类模型·HoVer-Net|动手实操

小罗碎碎念 上一期推文已经介绍了hover net的背景和代码仓库情况&#xff0c;这一期则是根据作者提供的示例代码进行分析&#xff0c;详细你看完这一期推文&#xff0c;应该就能大致掌握这些套路了。如果觉得意犹未尽&#xff0c;那就等待下一期吧&#xff0c;哈哈。 一、编程…