開發(fā)工具 APICloud Studio 3

APICloud Studio 3使用說明

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

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

• svn的使用說明

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

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

• mac版運(yùn)行的時(shí)候，studio3的存放位置不要放在Downloads文件夾下

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

• 更新需知

mac上如果有更新提示，點(diǎn)擊重啟更新后，只需等待重啟即可，無需手動(dòng)重啟，因?yàn)槭侨扛拢貑r(shí)需要等待大約30秒左右。

• wifi/usb同步需知

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

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

創(chuàng)建項(xiàng)目

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

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

項(xiàng)目導(dǎo)入

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

• 本地導(dǎo)入: 導(dǎo)入時(shí)會(huì)校驗(yàn)導(dǎo)入的項(xiàng)目是否為apicloud項(xiàng)目

• 云端檢出: 從apicloid后臺(tái)導(dǎo)入項(xiàng)目

  創(chuàng)建模版文件

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

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

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

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

stml編譯

菜單欄--編譯項(xiàng)目功能，會(huì)編譯項(xiàng)目下的stml文件，編譯結(jié)果查看控制臺(tái)輸出

云編譯

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

自定義loader

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

WiFi同步 ?

• 查看WiFi同步的ip和端口號(hào)

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

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

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

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

注1:如果項(xiàng)目中有stml文件，studio3會(huì)先編譯stml文件

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

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

WiFi自動(dòng)同步

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

修改wifi端口號(hào)

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

USB同步

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

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

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

注1:如果項(xiàng)目中有stml文件，studio3會(huì)先編譯stml文件

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

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

html和stml實(shí)時(shí)預(yù)覽

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

wifi真機(jī)預(yù)覽

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

代碼管理

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

注：

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

代碼提交

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

在文件或文件夾上右鍵，點(diǎn)擊 更新到云端

更新代碼

1、在源碼管理界面，點(diǎn)擊更多按鈕，選擇Update，更新項(xiàng)目

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

3、編輯器左下角選擇更新按鈕，更新項(xiàng)目

4、在文件或文件夾上右鍵，點(diǎn)擊 從云端更新

查看日志

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

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

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

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

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

2、js代碼提示: studio3將api對(duì)象和幾乎所有平臺(tái)模塊都做了js封裝

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

中英文切換

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

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

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

注意：

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

增量編譯微信小程序

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

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

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

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

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

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

編譯小程序功能只在Windows和Mac平臺(tái)下生效

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

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