前言:
阅读该文档需要Android和前端H5两种技术支持,使用Android Studio和HBuilder两个开发工具.
工作中有H5+SDK插件开发的需求,于是通过查看DCloud官网,自己总结出了关于H5+SDK插件开发的详细步骤;看过DCloud官网的文档的同学肯定都会骂gf,看DCloud官网的文档简直就是一种摧残,当你第一遍看完文档,根本不知道写的是什么,也看不明白说的是什么意思,于是,福利来了,以下就是本人通过工作中项目的研究,总结出了一个超级详细的H5+SDK插件开发步骤,先告诉同学插件开发不是很难,主要是js和原生api的对应关系,废话不多说,上干货!!!上干货!!!上干货!!!
先附上Demo地址:H5+SDK桌面角标插件
步骤1:配置Android最精简离线打包工程
查阅Android创建最精简离线打包工程,配置好Android最精简离线打包工程;
步骤2:引入第三方扩展功能
1>.在lib目录导入要用到功能的jar包;
2>.添加要用功能的依赖;
3>.要依赖的module库;
以上三种方式任选一种根据自己需求自行添加,简言之就是添加要开发插件使用的第三方功能库
步骤3:开发扩展插件类BadgeFeature文件
该类必须要继承io.dcloud.common.DHInterface.StandardFeature这个类,包名路径是固定的,有图有真相
步骤4:自定义扩展方法
方法名自定义,参数固定,必须是IWebview和JSONArray两个参数,有图有真相,方法体内写你要调用的原生api;
步骤5:开发扩展插件badge.js文件
开发js文件是为了调用原生api,截图截不全就贴代码吧,js模板可用该模板,具体逻辑可以根据自己需求自行修改,代码示例如下:
document.addEventListener('plusready',function () { //固定模板,不用修改
var _BARCODE ='Badge' // ① 插件名称(很重要),变量名和字符串值可自定义
var B = window.plus.bridge //②固定模板,不用修改,
var BadgePlugin = { //③变量名可自定义
//该模板做了简单的封装,因为需要调用的逻辑比较简单,而且参数一致,该方法中的参数根据自己需求修改
callNative:function (fname, args, successCallback) {
var callbackId =this.getCallbackId(successCallback,this.errorCallback) //固定模板,不用修改
//该if条件是对参数的判断
if (args !=null) {
args.unshift(callbackId)
}else {
var args = [callbackId]
}
return B.exec(_BARCODE, fname, args) //一个很重要的方法,第一个参数_BARCODE是插件名,同注释①的变量名一致;第二个参数fname是js方法名,第三个参数是要传递的参数;
},
//模板回调方法,可不用修改
getCallbackId:function (successCallback) {
var success =typeof successCallback !=='function' ?null :function (args) {
successCallback(args)
}
return B.callbackId(success,this.errorCallback)
},
//模板回调方法,可不用修改
errorCallback:function (errorMsg) {
console.log('Javascript callback error: ' + errorMsg)
},
//自定义js方法,但是必须要和扩展类的的方法名称一致,否则无法调用原生api
setBadge:function (count) {
this.callNative('setBadge', [count],null) //第一个参数方法名称字符串,必须和方法名一致,参数二是要传递的参数
},
//自定义方法,对应扩展类的另一个方法,方法名同样要保持一致
removeBadge:function () {
this.callNative('removeBadge',null,null)
}
}
window.plus.Badge = BadgePlugin //固定模板,示例:window.plus.插件名 = 同注释③变量名一致
},true)
步骤6:添加权限
HBilder项目的manifest.json文件的perminsion节点下配置插件名称(步骤5中注释①等号后的字符串值),必须和js文件中的插件名称一致,描述信息可以随便写;
步骤7:声明插件类别名(权限名)和插件类的对应关系
步骤8:使用
在要使用的html页面中引入扩展js文件后,在PlusReady方法中调用扩展js文件中的方法
以上就是关于H5+SDK插件开发的详细步骤,第一次写文档,有不足之处欢迎指教!!!
