准备
首先我们需要下载官方提供的sdk
下载地址：https://nativesupport.dcloud.net.cn/AppDocs/download/android
-
下载完成后解压
image.png -
用Android studio打开HBuilder-Integrate-AS项目
image.png
1、创建uniapp项目
下载开发工具 HBuilderX：官方IDE下载地址
-
使用HBuilderX新建uniapp项目
image.png
image.png manifest.json 配置
1、如果HBuilderX提前已经登陆账号，新建uniapp项目会自动分配AppID
2、也可以登录开发者中心，创建 uniapp项目，然后点击重新重新获取按钮
3、在开发者中心配置Android证书签名
image.png
4、本地打包
image.png
2、uniapp与Android交互
打开HBuilder-Integrate-AS项目，将本地打的包拷贝到assets文件夹
image.png
- 编写dcloud_uniplugins.json文件
{
"nativePlugins": [
{
"plugins": [
{
"type": "module",
"name": "AppModule",
"class": "cn.hy.module.AppModule"
}
]
}
]
}
- 在Android项目里面创建类继承
package cn.hy.module;
import android.app.Activity;
import android.content.ComponentName;
import android.content.Intent;
import android.util.Log;
import android.widget.Toast;
import org.json.JSONObject;
import java.util.HashMap;
import java.util.Map;
import cn.hy.activity.MainActivity;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;
public class AppModule extends UniModule {
public static String TAG = "AppModule";
public static int REQUEST_CODE = 1000;
@UniJSMethod(uiThread = true)
public void showToast(String msg){
if(mUniSDKInstance!= null && mUniSDKInstance.getContext() instanceof Activity){
Toast.makeText(mUniSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
}
}
@UniJSMethod(uiThread = true)
public void sendMsg(String message, UniJSCallback callback){
if(mUniSDKInstance!= null && mUniSDKInstance.getContext() instanceof Activity){
message = message + "finished";
callback.invoke(message);
Map<String, Object> params = new HashMap<>();
params.put("code","0");
mUniSDKInstance.fireGlobalEventCallback("MyEvent",params);
}
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
}
@UniJSMethod(uiThread = true)
public void gotoNativePage(){
if(mUniSDKInstance!= null && mUniSDKInstance.getContext() instanceof Activity){
Intent intent = new Intent(mUniSDKInstance.getContext(), MainActivity.class);
((Activity)mUniSDKInstance.getContext()).startActivityForResult(intent,REQUEST_CODE);
}
}
}
- 对应uniapp调用Android方法
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<button class="btn" @click="showToast(title)">原生toast</button>
<button class="btn" @click="sendMessage(jsData)">sendMessage</button>
<button class="btn" @click="gotoNativePage()">gotoNativePage</button>
</view>
</template>
<script>
var appModule = uni.requireNativePlugin("AppModule");
export default {
data() {
return {
title: 'vue.js',
jsData: 'data from vue '
}
},
onLoad() {
const that = this;
plus.global.addEventListener("MyEvent",function(result){
uni.showToast({
title: 'Hello MyEvent '
});
})
},
methods: {
showToast(msg){
appModule.showToast(msg);
},
sendMessage(data){
appModule.sendMsg(data,ret=>{
appModule.showToast(ret);
})
},
gotoNativePage(){
appModule.gotoNativePage();
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
margin: 20rpx;
}
.btn {
margin: 20rpx;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
