h5中使用C语言sdk开发包,Android H5+SDK插件开发

前言:

阅读该文档需要Android和前端H5两种技术支持,使用Android Studio和HBuilder两个开发工具.

工作中有H5+SDK插件开发的需求,于是通过查看DCloud官网,自己总结出了关于H5+SDK插件开发的详细步骤;看过DCloud官网的文档的同学肯定都会骂gf,看DCloud官网的文档简直就是一种摧残,当你第一遍看完文档,根本不知道写的是什么,也看不明白说的是什么意思,于是,福利来了,以下就是本人通过工作中项目的研究,总结出了一个超级详细的H5+SDK插件开发步骤,先告诉同学插件开发不是很难,主要是js和原生api的对应关系,废话不多说,上干货!!!上干货!!!上干货!!!

步骤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插件开发的详细步骤,第一次写文档,有不足之处欢迎指教!!!