1.1 iVX 線上集成環(huán)境進入

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

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

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

1.2 創(chuàng)建項目

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

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

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

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

下一節(jié)中，我們將來詳細介紹每一種類型應用的區(qū)別，以及我們應該怎樣選擇需要創(chuàng)建的應用類型。

1.3 選擇項目類型

iVX 當前支持以下類型的應用開發(fā):

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

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

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

1.3.1 webApp/小程序/原生應用

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

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

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

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

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

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

應用發(fā)布時，我們可以選擇任意一種系統(tǒng)支持的應用類型來發(fā)布：

1.3.2 微信小游戲

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

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

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

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

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

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

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

兩種微信小程序的區(qū)別

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

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

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

微信內置瀏覽器

內置JS解析引擎

原生微信app應用通信層

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

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

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

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

原生微信小程序的核心優(yōu)勢是：

支持個人版小程序的發(fā)布，由于webview組件僅對企業(yè)版小程序開放，因此個人所有者申請的小程序，無法使用，因此，如果您要以個人名義發(fā)布一個小程序，只能使用原生組件的微信小程序；

支持一些原生小程序UI組件的嵌入，比如直播組件，廣告組件，這些組件是小程序在webview之外提供的組件，不能被嵌入在網頁中，只能通過原生的小程序組件添加；

首屏加載更快，由于web App版小程序，需要同過網頁組件加載遠程的URL地址，因此，初次打開小程序時，有一個額外的加載過程，而原生小程序組件的應用包，是直接上傳至小程序平臺，微信會自動進行緩存，因此首次打開應用會快2-3秒鐘。

web App版小程序的核心優(yōu)勢是：

支持動效、時間軸動畫，由于微信小程序原生組件的UI渲染與邏輯引擎的分離，導致其動畫控制性能較差，大多數(shù)動畫都明顯卡頓，無法商用，因此，我們在原生微信小程序中去掉了動畫相關功能，但在web App版本的小程序中，由于其本質就是一個網頁應用，自然就支持所有網頁應用中的動畫功能；

可動態(tài)更新，不用二次審核，由于web App小程序的本質是在小程序中嵌入了一個網頁，因此，只要發(fā)布網頁版本的應用，小程序內容就自動更新了，不需要通過小程序的二次審核；

支持畫布，3D世界，盡管原生小程序組件也提供了畫布接口，但其功能非常簡陋基礎，無法做到ivx提供的各種畫布與3D世界對象，因此，畫布和3D世界相關的功能只有在web App版的小程序中才有，比如，我們如果有做一個打印畫布的海報生成功能，只能使用web App版小程序；

更豐富的擴展組件，原生小程序由于在網頁開發(fā)中添加了諸多限制，許多擴展組件需要重新開發(fā)，且開發(fā)難度較大，因此web App有更加豐富的擴展組件；

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

總結

以上是生活随笔為你收集整理的iVX 基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。