前言

前文在API规划时就已经有提到过组件API这个概念,本文将会介绍它的原理以及实现

理解组件API这个概念

quick.ui.xxx
quick.page.xxx

在quick hybrid中,API是按模块划分的,如uipage等都是不同模块,而模块的另一个名称则是组件

为什么叫组件?可以这样理解,模块更多的是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是一种非常常见的场景,因此制定规范是很有必要的。

另外,一般情况下,很多相同功能的组件都是可以一起积累,多个项目复用的(比如支付,特定业务组件等等)

返回根目录

源码

github上这个框架的实现

quickhybrid/quickhybrid

【quickhybrid】组件(自定义)API的实现的更多相关文章

  1. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  2. 十七,k8s集群指标API及自定义API

    目录 资源指标: Metrics-Server 资源指标: Metric-Server介绍 Metric-Server部署 下载yaml文件 因为有墙, 所以提前下载image镜像, 当然也可以手动修 ...

  3. vue-learning:29 - component - 组件三大API之三:slot

    组件三大API之三: slot <slot>标签 v-slot指令 普通插槽 有默认值的插槽 具名插槽 作用域插槽 v-slot是Vue 2.6.0引入的一个新语法指令,目的是统一之前sl ...

  4. vue-learning:27 - component - 组件三大API之二:event

    组件三大API之二: event 在上一节中讲到prop单向下行数据绑定的特征,父组件向子组件传值通过prop实现,那如果有子组件需要向父组件传值或其它通信请求,可以通过vue的事件监听系统(触发事件 ...

  5. vue-learning:26 - component - 组件三大API之一:prop

    组件三大API之一: prop prop的大小写 prop接收类型 字符串数组形式 对象形式: type / required / default / validator prop传递类型: 静态传递 ...

  6. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  7. 微信小程序开发—快速掌握组件及API的方法---转载

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  8. Azure Mobile Services的REST API调用方式和自定义API

    Azure Mobile Services(移动服务)是微软在Azure平台中提供的一种跨平台的移动应用后端服务,即移动后端即服务.支持.NET和JavaScript(Node.js)写后端代码:支持 ...

  9. 组件接口(API)设计指南-文件夹

    组件接口(API)设计指南-文件夹 组件接口(API)设计指南[1]-要考虑的问题 组件接口(API)设计指南[2]-类接口(class interface) 组件接口(API)设计指南[3]-托付( ...

  10. 组件接口(API)设计指南[5]-最后的思考

    *阅读其它章节: http://blog.csdn.net/cuibo1123/article/details/39894477 最后的思考 我通过困难的学习以及多年的失误.写了这片篇关于创建组件和a ...

随机推荐

  1. springmvc项目打war包部署到tomcat访问路径去掉项目名

    一般来说,部署到tomcat则是把war包丢到webapps目录下,启动Tomcat会自动解压,成一个war包名称的文件夹项目, 例如imgManager.war 访问的地址一般是localhost: ...

  2. web常用的正则表达式

    1.    平时做网站经常要用正则表达式,下面是一些讲解和例子,仅供大家参考和修改使用: 2.    "^\d+$" //非负整数(正整数 + 0) 3.    "^[0 ...

  3. 最近邻规则分类(k-Nearest Neighbor )机器学习算法python实现

    综述 Cover和Hart在1968年提出了最初的近邻算法 是分类(classification)算法 输入基于实例的学习(instance-based learning),惰性学习(lazy lea ...

  4. NYOJ 36 LCS(最长公共子序列)

    题目链接: http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=36 最长公共子序列 时间限制:3000 ms  |  内存限制:65535 KB ...

  5. bat批处理文件自动判断系统版本信息(转载)

    @echo offver|find "Version 5.0" >nulif not errorlevel 1 goto Windows2Kver|find "版本 ...

  6. CCF 201709-2公共钥匙盒

    问题描述 有一个学校的老师共用N个教室,按照规定,所有的钥匙都必须放在公共钥匙盒里,老师不能带钥匙回家.每次老师上课前,都从公共钥匙盒里找到自己上课的教室的钥匙去开门,上完课后,再将钥匙放回到钥匙盒中 ...

  7. 文本处理三剑客之 awk

    GAWK:报告生成器,格式化文本输出 awk [options] ‘program’ var=value file… awk [options] -f programfile var=value fi ...

  8. vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)

    效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的  这个方法里传递的index 对应  isShow 数组里的index  ,对 ...

  9. 机器学习练习(一)-使用jupyter notebook

    一个简单的分类机器学习练习,基于sklearn.sklearn是Python中的一个机器学习模块.它其中有数据.非常方便我们用它来训练机器学习的模型,和验证我们的想法.(官方网站:https://sc ...

  10. Eclipse Git提交代码,多了一个“工程同名的文件夹”,找不到解决办法!!!

    提交代码到Git仓库,有2种方式. 第1种,先在OSChina等平台创建git项目,本地clone,再在本地修改代码提交.√ 这种方式,没任何问题. 不过,我平时不喜欢这么干. 第2种,本地已经有了项 ...