uniApp实战三：自定义插件的实现

文章目录

1.最终效果预览
2.页面布局
3.插件开发
4.编译uni页面
5.平台申请离线key
6.根据证书文件查看SHA1及SHA256值
7.将模块编译为aar包并生成插件
8.勾选本地插件并打自定义基座包

1.最终效果预览

2.页面布局

定义一个按钮触发点击事件

复制代码

		<view @click="testClick">
			<text >调试</text>
		</view>

点击方法如下

复制代码

testClick(){
				const dcRichAlert = uni.requireNativePlugin('yichen-test');
				dcRichAlert.testAsyncFunc({
					title: "提示信息",
					name: '张三'
				}, result => {
					console.log('result: ', JSON.stringify(result));
				});
				
			}

3.插件开发

在AS中我们引入uni官方提供的示例UniPlugin-Hello-AS右键新建Module并定义类继承UniModule如下，添加一个testAsyncFunc方法，即上一步方法中调用的方法

复制代码

public class MyTest extends UniModule {

    String TAG = "MyTest";
    public static int REQUEST_CODE = 1000;

    //run ui thread
    @UniJSMethod(uiThread = true)
    public void testAsyncFunc(JSONObject options, UniJSCallback callback) {
        if(callback != null) {
            JSONObject data = new JSONObject();
            data.put("code", "success");
            data.put("age", 123);
            data.put("title", options.getString("title"));
            data.put("name", options.getString("name"));
            Log.e(TAG, "testAsyncFunc--"+data.toString());
            callback.invoke(data);
        }
    }

    //run JS thread
    @UniJSMethod (uiThread = false)
    public JSONObject testSyncFunc(){
        JSONObject data = new JSONObject();
        data.put("code", "success");
        return data;
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if(requestCode == REQUEST_CODE && data.hasExtra("respond")) {
            Log.e("TestModule", "原生页面返回----"+data.getStringExtra("respond"));
        } else {
            super.onActivityResult(requestCode, resultCode, data);
        }
    }


}

在app目录中的assets目录下找到dcloud_uniplugins.json，把我们刚才新建的插件定义上

复制代码

{
      "plugins": [
        {
          "type": "module",
          "name": "yichen-test",
          "class": "com.example.uniplugin_mytest.MyTest"
        }
      ]
    },

type对应的值固定为module,name中的值自己定义，当在uni中使用插件会用到，class中的值为我们插件写的类所在的包名+类名

4.编译uni页面

如下图所示生成本地打包资源

打包资源生成后将\unpackage\resources目录下的文件拷贝到AS工程\UniPlugin-Hello-AS\app\src\main\assets\apps目录下并将assets\data目录下的dcloud_control.xml中appid对应的值改为uniApp项目的包名

5.平台申请离线key

在https://dev.dcloud.net.cn/pages/app/list 平台中找到我们新建的应用，点击应用名称然后选择各平台信息,填写应用的包名、SHA1值、SHA256，这几个值根据自己打包的证书文件查看即可,填写完会生成离线key,将key值拷贝,找到AndroidManifest.xml文件并找到如下代码，替换其中的xxxx即可

复制代码

 <meta-data
            android:name="dcloud_appkey"
            android:value="xxxxx" />

6.根据证书文件查看SHA1及SHA256值

将安装的jdk的bin添加到系统变量中以便我们能访问keytool工具，打开cmd命令窗口输入如下命令查看证书文件的值

复制代码

keytool -list -v -keystore D:\xxx.keystore

输入密码回车即可查到sha1及sha256的值，xxx.keystore如果没有可以用as新建一个，点几下就行。

7.将模块编译为aar包并生成插件

在AS工程右侧找到自己的插件模块然后点击如下图所示生成aar包

在HbuilderX中新建如下图所示目录集成

注意package.json和android文件夹同级，这里官网应该写错了放到android文件夹里面去了，这样会导致本地找不到这个插件建好后可以将下列内容拷贝到package.json文件中，或者在插件跟目录下执行npm init一样会生成但是也是需要修改里面信息的

复制代码

{
	"name": "uniPluginsTest",
	"id": "yichen-test",
	"version": "1.0.0",
	"description": "uniPluginsTest",
	"_dp_type":"nativeplugin",
	"_dp_nativeplugin":{
		"android": {
			"plugins": [
				{
					"type": "module",
					"name": "yichen-test",
					"class": "com.example.uniplugin_mytest.MyTest"
				}
			],
			"integrateType": "aar"
		}
		
	}
}

_dp_type对应的值是固定的 plugins中的值直接和第三步插件开发dcloud_uniplugins.json中的值一样就行，integrateType得值固定为aar

8.勾选本地插件并打自定义基座包

在HbuilderX中找到manifest.json然后如下图勾选插件，然后再选云打包，打自定义基座包即可。