再读MUI混合插件开发文档_jsutil.execcallback-CSDN博客

本文链接：https://blog.csdn.net/qq_38322527/article/details/80862186

说实话，官方的文档很难看懂，在经历了几个项目的插件开发后，对插件开发有了个人的理解，同时也深感mui框架开发人员的不易，废话不多说，mui混合插件开发传送通道！

对于开发文档，相信很多人看了之后都觉得头大，我也不例外，可能还不如你们，我当时看评论区，看见很多牛人说看完照敲一遍，基本就会了，楼主我坐在电脑面前，看文档3天才撸出来一个简单的事例出来，惭愧！

插件开发文档开头就说明了一个知识点，大家不要忽视

        
技术架构
HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层。 三层功能分别是： 
JS层： 在Webview页面调用，触发Native层代码，获取执行结果。 
PluginBridge层： 将JS层请求进行处理，触发Native层扩展插件代码。 
Native层： 插件扩展的平台原生代码，负责执行业务逻辑并执行结果返回到请求页面。技术架构
HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层。 三层功能分别是： 
JS层： 在Webview页面调用，触发Native层代码，获取执行结果。 
PluginBridge层： 将JS层请求进行处理，触发Native层扩展插件代码。 
Native层： 插件扩展的平台原生代码，负责执行业务逻辑并执行结果返回到请求页面。

其次也用图像进行了生动的描述

其实我只想说的是，了解就行了，别深究，他表达的意思无非就是说：插件就是底层系统和js之前的通道，也可以说是桥梁！

文档下面做了流程导图，表示看不懂，真的，不是装逼，是真的不懂，看了就头大，我们看文档下面的，说到了重点。

1.文档中说的，需要你在对应xml文件中进行插件命名，其实就是起个名字，随便取吧，楼主做java的，心里还是有点小讲究

在dcloud_properties.xml这个文件中

不要怪我用这么丑的东西遮着，公司安全问题

其中name为起名；value在此为指定你写的插件类的全路径(做java的大家对这个词应该很熟悉了，不啰嗦)

2.配置了对应的xml后，开始配置js文件，完成桥梁和Html代码的通信渠道

我自认为很详细的

3.编写插件类

采用的是开发文档中说明的新插件开发方式，这里做的是异步的插件，打算过段时间做同步的！

import io.dcloud.common.DHInterface.IWebview;
import io.dcloud.common.DHInterface.StandardFeature;
import io.dcloud.common.util.JSUtil;

4.注意异步返回代码，官方文档中有做说明

具体的返回样式是这个写的

JSUtil.execCallback(pWebviews, pCallBackID, "Count_Cache_Exception", JSUtil.OK, true);

使用jsutil的execCallback完成异步回调，我这边一般传递字符串类型的东西，方便在h5页面进行返回值的判断和解析。

5.Html页面上的操作，如何去调用实现

(1)引用js文件

<script src="../js/test/clearPhoneCache.js" type="text/javascript" charset="utf-8"></script>

(2)根据js文件中的配置信息，编写方法(js信息看上面的截图信息)

function getCacheSizeByChaJian(values) {
				console.log("11111")
				plus.clearCache.clearPhoneCache(values, function(result) {
					alert(result);
				}, function(result) {
					alert(result)
				});
			}				console.log("11111")
				plus.clearCache.clearPhoneCache(values, function(result) {
					alert(result);
				}, function(result) {
					alert(result)
				});
			}

调用方式