【quickhybrid】组件(自定义)API的实现
前言
前文在API规划时就已经有提到过组件API这个概念,本文将会介绍它的原理以及实现
理解组件API这个概念
quick.ui.xxx
quick.page.xxx
复制代码
在quick hybrid中,API是按模块划分的,如ui
,page
等都是不同模块,而模块的另一个名称则是组件
为什么叫组件?可以这样理解,模块更多的是H5前端的叫法(因为在前端看来不同API分别属于不同的模块下), 而组件则是原生那边加强的理解概念(因为,每一个组件都是可以在项目中单独存在的,譬如项目A中有组件pay
,但项目B却不一定集成有)
框架API和组件API
回到最初,quick hybrid的使命就是服务于N个项目,那么会遇到一个问题-N个项目中可能会有非常多的需要以API方式提供的需求,但是考虑到体积以及通用性,并不是所有的都适合直接集成到框架中
此时,就需要对框架内容和项目内容进行区分,于是就有了框架API和组件API的概念(此时可以认为原生中框架文件是单独打成一个静态包给项目引用的,项目无法直接修改)
框架API
直接打包到框架文件中(前端的
quick.native.js
,原生框架包中的API都会包含)使用的时候直接
quick.xx模块.xx功能
即可调用(因为前端会将框架API都默认封装)config
配置时无需单独注册(因为默认情况会注册好)部分框架API会有H5下的实现(如部分系统级API都是有H5下的实现的)
组件API
框架中不会包含,由各自的项目自行开发或集成(如某项目单独集成一个个性化语音组件)
使用的时候必须用
quick.callAPi(...)
并传入合适参数(因为框架不会集成,需要通过这个万金油方法调用)config
配置时必须注册(需要传入组件别名注册,因为框架内部不知道这些新组件的)所有组件API都只是quick环境下的实现(一般都是一些原生中集成的拓展功能)
项目中如何拓展组件API
项目中默认只会打包框架API,但是框架的功能是有限的(只会集成一些最常用的功能),如果遇到一些个性化的需求(如支付,语音等等),则需要项目拓展组件API,总体步骤如下:
1.原生引入框架,并实现对应的API接口,编写API的功能代码
2.原生在项目配置文件中(不是框架配置文件)声明对应的别名和路径关系
3.H5页面初始化时,
config
,并传入对应需要注册的组件的别名4.容器接收到config方法后,去配置文件中根据别名找路径,然后注册对应路径下的API类
5.注册成功后,H5页面中通过
callAPi
来调用新注册的组件API
原生实现API接口
原生中API的定义如下(以pay组件为示例)
Android中
public class PayApi implements IBridgeImpl {public static void payCustom(..., JSONObject param, final Callback callback) {// 做对应的支付工作,做完后回调...callback.apply(...);}
}
复制代码
iOS中
@implementation PayApi
- (void)registerHandlers {[self registerHandlerName:@"payCustom" handler:^(id data, WVJBResponseCallback responseCallback) {// 做对应的支付工作,做完后回调...responseCallback(...);}];
}
复制代码
声明别名与路径的关系
需要注意的是,Android和iOS中别名请保持一致,一般情况下键值对也可
譬如以示例项目为例,
Android在app
模块下的assets/modules.properties
中
pay = com.quick.quickhybrid.api.PayApi
...
复制代码
同理iOS中也类似,只不过右侧的路径值可以换为iOS中的,如
pay = PayApi
复制代码
可以看到,Android和iOS中的别名名称相同,但是路径不一致(因为各种的包机制不一样)
H5中config注册
H5中需要在config注册拓展的组件,需要传入别名(别名有对应的文档说明-一般情况下同类型组件的别名是固定的)
quick.config({jsApiList: ['pay']
});// error代表发生错误
quick.error(...);// ready中是注册成功
quick.ready(...);
复制代码
原生容器注册组件API
原生容器接收到config请求后就开始注册组件,如下
// RegisterName: ui,page,pay之类的组件(模块)名
// RegisterNclass: 对应的路径,Android中和iOS中不一致// RegisterNclass: 如com.quick.quickhybrid.api.PayApi
JSBridge.register(RegisterName, RegisterNclass);
复制代码
// RegisterNclass: 如PayApi
[self registerHandlersWithClassName:@"RegisterNclass" moduleName:@"RegisterName"];
复制代码
H5中调用组件API
注册成功后,H5中通过特定方法调用
quick.callApi({name: 'testPay',mudule: 'pay',// 额外参数经常都需要data: {...},success: function(result) {quick.ui.toast(JSON.stringify(result));},error: function(error) {},
});
复制代码
结束语
实际情况下,当项目足够多时,拓展组件API是一种非常常见的场景,因此制定规范是很有必要的。
另外,一般情况下,很多相同功能的组件都是可以一起积累,多个项目复用的(比如支付,特定业务组件等等)
返回根目录
- 【quickhybrid】如何实现一个Hybrid框架
源码
github
上这个框架的实现
quickhybrid/quickhybrid
【quickhybrid】组件(自定义)API的实现相关推荐
- php文件怎么阅读器,Vue文件阅读器组件FileReader API
这次给大家带来Vue文件阅读器组件FileReader API,使用Vue文件阅读器组件FileReader API的注意事项有哪些,下面就是实战案例,一起来看一下. 有时候我们需要从文件中读取数据. ...
- Vue2(九):浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2学习笔记:第九章 一.浏览器本地存储(WebStorage) 1.相关API 2.一些注意点 3.TodoList中的本地存储 二.组件自定义事件 1.引出组件自定义事件 2.怎么给组件绑定? ...
- 基于Antd Input组件自定义Input的成功状态
前言 Ant Design的Input组件的有一个状态的Api 需求 公司自研UI组件,在Antd的基础上进行开发.其中Input组件除了警告与错误状态外,还增加了成功的状态.如下图⬇️ 开发实现 方 ...
- 组件接口(API)设计指南-文件夹
组件接口(API)设计指南-文件夹 组件接口(API)设计指南[1]-要考虑的问题 组件接口(API)设计指南[2]-类接口(class interface) 组件接口(API)设计指南[3]-托付( ...
- Vue组件学习之组件自定义事件
主要介绍组件的自定义事件的概念,使用等. 何为组件自定义事件: 组件自定义事件是一种组件间的通信方式,方向是 子组件====>父组件. 使用场景:A是子组件,B是父组件,如果要把B的数据传给A, ...
- antd走马灯组件自定义前进后退按钮
antd走马灯组件自定义前进后退按钮[ts + react] antd的Carousel没有提供前进后退按钮需要自己根据文档 实现此功能 官方提供了next 和prev两个方法 next() 切换到下 ...
- 为自己的软件增加脚本编写功能并自定义API
CBScript语法介绍 开发背景:为ERP系统统计报表提供用户定义的公式,生成复杂的数据及表格内容.做一定的二次开发. 为什么不使用动态编译:因为有些函数需要在服务器端执行,执行时有安全风险,比如错 ...
- PC版小米cc机器人自定义api接口插件PJ版
介绍: 小米cc自定义api插件PJ版,可对接webcc及其改版 输入服务器和密钥,即可对接 无需授权,此版本为PJ版 网盘下载地址: https://zijiewangpan.com/IPz15Ep ...
- 关于创建奇门自定义api接口流程备忘录
项目需要对接速卖通的api,并使数据安全出聚石塔,采用的方法是在奇门创建自定义api进行消息的转发,为什么不走官方场景呢,我没试过,我同事说官方场景的api少字段,不满足需求,走自定义可以返回所有的字 ...
- Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中,我们有涉及到要从子组件中把数据传递给父组件,当时我用的方法是,让父组件给子组件传递一个函数,然后子组件把要传过来的数据放在那 ...
最新文章
- 5个REST API安全准则
- 谷歌“验光师”AI算法,让可控核聚变早日成真!
- Codevs 5590 A+B 问题 超级版
- php curl发送post请求失败,php 利用curl发送post请求
- 中国电信叫停不限量套餐 套外资费3元/GB
- 专注于分布式存储计算技术及其应用url http://www.nosqlnotes.net/
- pku 3207 Ikki's Story IV - Panda's Trick 2-sat判定是否存在可行解
- IOS 改变导航栏返回按钮的标题
- oracle 自定义比较函数
- ClockworkMod Recovery实现应用android一键化在线卡刷升级
- Android apk 加密方式
- 零基础C语言入门007——ascⅡ字符表、字符常量
- 个人计算机网刻系统,诚龙网维全自动pxe网刻工具_win7网刻工具_网刻win7系统工具...
- 锐浪报表 Grid++Report PrintPreview 显示模式
- electron深入浅出
- 关于SQL Server中left join on and 用法的介绍
- 含根式的定积分计算_定积分计算详细步骤
- linux格式化光盘找不到介质,Linux挂载光盘的问题解决方案(mount: you must specify the filesystemnbs...
- wordpress实现全站HTTPS
- CSS布局:CSS三大特性、盒子模型