準(zhǔn)備
首先我們需要下載官方提供的sdk
下載地址：https://nativesupport.dcloud.net.cn/AppDocs/download/android
-
下載完成后解壓
image.png -
用Android studio打開HBuilder-Integrate-AS項(xiàng)目
image.png
1恋技、創(chuàng)建uniapp項(xiàng)目
下載開發(fā)工具 HBuilderX：官方IDE下載地址
-
使用HBuilderX新建uniapp項(xiàng)目
image.png
image.png manifest.json 配置
1、如果HBuilderX提前已經(jīng)登陸賬號逻族，新建uniapp項(xiàng)目會自動分配AppID
2蜻底、也可以登錄開發(fā)者中心，創(chuàng)建 uniapp項(xiàng)目聘鳞，然后點(diǎn)擊重新重新獲取按鈕
3薄辅、在開發(fā)者中心配置Android證書簽名
image.png
4、本地打包
image.png
2抠璃、uniapp與Android交互
打開HBuilder-Integrate-AS項(xiàng)目站楚，將本地打的包拷貝到assets文件夾
image.png
- 編寫dcloud_uniplugins.json文件
{
"nativePlugins": [
{
"plugins": [
{
"type": "module",
"name": "AppModule",
"class": "cn.hy.module.AppModule"
}
]
}
]
}
- 在Android項(xiàng)目里面創(chuàng)建類繼承
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);
}
}
}
- 對應(yīng)uniapp調(diào)用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>
