1.前提要了解uniapp打包的原理:
1.云打包
2,自定义基座打包
云打包缺陷:调用原生模块没法本地调试,只能通过自定义基座原生项目进行调试
打包实际是将H5资源打包到原生项目,云端有个脚本打包。
这里以安卓为例:
就是打包到asset目录:
2自定义基座的步骤:
1.注意HB版本和离线SDK版本,确保版本保证一样,相关离线SDK下载以及文档如下(这里以安卓为例子):
[](https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android)
2.特别注意uni-app插件目前仅支持Module扩展和Component扩展,暂时不支持Adapter扩展!!!
3.以Module为例:
##1.先创建安卓模块:比如:uniplugin_component
加入依赖:
//必须添加的依赖
compileOnly 'com.android.support:recyclerview-v7:28.0.0'
compileOnly 'com.android.support:support-v4:28.0.0'
compileOnly 'com.android.support:appcompat-v7:28.0.0'
compileOnly 'com.alibaba:fastjson:1.1.46.android'
compileOnly fileTree(include: ['uniapp-release.aar'], dir: '../app/libs')
##2,编写TestModule让集成自UniModule:
package com.gsc.uniplugin_module;
import android.app.Activity;
import android.content.Intent;
import android.util.Log;
import android.widget.Toast;
import com.alibaba.fastjson.JSONObject;
import java.io.Serializable;
import java.util.List;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;
public class TestModule extends UniModule {
String TAG = "TestModule";
public static int REQUEST_CODE = 1000;
//run ui thread
@UniJSMethod(uiThread = true)
public void testAsyncFunc(JSONObject options, UniJSCallback callback) {
Log.e(TAG, "testAsyncFunc--"+options);
if(callback != null) {
// JSONObject data = new JSONObject();
// data.put("code", "success");
callback.invoke(options);
//callback.invokeAndKeepAlive(data);
}
}
//run JS thread
@UniJSMethod (uiThread = false)
public JSONObject testSyncFunc(JSONObject options){
JSONObject data = new JSONObject();
data.put("code", "success");
return options;
}
@UniJSMethod (uiThread = true)
public void gotolistpage(JSONObject object){
List<String> db= (List<String>) object.get("test");
if(mUniSDKInstance != null && mUniSDKInstance.getContext() instanceof Activity) {
Intent intent = new Intent(mUniSDKInstance.getContext(), ListPage.class);
intent.putExtra("data", (Serializable) db);
((Activity)mUniSDKInstance.getContext()).startActivityForResult(intent, -1);
}
}
@UniJSMethod(uiThread = true)
public void showToast(String msg){
Toast.makeText(mUniSDKInstance.getContext(),msg,Toast.LENGTH_LONG).show();
}
}`在这里插入代码片`
3.在自定义基座中注册该模块:创建dcloud_uniplugins.json在assert目录
{
"nativePlugins": [
{
"hooksClass": "",
"plugins": [
{
"type": "module",
"name": "TestModule",
"class": "com.gsc.uniplugin_module.TestModule"
}
]
}
]
}
##4 在uniapp vue文件或者nvue文件调用原生模块;
<template>
<div>
<button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
<button type="primary" @click="testSyncFunc">testSyncFunc</button>
<button type="primary" @click="gotoNativePage">跳转原生Activity</button>
<button type="primary" @click="show">调用原生Toast</button>
</div>
</template>
<script>
// 获取 module
var testModule = uni.requireNativePlugin("TestModule")
const modal = uni.requireNativePlugin('modal');
export default {
onLoad() {
plus.globalEvent.addEventListener('TestEvent', function(e){
modal.toast({
message: "TestEvent收到:"+e.msg,
duration: 1.5
});
});
},
methods: {
testAsyncFunc() {
// 调用异步方法
testModule.testAsyncFunc({
'name': 'unimp',
'age': 1
},
(ret) => {
modal.toast({
message: ret,
duration: 1.5
});
})
},
testSyncFunc() {
// 调用同步方法
var ret = testModule.testSyncFunc({
'name': 'unimp',
'age': 1
})
modal.toast({
message: ret,
duration: 1.5
});
},
gotoNativePage() {
testModule.gotolistpage({
'test':['a','b','c','d','我是vue来的']
});
},
show(){
testModule.showToast('我是前端传的string')
}
}
}
</script>