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

ゝ一世哀愁。 2022-10-15 02:59 229阅读 0赞

前言:

阅读该文档需要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这个类,包名路径是固定的,有图有真相

![e14cd2c26ec0][]

步骤4:自定义扩展方法

方法名自定义,参数固定,必须是IWebview和JSONArray两个参数,有图有真相,方法体内写你要调用的原生api;

![e14cd2c26ec0][]

步骤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文件中的插件名称一致,描述信息可以随便写;

![e14cd2c26ec0][]

步骤7:声明插件类别名(权限名)和插件类的对应关系

![e14cd2c26ec0][]

步骤8:使用

在要使用的html页面中引入扩展js文件后,在PlusReady方法中调用扩展js文件中的方法

以上就是关于H5+SDK插件开发的详细步骤,第一次写文档,有不足之处欢迎指教!!!

[e14cd2c26ec0]: /images/20221014/1e9f7b355a534834902afc8c9ebe17b7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关在uniapp H5项目中使用腾讯地图sdk

这个功能我也找了挺多方法的，最后才是这个最靠谱转载至：[https://www.jianshu.com/p/4847480995c9][https_www.jianshu.

Myth丶恋晨/ 2023年01月07日 10:05/ 0 赞/ 1012 阅读

相关 H5开发注意事项

最近从PC转到H5开发，学习了不少新的技能如下： 1. 在Chrome下，调整Debug工具至适应手机适配环境: iPhone 6/7/8； 2. 根据UI，选择“像素”

骑猪看日落/ 2022年12月27日 07:27/ 0 赞/ 196 阅读

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

前言: 阅读该文档需要Android和前端H5两种技术支持,使用Android Studio和HBuilder两个开发工具. 工作中有H5+SDK插件开发的需求,于是通过查

ゝ一世哀愁。/ 2022年10月15日 02:59/ 0 赞/ 230 阅读

相关 Flex (SDK 4.5) 中直接使用 H.264 编码视频

最近用到 Flex+FMS 实现一个视频通信，而且需要用 H.264 编码，但 Flash 本身只能采用 VP6（H.263）编码，要想编码为 H.264，必须要利用第三方工具

ゝ一世哀愁。/ 2022年10月01日 00:45/ 0 赞/ 121 阅读

相关 Android SDK开发包国内下载地址

[![返回主页][logo.gif]][logo.gif 1] [八进制][logo.gif 1] 少年壮志无烟抽 [首页][logo.gif 1]

约定不等于承诺〃/ 2022年07月28日 04:19/ 0 赞/ 539 阅读

相关整理H5插件开发中的问题（前端）

开发前配置克隆代码仓库 $ git clone https://git...........................git 新建一个分

你的名字/ 2022年05月27日 06:51/ 0 赞/ 193 阅读

相关 Android 原生开发、H5、React-Native开发特点

本文转载自 [Android 原生开发、H5、React-Native使用利弊和场景技术分享][Android _H5_React-Native] 　　由于工作原因，由And

深碍√TFBOYSˉ_/ 2022年05月27日 03:52/ 0 赞/ 232 阅读

相关 H5+app开发概述

HTML5 Plus应用概述 HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS A

旧城等待，/ 2022年04月23日 00:44/ 0 赞/ 228 阅读

相关 Android SDK开发包国内下载地址

[Android SDK开发包国内下载地址][Android SDK] ![2012111410065698.png][] 不知道是因为最近kaihui还是怎么的，打开

以你之姓@/ 2022年04月13日 13:45/ 0 赞/ 802 阅读

相关微信H5开发

微信H5开发（一） [https://blog.csdn.net/cbboke31/article/details/79936903][https_blog.csdn.n

古城微笑少年丶/ 2021年09月16日 03:22/ 0 赞/ 510 阅读