文章目錄
記錄下uni原生插件開發流程
看官方文檔看的有點頭蒙 特此記錄下
作爲長期伸手黨的我深知你們喜歡的是什麼
OK先上源碼鏈接
Hbuilder X打開 UniToast
AndroidStudio打開UniPlugin-Hello-AS
注意此項目使用的是uni [email protected]_20201111
一、準備開發環境
- JAVA環境 jdk1.8
- Android Studio
- App離線SDK下載:請下載2.9.8+版本的android平臺SDK
- 官網SDK解壓後如下圖
二、開發調試插件
一、導入項目
- 導入uni插件原生項目 UniPlugin-Hello-AS工程請在App離線SDK中查找
- 點擊Android Studio菜單選項File—>New—>Import Project。
- 導入以後目錄結構如下
- 升級項目爲androidx 點擊等待即可
一、創建插件Library
- 因爲uni的toast有字符長度限制 下面用一個最簡單的調用原生Toast的方式
選擇Android Library
輸入 Library名稱toastplus 點擊finish
然後在app目錄下的build.gradle下引入 toastplus
將app libs目錄下的 uniapp-v8-release.aar包(名字可能不一樣)複製到 toastplus libs下
然後修改modle toastplus中的build.gradle文件 引入aar包 點擊右上角同步即可
然後在modle目錄下創建ToastPlus類集成UniMoudle
ToastPlus代碼如下
public class ToastPlus extends UniModule {
JSCallback jsCallback;
String path = "";
/**
* 簡單回調示例
* 傳入一個String類型 處理並返回
*/
@JSMethod(uiThread = true)
public void processData(String data, JSCallback jsCallback) {
this.jsCallback = jsCallback;
if (mWXSDKInstance != null && mWXSDKInstance.getContext() instanceof Activity) {
path = data + "+(處理完成)";
//返回處理結果 進行回調
jsCallback.invoke(path);
}
}
/**
* 調用原生Toast顯示傳入內容
*/
@JSMethod(uiThread = true)
public void showToast(String message) {
if (mWXSDKInstance != null && mWXSDKInstance.getContext() instanceof Activity) {
Toast.makeText(mWXSDKInstance.getContext(), message, Toast.LENGTH_SHORT).show();
}
}
}
- 在app/dcloud_uniplugins.json文件中添加插件信息
name爲uni調用原生插件的名稱 class爲絕對路徑
三、創建uni項目
打開HBuilderX,務必保證使用最新uniapp安卓原生SDK以及HBuilderX最新版本
新建uniapp項目 並修改index代碼
index.vue代碼如下
<template>
<view class="content">
<view class="button1">
<button @click="showToast(message)">點擊顯示原生Toast</button>
</view>
<view class="button2">
<button @click="processData(waitprocessdata)">回調的使用</button>
</view>
</view>
</template>
<script>
const ToastPlusModule = uni.requireNativePlugin("toastplus")
export default {
data() {
return {
message: '我是一條很長的Toast我是一條很長的Toast',
waitprocessdata: '我是待處理的數據'
}
},
onLoad() {
},
methods: {
showToast(message) {
ToastPlusModule.showToast(message)
},
processData(data) {
ToastPlusModule.processData(data, processokdata => {
ToastPlusModule.showToast(processokdata)
})
}
}
}
</script>
<style>
.button1 {
display: flex;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
</style>
三、調試插件
點擊本地資源打包
控制檯會輸出路徑
複製**__UNI__904803F** 文件夾到AndroidStudio
app/src/main/assets/apps/目錄下 並修改
dcloud_control.xml中的appid字段
點擊運行即可調試插件
運行結果
如果你可以成功運行 恭喜你 uni的原生插件你已經開發完成了
下面講一下如何打包爲提交市場需要的zip包
三、打包爲本地插件
- 在本地創建一個文件夾 名稱可以命名爲你的uni賬戶名-插件名稱
如
我們先來編輯這個pakege.json文件
代碼如下
{
"name": "ToastPlus",
"id": "AndroidLMY-ToastPlus",
"version": "1.0.0",
"description": "原生Toast",
"_dp_type":"nativeplugin",
"_dp_nativeplugin":{
"android": {
"plugins": [
{
"type": "module",
"name":"ToastPlus",
"class": "com.lmy.toastplus.ToastPlus"
}
],
"integrateType": "aar"
}
}
}
然後打包插件的aar包
androidstudio選中右側gradle選中圖中選項點擊即可
aar包輸入路徑爲
複製aar包到android目錄下
四、調試本地插件
我們在打包爲zip壓縮包之前首先測試插件的可用性
打開uni項目
將整理好的文件夾放入nativeplugins文件夾下(沒有創建即可)
然後修改index.vue
然後配置本地插件
最後點擊發行雲打包
配置簽名文件即可 然後點擊打包
打包完成以後控制檯會有輸出下載地址 點擊下載安裝進行測試即可
五、發佈本地插件到插件市場
如果測試沒有問題就可以吧整理的文件夾進行zip壓縮準備提交市場了
最後填寫完以後點擊發布等待審覈即可