一. 準備工作
- JAVA環(huán)境 jdk1.8
- Android Studio 下載地址：Android Studio官網 OR Android Studio中文社區(qū)
- 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(這里劃重點,很多文檔里面都沒有這個導致巴報錯)
-
打開HBuilderX 新建一個uniapp項目
打開HBuilderX 新建一個uniapp項目.png -
重新獲取appID(自己新建的項目不需要,復制別人的項目一定要重新獲取)
重新獲取appId.png - 打開dcloud開發(fā)者中心并登陸(https://dev.dcloud.net.cn/), 找到剛才新建的項目并進入
image.png
打開離線打包Key管理頁面.png - 輸入我們的包名,下圖中的內容就是我們的包名(這里一定要注意包名是app的包名不是插件的包名)
image.png -
利用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
五. 開發(fā)插件(這里就只寫Module開發(fā),Component開發(fā)大同小異,具體的可以全看官方文檔)
-
開發(fā)一個簡單的插件
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);
}});
}
}
-
在app中引入插件
image.png
{
"plugins": [
{
"type": "module",
"name": "TestPlugin",
"class": "com.guodong.myapplication.TestPlugin"
}
]
}
六. 生成頁面
-
回到HBuilder中開發(fā)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>
-
點擊HBuilderX發(fā)布=>原生app-本地打包=>生成本地打包App資源
image.png -
將生成的__UNI__200DF91文件夾放到UniPlugin-Hello-AS/app/src/main/assets/apps目錄中
image.png -
修改dcloud_control.xml文件中的appId
image.png
七. 運行項目
這里不出意外項目就能運行了,最終效果如下
image.png
