iOS小技能:和uni-app、unity的融合方案

語言: CN / TW / HK

本文正在參加「金石計劃」

引言

項目背景:iOS app內嵌H5和 AR功能,AR使用unity2020開發。

技術點:unity導出的目標工程Unity-iPhone.xcodeproj 與原生進行融合

目前的方案:uniapp 橋接IOS, ios 橋接unity, uniapp 採用插件的形式進行iOS原生代碼開發, 然後集成為ipa文件。

I 實現思路

思路1: uniapp 橋接IOS,ios 橋接unity,然後集成為ipa文件。

Unity發佈到iOS平台得到的是一個Xcode工程,uniapp 這邊是個本地資源包。

思路2: 原生APP集成Unity導出的Xcode工程(需要將導出的工程封裝為靜態庫)http://zhuanlan.zhihu.com/p/103759507http://www.jianshu.com/p/00dcac5b2fb2

思路3: Unity3D 嵌入iOS原生代碼http://www.jianshu.com/p/82e34d9a12b9

思路4: Unity導出的web工程部署到服務器,原生APP加載對應的H5地址。(視加AR不支持導出Web)

小程序的AR是圖片識別,視加AR是空間識別; 小程序是在屏幕上,app可以做到3D的跟隨圖片。

如果有更好的思路和相關文章,歡迎留言交流。

II 橋接

2.1 IOS中調用Unity的方法

在這裏插入圖片描述

在這裏插入圖片描述

使用unityengine.dll提供的C接口UnitySendMessage 第1個char* 表示接受該消息的GameObject的name, 第2個表示該GameObject的腳本中接受消息的函數名, 第3個表示傳遞的參數。

//參數1 場景中模型的名字     //參數2 腳本名稱方法     //參數3 想unity傳遞一個char類型的數據    UnitySendMessage("iOSSendMessageToUnity", "ChangeCameraDirection", "");

結合後unity裏面的你先打開後是進入這個場景(SelectScene) 物體名SceneManager 腳本名SceneSelect 函數ChangeScene(string str) 傳參數ZhenWuMiaoAR就是真武廟;或者傳參數modelShow就是沙盤。

2.2 uniapp 橋接iOS

除了 uni-app 框架內置的跨端 API,各端自己的特色 API 也可通過條件編譯 自由使用。因此uniapp可直接使用原生API進行發佈通知,實現通信。 在這裏插入圖片描述

在這裏插入圖片描述

在這裏插入圖片描述

III uni-app運行原理

http://kunnan.blog.csdn.net/article/details/125975209

3.1 js引擎

瀏覽器的js引擎,就是jscore或v8的基礎上新增了一批瀏覽器專用API,比如dom;

node.js引擎,則是v8基礎上補充一些電腦專用API,比如本地io;

uni-app的App端和小程序端的js引擎,其實是在jscore上補充了一批手機端常用的JS API,比如掃碼。

3.2 運行原理

uni-app 在非H5端運行時,從架構上分為邏輯層和視圖層兩個部分。

  1. 邏輯層負責執行業務邏輯,也就是運行js代碼。

邏輯層是運行在一個獨立的jscore裏的,它不依賴於本機的webview,所以一方面它沒有瀏覽器兼容問題,可以在Android4.4上跑es6代碼,另一方面,它無法運行window、document、navigator、localstorage等瀏覽器專用的js API。

  1. 視圖層負責頁面渲染。

h5和小程序平台,以及app-vue,視圖層是webview。

而app-nvue的視圖層是基於weex改造的原生渲染視圖。

3.3 編譯器

vue2:uni-app編譯器基於wepback實現

vue3:uni-app編譯器基於Vite實現,編譯速度更快

HBuilderX 3.3.0+ , uni-app在App/H5/小程序全平台支持Vue 3.0開發,且全平台支持Vite編譯器。

Webpack1    |    | Rollup 出現(推崇 ESM 規範,可以實現 tree shaking, 打包出來的代碼更乾淨)    |    | Webpack2(也實現了 tree shaking, 但是配置還是太繁瑣了)    |    | Parcel (號稱 0 配置)    |    | Webpack4(通過 mode 確定 development 和 production 模式,各個模式有自己的默認配置)    |    | Webpack5(持久化緩存、module federation)    |    | Esbuild(採用 go 語言開發,比 Webpack 更快)    |    | Vite(推崇 ESM 規範,開發模式採用 nobundle,更好的開發體驗)

組件模塊化成為前端開發的主流模式,以 React 和 Webpack 為例:將一個應用涉及到的所有的功能拆分為一個個組件,一個組件對應一個源文件,然後通過 Webpack 將這些源文件打包。在開發過程中,可通過 Webpack 開啟一個 local server,實時查看代碼的運行效果。

IV 常見問題

4.1 支持 ARCore 的設備

http://developers.google.cn/ar/devices#android_china

4.2 uni-app和原生App混合開發問題

首先務必確認uni-app和原生代碼,誰是主誰是從的問題。

http://uniapp.dcloud.io/hybrid.html

  1. 如果你的應用是uni-app開發的,需要擴展一些原生能力,那麼首先去插件市場看看有沒有現成的插件,如果沒有,就自己開發原生插件。
  2. 如果你的App是原生開發的,部分功能欄目想通過uni-app實現,有2種方式: a. 在原生App裏集成uni小程序sdk,然後即可運行用uni-app框架開發的小程序前端項目(小程序應用資源包wgt)。http://nativesupport.dcloud.net.cn/README b. 如果不想集成原生sdk,那就把uni-app代碼發佈成H5方式,在原生App裏通過webview打開。

see also

公眾號:iOS逆向