uniApp与原生Android 的交互

准备

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

• 下载地址：https://nativesupport.dcloud.net.cn/AppDocs/download/android

• 下载完成后解压

  
  image01.png

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

  
  image02.png

1、创建uniapp项目

• 下载开发工具 HBuilderX：官方IDE下载地址

• 使用HBuilderX新建uniapp项目

  
  image03.png

image04.png

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

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

image06.png

4、本地打包

image07.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 &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>

结尾

如果还有问题，可以下载源码：https://github.com/xulj-tech/HBuilder-Integrate-AS.git，uniapp文件下有个压缩包是是对应的uniapp项目。