簡述
近期,收到很多的開發者夥伴的留言和建議,讓我們適配uni-app 平臺,來滿足他們的跨平臺開發的需求。anyRTC秉承着爲廣大開發者提供便利的開發環境,和對開發者們的支持,經過半月的努力,終於完成了uni-app 跨平臺SDK的開發和測試。
截止到今天爲止,anyRTC跨平臺SDK已經包括了Electron、Flutter、uni-app 框架,爲衆多的開發者們提供了更多的選擇,和更加良好的開發環境。
什麼是uni-app
uni-app
是一個使用 Vue.js 開發跨平臺應用的前端框架,開發者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平臺。
uni-app 繼承自 Vue.js,提供了完整的 Vue.js 開發體驗。
uni-app 組件規範和擴展api與微信小程序基本相同。有一定 Vue.js 和微信小程序開發經驗的開發者可快速上手 uni-app ,開發出兼容多端的應用。
uni-app的優點
uni-app在跨端數量、擴展能力、性能體驗、周邊生態、學習成本、開發成本等6大關鍵指標上擁有極強的競爭優勢。
功能框架
從下面uni-app
功能框架圖可看出,uni-app
在跨平臺的過程中,不犧牲平臺特色,可優雅的調用平臺專有能力,真正做到海納百川、各取所長。
一套代碼,運行多個平臺
uni-app
實現了一套代碼,同時運行到多個平臺;如下圖所示,一套代碼,同時運行到iOS模擬器、Android模擬器、H5、微信開發者工具、支付寶小程序Studio、百度開發者工具、字節跳動開發者工具、QQ開發者工具(底部8個終端選項卡代表8個終端模擬器):
實際運行效果如下:
總結
對於技術人員而言:不用學那麼多的平臺開發技術、研究那麼多前端框架,學會基於vue的uni-app就夠了。
對於公司而言:更低成本,覆蓋更多用戶,uni-app是高效利器。
uni-app 實時音視頻快速接入
以Android平臺爲例,介紹一下uni-app原生插件
什麼是uni原生插件
uni原生插件指的是將您本地原生開發的功能按照規範封裝成插件包,然後即可在uni-app
前端項目中通過js
調用您開發的原生能力。
開發環境
- JAVA環境 jdk1.7+(最優1.8)
- Android Studio 下載地址:Android Studio官網 OR Android Studio中文社區
- 下載uni小程序 2.9.8+SDK 詳情;
- HBuilderX-2.9.8+
代碼實現
舉例說明擴展 module:
1.創建Android Studio的Module模塊
- 在現有Android項目中創建library的Module。例如
TestModule
- 配置剛創建的Module的build.gradle信息。
//導入aar需要的配置
repositories {
flatDir {
dirs 'libs'
}
}
dependencies {
//必須添加的依賴
compileOnly 'com.android.support:recyclerview-v7:27.1.0'
compileOnly 'com.android.support:support-v4:27.1.0'
compileOnly 'com.android.support:appcompat-v7:27.1.0'
compileOnly 'com.alibaba:fastjson:1.1.46.android'
compileOnly fileTree(include: ['uniapp-release.aar'], dir: '../app/libs')
}
Tips:
uniapp-release.aar是擴展module主要依賴庫,必須導入此依賴庫!
2.創建TestModule類
- Module 擴展必須繼承 UniModule 類
public class TestModule extends UniModule
- 擴展方法必須加上@UniJSMethod (uiThread = false or true) 註解。UniApp 會根據註解來判斷當前方法是否要運行在 UI 線程,和當前方法是否是擴展方法。
- UniApp是根據反射來進行調用 Module 擴展方法,所以Module中的擴展方法必須是 public 類型。
//run ui thread
@UniJSMethod(uiThread = true)
public void testAsyncFunc(JSONObject options, UniJSCallback callback) {
Log.e(TAG, "testAsyncFunc--"+options);
if(callback != null) {
JSONObject data = new JSONObject();
data.put("code", "success");
callback.invoke(data);
}
}
//run JS thread
@UniJSMethod (uiThread = false)
public JSONObject testSyncFunc(){
JSONObject data = new JSONObject();
data.put("code", "success");
return data;
}
- 同樣因爲是通過反射調用,Module 不能被混淆。請在混淆文件中添加代碼:
-keep public class * extends io.dcloud.feature.uniapp.common.UniModule{*;}
3.註冊TestModule
由於uni小程序運行在獨立子進程中。內存與宿主不共享。所以宿主進程
註冊了TestModule
,在uni小程序是無法使用的。 Android創建子進程時會主動再次初始化Application!所以uni小程序註冊TestModule
必須在Application中的onCreate初始化或註冊。
Tips
- 註冊
TestModule
之前記得配置宿主的build.gradle
導入Module模塊. - 以下示例代碼寫在宿主的Application中。
public class App extends Application {
@Override
public void onCreate() {
super.onCreate();
try {
UniSDKEngine.registerModule("TestModule", TestModule.class);
} catch (UniException e) {
e.printStackTrace();
}
}
}
到此,我們已經完成了一個簡單的 module 擴展
4. 在 uni小程序 中調用 module 方法
module 支持在 vue 和 nvue 中使用
<template>
<div>
<button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
<button type="primary" @click="testSyncFunc">testSyncFunc</button>
</div>
</template>
<script>
// 獲取 module
var testModule = uni.requireNativePlugin("TestModule")
export default {
methods: {
testAsyncFunc() {
// 調用異步方法
testModule.testAsyncFunc({
'name': 'unimp',
'age': 1
},
(ret) => {
console.log(ret)
})
},
testSyncFunc() {
// 調用同步方法
var ret = testModule.testSyncFunc({
'name': 'unimp',
'age': 1
})
console.log(ret)
}
}
}
</script>
Tips:
uni.requireNativePlugin僅用於獲取UniModule的對象。UniComponent不支持該方法!
應用場景
uni-app 跨平臺SDK的應用場景非常廣泛,無論是在日常生活中,還是在其他領域都有很多的用武之地。
- 教育方面
一對一小班課:學校內部局域網溝通;視頻家訪;一對一教學;輕鬆實現跨區域交流互動。一對一在線教育模式也是具個性化的,可以全方面把控教學過程。一對一在線教育因材施教,全方位爲學生制定學習計劃,從而更具針對學生的特質並對症下藥。更重視學習方法,爲學生營造了一種全新的學習氛圍,通過相互感染,使學生在學習過程中產生學習的動力和強烈的學習意識,讓學生更加關注學習。
- 在線金融
金融貸款:從遞交申請材料到貸款發放,移動端即可輕鬆實現,在線審覈辦理貸款,同步錄製控制貸款風險。
視頻客服:一對一專屬視頻客服,可普遍運用於銀行客服、線上審覈服務等業務,可在線確認客戶情況,辦理業務,提高業務辦理速度,節約資源,也爲客戶提供更爲便捷的服務。視頻客服通過協調溝通、支持情感表達以及實時分享內容,爲客戶提供了更豐富的存在感、個性化體驗,配備了錄音/錄屏工具,主管/經理可以檢查每個視頻交互,以查看客服中心座席是否對客戶有同情心和情感反應。
- 智能終端
智能終端可應用於小區物業管理,智能手錶、眼鏡,無人機等設備上,通過音視頻傳輸高效解鎖,撥通電話等進行實時音視頻通話。點對點的音視頻通訊,可對智能終端實現自我控制、遠程控制、好友管理、及影像等功能,可以遠程遙控進行佈防或者撤防,並記錄下全過程。智能終端將極大地改變人們未來的生活圖景,爲我們的工作效率、生活便利性帶來了極大的提升,成爲我們生活中不可或缺的一部分。
- 移動執法和交通物流類
語音對講功能,頻道對講,一對一/一對多對講,適用於多級調動,應急指揮,可用於公安、交警、武警、軍隊、法院、監獄、城管、市場監管等。
多媒體對講功能,可實時視頻回傳,現場圖文視頻上報,圖文,視頻消息。適用於跨地區調度,位置管理,可用於鐵路、客運、出租、公共交通、物流運輸、港口等。
結語
anyRTC一直以來堅持以開發者爲先,並在持續努力爲開發者提供各種有價值的差異化服務,爲開發者提供更快、更好、更便捷的產品和服務。
anyRTC也會一直秉承着,認真,專業的精神,爲各位開發者和用戶提供優質的服務。
anyRTC官網:https://www.anyrtc.io/