iVX 基礎

1.1 iVX 線上集成環境進入

點擊連接或通過瀏覽器輸入網址 https://editor.ivx.cn/ 進入線上集成開發環境。

進入在線集成開發環境后，可點擊右上角登錄/注冊進行帳號登錄或者注冊。登錄賬戶后在進行項目開發時會自動保存項目開發進度。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-L3iePlVH-1623644085144)(images/screenshot_1623640858152.png)]

1.2 創建項目

打開編輯器點擊新建按鈕即可創建一個應用，也可以在最近打開列表中選擇一個最近編輯的應用打開。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-plOonv5H-1623644085145)(images/screenshot_1623643948058.png)]

比如，我們新建一個H5應用，并把它重命名為“我的第一個H5”。

項目新建后，我們就可以在我的工作臺和最新打開列表中重新打開它了：

下一節中，我們將來詳細介紹每一種類型應用的區別，以及我們應該怎樣選擇需要創建的應用類型。

1.3 選擇項目類型

iVX 當前支持以下類型的應用開發:

web app
微信小程序
支付寶小程序
釘釘小程序
IOS原生應用
Android 原生應用
Win/Mac 原生應用
H5應用

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-McTlUTV2-1623644085151)(images/screenshot_1623641949608.png)]

每一種類型的應用的基本開發模式是一致的，但有著不同的組件集與基本配置設定。因此，應用一旦創建后，就不能改變應用類型，我們需要在開發之前，決定需要創建的應用類型。

1.3.1 webApp/小程序/原生應用

此類型的應用，以下簡稱為“web App”，本質即網頁應用，可以發布為純的網頁應用（即html5網頁），或通過ivx平臺提供的打包服務，打包為各種小程序（目前支持微信、支付寶、釘釘）以及原生應用（ios、android以及windows/mac）。無論是小程序，還是原生應用，ivx平臺的打包服務都是通過webview（瀏覽器嵌入）的方法，將我們制作的頁面嵌入至其他應用中。同時，ivx提供了各種系統接口層，可以讓我們在應用中調用小程序或原生應用提供的接口，比如，地理位置，設備接口，文件接口等等。

在創建web App時，我們可以選擇相對定位的舞臺或絕對定位的舞臺：

相對定位與絕對定位的區別在于，相對定位使用比例進行整個頁面的顯示，而絕對定位則使用固定位置、大小進行整個頁面的顯示。

其中，相對定位的舞臺，舞臺和頁面默認為相對定位環境，即流式布局；絕對定位的舞臺，舞臺和頁面默認為絕對定位環境，即由用戶手動指定每個對象的位置。如果您熟悉iH5平臺，則可以選擇絕對定位環境，其體驗和iH5平臺完全一致。有關相對定位和絕對定位布局的說明。

無論是絕對定位還是相對定位的舞臺，默認創建時，窗口大小都為 375*667，即手機窗口大小。我們可以通過工具欄右上角的窗口大小切換按鈕，來將項目調整為PC或pad大小，來制作相應場景的應用：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-YRqApRSZ-1623644085152)(https://file3.ih5.cn/v35/files/185bf79970f9c14cc62219720d889ce8_13553_412_228.png)]

應用發布時，我們可以選擇任意一種系統支持的應用類型來發布：

1.3.2 微信小游戲

微信小游戲是小程序平臺新推出的一種小程序的特別類型。（在申請小程序時，需要將類型申請為游戲類，方可上傳小游戲）

小游戲可以選擇2D或3D類型，2D類型的小游戲，其內部是一個純畫布環境，3D類型的小游戲，其內部是一個3D世界。由于微信小游戲的小游戲根必須指定一種環境類型，因此我們只能創建純2D或純3D的小游戲，無法嵌套。

小游戲除了可以上傳至微信平臺，也可以直接發布為網頁應用，在瀏覽器中打開與傳播：

1.3.3 微信小程序（原生組件）

微信小程序（原生組件），是一種特有的微信小程序類型。其中組件使用了小程序提供的原生組件，以及在此基礎上擴展的組件。此種類型的小程序和第一種web App版本的小程序各有優勢，我們可以根據自己的需求來選擇需要制作的小程序類型。兩種微信小程序的區別，我們將在下一節中詳細展開。

原生組件的微信小程序，和微信小游戲類似，也可以直接上傳至小程序平臺，或直接發布為網頁應用（H5）：

當前，由于新版（v41版本）ivx編輯器的升級版數據邏輯處理機制和此類型微信小程序暫時不兼容，因此，此類型的小程序，依舊將使用舊版（v40）版ivx編輯器。待新版做了兼容后，將再行替換。

兩種微信小程序的區別

如上一節所述，ivx平臺創建微信小程序有兩種選擇，第一種是通用的web App，第二種是原生組件的微信小程序。

為了要了解這兩種小程序的區別，我們先來了解一下微信小程序的原理：

微信小程序是微信開發的一套應用平臺，其主要由三部分組成：

微信內置瀏覽器
內置JS解析引擎
原生微信app應用通信層

其中，內置瀏覽器負責界面的渲染，JS解析引擎負責邏輯的處理，兩者通過原生app應用通信層來交互。微信這樣設計的初衷是將界面的渲染以及邏輯的運行分離，以更好的控制應用結構的整潔性，并在一定程度上提高應用性能。

另外，微信小程序也進一步提供了webview（網頁瀏覽器組件），可以直接嵌入一個在線的網頁應用，此時，UI的渲染和JS邏輯的解析，就和普通網頁應用一樣，全部在webview瀏覽器中實現。

因此，微信小程序提供了兩種應用實現的方法，一種是使用默認的系統（渲染與JS解析分離），一種是使用webview嵌入（純網頁運行，渲染與JS解析合一）。這兩種實現的方法，就對應了ivx中的兩種類型的小程序，其中第一種對應微信小程序（原生組件），第二種對應通用的web App發布成的微信小程序。

了解了兩種小程序的原理之后，我們再來對比一下兩者的優劣。

原生微信小程序的核心優勢是：

支持個人版小程序的發布，由于webview組件僅對企業版小程序開放，因此個人所有者申請的小程序，無法使用，因此，如果您要以個人名義發布一個小程序，只能使用原生組件的微信小程序；
支持一些原生小程序UI組件的嵌入，比如直播組件，廣告組件，這些組件是小程序在webview之外提供的組件，不能被嵌入在網頁中，只能通過原生的小程序組件添加；
首屏加載更快，由于web App版小程序，需要同過網頁組件加載遠程的URL地址，因此，初次打開小程序時，有一個額外的加載過程，而原生小程序組件的應用包，是直接上傳至小程序平臺，微信會自動進行緩存，因此首次打開應用會快2-3秒鐘。

web App版小程序的核心優勢是：

支持動效、時間軸動畫，由于微信小程序原生組件的UI渲染與邏輯引擎的分離，導致其動畫控制性能較差，大多數動畫都明顯卡頓，無法商用，因此，我們在原生微信小程序中去掉了動畫相關功能，但在web App版本的小程序中，由于其本質就是一個網頁應用，自然就支持所有網頁應用中的動畫功能；
可動態更新，不用二次審核，由于web App小程序的本質是在小程序中嵌入了一個網頁，因此，只要發布網頁版本的應用，小程序內容就自動更新了，不需要通過小程序的二次審核；
支持畫布，3D世界，盡管原生小程序組件也提供了畫布接口，但其功能非常簡陋基礎，無法做到ivx提供的各種畫布與3D世界對象，因此，畫布和3D世界相關的功能只有在web App版的小程序中才有，比如，我們如果有做一個打印畫布的海報生成功能，只能使用web App版小程序；
更豐富的擴展組件，原生小程序由于在網頁開發中添加了諸多限制，許多擴展組件需要重新開發，且開發難度較大，因此web App有更加豐富的擴展組件；

關于兩者的性能對比：
盡管微信小程序官方宣稱原生小程序組件的運行性能更好，我們經過多番測試之后，除了首次打開速度，在應用運行時并未發現web App版小程序和原生組件小程序的區別，反而，由于web App版本小程序支持更豐富的瀏覽器接口（原生小程序特意封禁了許多瀏覽器接口），其整體體驗會更加流暢一些。大家也可以根據自己的應用，對比一下兩者區別，然后反饋給我們。