uniApp与原生Android 的交互

准备

• 首先我们需要下载官方提供的sdk

• 下载地址：nativesupport.dcloud.net.cn/AppDocs/dow…

• 下载完成后解压

• 用Android studio打开HBuilder-Integrate-AS项目

1、创建uniapp项目

• 下载开发工具 HBuilderX：官方IDE下载地址
• 使用HBuilderX新建uniapp项目

• manifest.json 配置 1、如果HBuilderX提前已经登陆账号，新建uniapp项目会自动分配AppID 2、也可以登录开发者中心，创建 uniapp项目，然后点击重新重新获取按钮

3、在开发者中心配置Android证书签名

4、本地打包

2、uniapp与Android交互

• 打开HBuilder-Integrate-AS项目，将本地打的包拷贝到assets文件夹

• 编写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 &amp;&amp; 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>

结尾

如果还有问题，可以下载源码：github.com/xulj-tech/H…