一. 准备工作

• JAVA环境 jdk1.8
• Android Studio 下载地址：Android Studio官网 OR Android Studio中文社区
• App离线SDK下载：请下载2.9.8+版本的android平台SDK
• HBuilderX 下载地址：官方下载地址

二. 导入项目

将下载的App离线SDK解压,用Android Studio打开目录中的UniPlugin-Hello-AS目录

三. 新建模块

新建模块1.png

新建模块2.png

新建模块3.png

dependencies {

//    implementation 'com.android.support:appcompat-v7:28.0.0'
//    testImplementation 'junit:junit:4.+'
//    androidTestImplementation 'com.android.support.test:runner:1.0.2'
//    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //必须添加的依赖
    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-v8-release.aar'], dir: '../app/libs')
}

app中引入插件.png

四. 添加证书并生成dcloud_appkey(这里划重点,很多文档里面都没有这个导致巴报错)

1. 打开HBuilderX 新建一个uniapp项目

   
   
   打开HBuilderX 新建一个uniapp项目.png

2. 重新获取appID(自己新建的项目不需要,复制别人的项目一定要重新获取)

   
   
   重新获取appId.png
3. 打开dcloud开发者中心并登陆(https://dev.dcloud.net.cn/), 找到刚才新建的项目并进入
   
   image.png
   
   
   打开离线打包Key管理页面.png
4. 输入我们的包名,下图中的内容就是我们的包名(这里一定要注意包名是app的包名不是插件的包名)
   
   image.png

5. 利用Android Studio生成证书

   
   
   生成证书1.png
   
   
   生成证书2.png
   
   
   生成证书3.png
   
   
   生成证书4.png
   
   
   生成证书5.png
   
   
   生成证书6.png
   
   
   生成证书7,修改build.gradle之后需要重新编译.png
   
   
   查看证书的SHA1(很多同学打开没有Tasks目录,看一下张图).png
   
   
   解决没有Tasks目录的问题.png
   
   

   最后我们将得到的SHA1复制到我们的离线打包管理中

   
   
   image.png
   
   然后我们就获取到了Android的appkey
   
   image.png
   
   将appkey复制到AndroidManifest.xml文件中
   
   将appkey复制到AndroidManifest.xml文件中.png

五. 开发插件(这里就只写Module开发,Component开发大同小异,具体的可以全看官方文档)

1. 开发一个简单的插件

   
   
   image.png

package com.guodong.myapplication;

import com.alibaba.fastjson.JSONObject;
import com.taobao.weex.annotation.JSMethod;

import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

public class TestPlugin extends UniModule {
    @JSMethod
    public void add(JSONObject json, UniJSCallback callback){
        final int a = json.getIntValue("a");
        final int b = json.getIntValue("b");
        callback.invoke(new JSONObject(){{
            put("code", 0);
            put("result", a+b);
        }});
    }
}

2. 在app中引入插件

   
   
   image.png

{
      "plugins": [
        {
          "type": "module",
          "name": "TestPlugin",
          "class": "com.guodong.myapplication.TestPlugin"
        }
      ]
}

六. 生成页面

1. 回到HBuilder中开发demo页面

   
   
   image.png

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <button @click="handlerTest">1+1=</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            handlerTest() {
                const testPlugin = uni.requireNativePlugin('TestPlugin');
                testPlugin.add({
                    a: 1,
                    b: 2
                },e=>{
                    uni.showToast({
                        title: JSON.stringify(e),
                        icon: 'none'
                    })
                })
            }
        }
    }
</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;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

2. 点击HBuilderX发布=>原生app-本地打包=>生成本地打包App资源

   
   
   image.png

3. 将生成的__UNI__200DF91文件夹放到UniPlugin-Hello-AS/app/src/main/assets/apps目录中

   
   
   image.png

4. 修改dcloud_control.xml文件中的appId

   
   
   image.png

七. 运行项目

这里不出意外项目就能运行了,最终效果如下

image.png

八. 后面就是打包插件放入项目中,这些按照官方文档来就没什么难度了