開發(fā)工具 APICloud Studio 3

APICloud Studio 3使用說明

APICloud Studio 3基于業(yè)界領(lǐng)先的代碼編輯器-Vscode深度定制，幫助您快速輕松地構(gòu)建多端應(yīng)用，本章將向您詳細介紹Studio3的相關(guān)功能和使用流程。立即下載Studio3

整體預(yù)覽 注意事項

• svn的使用說明

1. mac版的studio3中使用的是mac本地自定的svn工具
2. windows版的studio3中有內(nèi)置的svn工具，如果本地沒有安裝svn，會使用內(nèi)置的svn工具，如果本地有安裝的svn工具并且安裝了命令行選項(安裝svn的是有控制選項，默認不安裝)，會使用本地安裝的svn工具
3. linux版的studio3需要手動安裝svn工具(可以通過命令行安裝)

• 用studio2導(dǎo)出的到本地的項目，先提交代碼，再用studio3云端檢出

• mac版運行的時候，studio3的存放位置不要放在Downloads文件夾下

• 在IDE上一些跟平臺相關(guān)的操作，都需要驗證登錄。IDE可以和云端同時在線，但是多個ide是不可以用一個賬號同時在線的。

• 更新需知

mac上如果有更新提示，點擊重啟更新后，只需等待重啟即可，無需手動重啟，因為是全量更新，重啟時需要等待大約30秒左右。

• wifi/usb同步需知

在每次打開IDE后，在進行同步之前最好先進行全量同步，之后再進行增量同步

登錄 ? 界面右上角點擊用戶，彈出登錄界面，輸入用戶名，密碼登錄，如圖所示

創(chuàng)建項目

點擊菜單欄項目-新建項目，在創(chuàng)建項目界面按照內(nèi)容提示輸入項目信息，如圖所示

創(chuàng)建項目的界面有一個復(fù)選框，用來選擇項目的類型(App(必選), miniapp),創(chuàng)建完成后會根據(jù)所選類型，生成不同類型的目錄，對應(yīng)項目類型，如圖所示

項目導(dǎo)入

菜單欄選擇項目-->導(dǎo)入項目，會彈出項目來源的復(fù)選框

• 本地導(dǎo)入: 導(dǎo)入時會校驗導(dǎo)入的項目是否為apicloud項目

• 云端檢出: 從apicloid后臺導(dǎo)入項目

  創(chuàng)建模版文件

studio3上可以創(chuàng)建一些模版文件，比如html，stml，js，css，json等

• 在項目根目錄上右鍵，可以創(chuàng)建html，js，css，json文件

• 在pages目錄上右鍵，可以創(chuàng)建stml，js，css文件

• 在res目錄上右鍵，可以創(chuàng)建key.xml, info.plist, mainfest.xml等文件

stml編譯

菜單欄--編譯項目功能，會編譯項目下的stml文件，編譯結(jié)果查看控制臺輸出

云編譯

在App類文件夾上右鍵，選擇云編譯功能，打開云編譯界面，做相應(yīng)的操作， 如圖所示

自定義loader

在App類文件夾上右鍵，選擇自定義loader功能，打開自定義loader界面，做相應(yīng)的操作， 如圖所示

WiFi同步 ?

• 查看WiFi同步的ip和端口號

1. 頂部菜單 - 終端 - 設(shè)備列表，彈出復(fù)選框，選擇通過WIFI連接新設(shè)備，查看ip
2. 左側(cè)功能欄，選擇真機同步按鈕，也可以彈出復(fù)選框，選擇通過WIFI連接新設(shè)備，查看ip
3. 注：連接時wifi設(shè)備要和studio3連接在同一個wifi下

在項目名上右鍵，會彈出wifi全量和增量同步菜單，做相應(yīng)的操作(同步所有wifi設(shè)備)， 如圖所示

如有wifi設(shè)備連接時，頂部菜單 - 終端 - 設(shè)備列表，會彈出所連接的wifi設(shè)備，選擇相應(yīng)的設(shè)備進行同步

如有wifi設(shè)備連接時，選擇左側(cè)功能欄--真機同步按鈕，會彈出所連接的wifi設(shè)備，選擇相應(yīng)的設(shè)備進行同步

注1:如果項目中有stml文件，studio3會先編譯stml文件

注2:進行指定設(shè)備同步時，會有相關(guān)的標記做指示，如圖所示:

(1) 相關(guān)設(shè)備前有WIFI標記，表示該設(shè)備處于wifi連接狀態(tài)； (2) 相關(guān)設(shè)備前有USB標識，標識該設(shè)備處于usb連接狀態(tài)； (3) 同一個設(shè)備既可以處于wifi連接狀態(tài)，也可以處于usb連接狀態(tài)；進行相關(guān)操作時相關(guān)的狀態(tài)

WiFi自動同步

打開設(shè)置界面，依次點擊 擴展--APICloud 勾選 Auto Sync(使用之前，注意該設(shè)置的使用說明)

修改wifi端口號

打開設(shè)置界面，選擇常用設(shè)置，修改wifi端口號

USB同步

在項目名上右鍵，會彈出usb同步相關(guān)菜單，做相應(yīng)的操作(同步所有usb設(shè)備)， 如圖所示

如有usb設(shè)備連接時，頂部菜單 - 終端 - 設(shè)備列表，會彈出所連接的usb設(shè)備，選擇相應(yīng)的設(shè)備進行同步

如有usb設(shè)備連接時，選擇左側(cè)功能欄--真機同步按鈕，會彈出所連接的usb設(shè)備，選擇相應(yīng)的設(shè)備進行同步

注1:如果項目中有stml文件，studio3會先編譯stml文件

注2:進行指定設(shè)備同步時，會有相關(guān)的標記做指示，如圖所示:

(1) 相關(guān)設(shè)備前有WIFI標記，表示該設(shè)備處于wifi連接狀態(tài)； (2) 相關(guān)設(shè)備前有USB標識，標識該設(shè)備處于usb連接狀態(tài)； (3) 同一個設(shè)備既可以處于wifi連接狀態(tài)，也可以處于usb連接狀態(tài)；進行相關(guān)操作時相關(guān)的狀態(tài)

html和stml實時預(yù)覽

在html或stml編輯頁面，右鍵彈出實時預(yù)覽菜單，預(yù)覽html或stml頁面(如果預(yù)覽的是stml頁面，studio3會先編譯stml文件)， 如圖所示

wifi真機預(yù)覽

在html或stml編輯頁面，右鍵彈出WiFi真機實時預(yù)覽菜單，同步在wifi設(shè)備上預(yù)覽html或stml頁面(如果預(yù)覽的是stml頁面，studio3會先編譯stml文件)

代碼管理

studio3的代碼管理依賴svn并基于vscode的源代碼管理模塊(如下圖所示)實現(xiàn)

注：

• windows版內(nèi)置了svn工具，如果開發(fā)過程中。 內(nèi)置的svn出現(xiàn)問題的時候，可以自行安裝svn工具(安裝的時候要把命令行選項勾選上)，windows下是有默認安裝路徑的可以不用配置路徑，如果自定義了安裝路徑，安裝完成后在studio3中配置svn的路徑(設(shè)置--首選項--擴展--svn--配置svn path)，注意配置的路徑是svn.exe具體路徑。
• mac版svn用的是系統(tǒng)自帶的svn工具
• linux版需要開發(fā)者自行安裝svn工具

代碼提交

在源碼管理界面，在需要提交的文件上右鍵，選擇Commit Selected，然后輸入提交日志

在文件或文件夾上右鍵，點擊 更新到云端

更新代碼

1、在源碼管理界面，點擊更多按鈕，選擇Update，更新項目

2、打開命令面板，輸入svn:update,有兩個選項，(1)Update selected:更新代碼編輯頁面打開的文件 (2) Update:更新項目

3、編輯器左下角選擇更新按鈕，更新項目

4、在文件或文件夾上右鍵，點擊 從云端更新

查看日志

在提交代碼之前想要查看文件的提交日志，可以在文件上右鍵-->顯示日志，可以列出這個文件之前的提交日志,如下圖所示

代碼提示 studio3采用兩種方式的代碼提示

1、代碼片段: studio3內(nèi)置了api對象和幾乎所有平臺模塊的代碼片段

api對象下的代碼片段輸入方式:輸入api.接口名，選擇相應(yīng)的接口片段，回車即可完成一段代碼的自動輸入

模塊代碼片段輸入方式：輸入 模塊名.接口名 會有相關(guān)的代碼提示，選擇相應(yīng)的接口， 回車即可完成一段代碼的自動輸入

2、js代碼提示: studio3將api對象和幾乎所有平臺模塊都做了js封裝

輸入對象名，即可調(diào)出這個對象下的所有接口，選擇相應(yīng)的接口，回車，輸入左括弧，自動完成右括弧的輸入，同時，如果這個接口有參數(shù)時，也可提示這個接口的參數(shù)

中英文切換

代開命令面板，輸入:Configure Display Language,點擊,選擇相關(guān)的語言

在微信開發(fā)者工具預(yù)覽

項目根目錄下右鍵，點擊在微信開發(fā)者工具預(yù)覽，Studio3會先彈出輸入微信小程序的appid的輸入框(可以使用默認值，但是為了方便在微信開發(fā)者工具中調(diào)試，建議換成開發(fā)者自己在微信后臺申請的appid)，輸入完成后，Studio3會將當前項目編譯成微信小程序，并在當前項目的根目錄下生成out-mp目錄存放編譯后的小程序代碼

注意：

1、這一步的操作前提是本地需要安裝微信開發(fā)者工具 2、在windows平臺下，第一次操作時需要開發(fā)者手動選擇微信開發(fā)者工具安裝的根目錄，如果后期安裝路徑有更改，需要修改安裝路徑，具體操作為：打開Studio3 設(shè)置界面 -- 常用配置 -- 找到微信開發(fā)者工具的根目錄并配置

增量編譯微信小程序

經(jīng)過上一步的操作，會打開本地安裝微信開發(fā)者工具，如果項目中stml文件有改動，可以點擊增量編譯微信小程序，Studio3會增量編譯當前項目，編譯完成后，微信開發(fā)者工具有監(jiān)聽文件的更改的功能，會自動加載項目。

編譯為微信小程序【全量】

這一步的操作和增量編譯微信小程序主要的區(qū)別是:

1、會全量編譯當前項目下的所有stml文件 2、如果當項目中有非stml文件的改動，會影響到小程序的代碼，應(yīng)該進行這一步操作 3、這一步編譯出來的小程序代碼可用著release版本 tips1：

以上三步是調(diào)試小程序的主要功能，一般的操作流程應(yīng)該是：

1、在微信開發(fā)者工具預(yù)覽：這一步主要是用來確認微信小程序的appid和打開微信開發(fā)者工具 2、增量編譯微信小程序 | 編譯為微信小程序【全量】：這一步增量或全量編譯當前項目，微信開發(fā)者工具會自動同步文件的更改 tips2：

編譯小程序功能只在Windows和Mac平臺下生效

運行微信開發(fā)者工具，需要微信開發(fā)者工具處于登錄狀態(tài)

啟動微信開發(fā)者工具，需要打開服務(wù)端口，具體操作步驟為：打開微信開發(fā)者工具 -- 設(shè)置 -- 安全設(shè)置 -- 安全 -- 開啟服務(wù)端口