APICloud 開發app 之 工具：Sublime插件

原創 AdministratorHack 2020-02-26 02:40

http://docs.apicloud.com/Dev-Tools/sublime-apicloud-plugin

概述

讓HTML5前端開發者使用Sublime快速開發原生蘋果與安卓APP。 Sublime APICloud Plugins是爲HTML5前端開發者提供的一套開源的Sublime Text擴展插件，包括：應用管理、應用框架、頁面模板、代碼提示、代碼管理、Widget打包、真機同步、日誌輸出、管理自定義AppLoader等功能，其他的功能插件也在不斷增加，這些插件已被Package Control成功收錄，開發者可以直接在Sublime Text3中下載安裝；所有插件都已開源，開發者也可以在此基礎上按需求擴展自己的插件。

Sublime APICloud 插件的安裝和使用說明

當前支持環境

  • Sublime Text 3
  • Windows 或 Mac
  • Android 手機
  • iOS 手機

首先安裝 Package Control

1、通過快捷鍵 ctrl+` 或 View > Show Console 菜單打開控制檯

2、粘貼下面的代碼後，按回車進行安裝

3、參考資料Package Control 安裝

4、如果不通過Package Control安裝，可在APICloud 官網下載插件後解壓到Sublime text3 的Packages 目錄下即可。圖片說明

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

安裝真機同步插件

1、快捷鍵 'Ctrl + Shift + P' （Mac 爲：'Command + Shift + P'）（或頂部菜單 -> Tools -> Command Palette），輸入 'install'，選擇 'Package Control:Install Package'

圖片說明

2、彈出的插件搜索框輸入 'apicloud'，選擇 'APICloudLoader'，回車等待安裝完畢，重啓 Sublime Text，即可使用。

圖片說明

安裝 APICloud 代碼提示插件

1、快捷鍵 'Ctrl + Shift + P' （Mac 爲：'Command + Shift + P'）（或頂部菜單 -> Tools -> Command Palette），輸入 'install'，選擇 'Package Control:Install Package'

圖片說明

2、彈出的插件搜索框輸入 'apicloud'，選擇 'APICloudSnippets'，回車等待安裝完畢，重啓 Sublime Text，即可使用。

圖片說明

安裝本地打包插件

1、快捷鍵 'Ctrl + Shift + P' （Mac 爲：'Command + Shift + P'）（或頂部菜單 -> Tools -> Command Palette），輸入 'install'，選擇 'Package Control:Install Package'

圖片說明

2、彈出的插件搜索框輸入 'apicloud'，選擇 'APICloudPackage'，回車等待安裝完畢，重啓 Sublime Text，即可使用。

圖片說明

創建新應用

1、在任意目錄新建一個項目文件夾，名字自定義，比如叫 'workspace'

2、把 'workspace' 文件夾拖至 Sublime Text 開發工具，Sublime Text 左側出現了一個新的項目文件夾

3、右鍵點擊 'workspace' 文件夾 -> 彈出菜單頂部選擇 '新建APICloud項目' -> 根據需要選擇相應的應用框架

圖片說明

4、底部彈出一個輸入框 -> 填入 APICloud 項目名稱 -> 點擊回車鍵

圖片說明

5、新項目創建成功

圖片說明

創建APICloud文件

點擊此菜單項將在新建文件中生成默認的html相關模板內容。

壓縮 Widget 包，用於代碼上傳

1、打開本地應用文件夾的 config.xml 文件，把其中的 id 修改成雲平臺創建的應用 ID

圖片說明

2、右鍵點擊應用項目文件夾 -> 選擇 '壓縮Widget包'，壓縮後的 zip 包位於同級目錄，壓縮後的 zip 包可直接用於 APICloud 平臺的代碼上傳功能。

圖片說明

官方 Loader 真機同步

Android設備真機同步

1、啓動Android模擬器，例如：海馬玩模擬器下載，或通過 USB 線連接 Android 手機，保證 'USB 調試' 已打開，等待手機與電腦連接成功

2、右鍵點擊 APICloud 應用文件夾 -> 彈出菜單頂部選擇 'Android真機同步..'

圖片說明

3、等待 Android 手機自動打開剛同步的應用，代表同步成功

圖片說明

4、真機同步快捷鍵。在widget項目的任意編輯頁面通過快捷鍵可直接進行真機同步。默認快捷鍵windows: ctrl+r；mac: command+r。也支持用戶修改，修改位置：插件安裝目錄\Sublime-APICloud-Loader\ 下文件 Default (Windows).sublime-keymap(針對windows系統)或 Default (OSX).sublime-keymap(針對mac系統)。

注意事項：

Mac 系統用戶請確保插件包中 tools 目錄（Mac 系統：/Users/用戶名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/tools）下的 adb 命令有執行權限，可通過 ls -al adb 查看該命令是否有執行權限。 通過 chmod +x adb 爲adb添加執行權限。

iOS設備真機同步

iOS設備在 MAC 系統和Windows 系統下真機同步需要的環境略有不同，Windows系統需要安裝配置iTunes 和 iTools, 同時下載 32位JRE環境到插件包中;MAC系統只需安裝 JDK 1.7 即可。（暫不支持iOS 10 以上版本的手機。）

1、Windows 下 iOS 真機同步安裝 iTunes 和 iTools (MAC 下無需此步驟)。 下載地址分別爲 iTunes 下載。iTools 下載。 安裝成功後需要把相關目錄放到系統環境變量中。環境變量設置如下：

注意：MAC系統無需此配置，只需要安裝JDK即可。 右鍵我的電腦->屬性 將彈出 "系統" 界面圖片說明圖片說明圖片說明

Path 變量的設置 爲iTools和iTunes安裝位置 (如果此時已開啓Sublime，需要重啓Sublime)，如 （ C:\ProgramData\ThinkSky\iTools\Driver\;C:\Program Files (x86)\Common Files\Apple\Apple Application Support\; ）圖片說明

2、iOS 真機同步通過Java實現同步功能，Windows環境需要從官網下載32位JRE環境並保存到package中 tools 目錄下並解壓。JRE可以通過JRE官網下載獲得。 MAC系統可直接安裝JDK即可。圖片說明

3、設置好相關環境後通過 USB 線連接 iOS 手機，等待手機與電腦連接成功

4、右鍵點擊 APICloud 應用文件夾 -> 彈出菜單頂部選擇 'iOS真機同步..'

圖片說明

5、由於 iOS 不會自動啓動應用，需要等待 Sublime 提示同步完成代表同步完成(鑑於Windows系統會回顯同步過程，對於無設備連接時，回顯界面會停留在"start listening..." 然後退出，此時Sublime也會顯示同步完成；Mac系統由於沒有回顯，會正常提示"未發現連接的設備")。

圖片說明

6、iOS真機同步快捷鍵。在widget項目的任意編輯頁面通過快捷鍵可直接進行真機同步。默認快捷鍵windows: ctrl+alt+r；mac: command+alt+r。也支持用戶修改，修改位置：插件安裝目錄\Sublime-APICloud-Loader\ 下文件 Default (Windows).sublime-keymap(針對windows系統)或 Default (OSX).sublime-keymap(針對mac系統)。

官方 Loader 如何更新

1、到文檔的 Download 頁面下載最新的官方 AppLoader

2、Android的官方loader替換已安裝的真機同步插件裏的官方 AppLoader（\插件安裝目錄\Sublime-APICloud-Loader\appLoader\apicloud-loader\），需要重命名爲 'load.apk'。

3、iOS的官方loader替換已安裝的真機同步插件裏的官方 AppLoader（\插件安裝目錄\Sublime-APICloud-Loader\appLoader\apicloud-loader-ios\），需要重命名爲 'load.ipa'。

自定義 Loader 真機同步

1、在 APICloud 雲平臺先創建一個應用，比如叫：moduleTest

2、用 Sublime Text 在本地也創建一個應用（方法同創建新應用），名字自定義，比如也叫：moduleTest

圖片說明

3、打開本地創建的 moduleTest 應用的 config.xml 文件，把其中的 id 修改成雲平臺創建的應用 ID

圖片說明

4、右鍵點擊本地應用 moduleTest 文件夾 -> 彈出菜單頂部選擇'壓縮Widget包..'

圖片說明

5、進入 APICloud 雲平臺的代碼頁面 -> 點擊'上傳代碼'按鈕 -> 點擊'選擇zip'按鈕 -> 選擇剛纔的壓縮包 -> 等待上傳成功

圖片說明

6、在 APICloud 控制檯中，配置好應用的端設置、證書、包名等，再進入 -> 模塊頁面 -> 添加自己需要的模塊 真機同步快捷鍵

7、到 APICloud 平臺 -> 模塊頁面 -> 選擇'自定義Loader'標籤

圖片說明

8、點擊自定義 Loader 編譯按鈕 -> 等待編譯完成 -> 下載成功

圖片說明圖片說明

9、Android 應用的真機同步： 找到 Sublime Text 安裝目錄 -> D:\安裝目錄\Data\Packages\APICloudLoader\appLoader\custom-loader（Mac 系統爲：/Users/用戶名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/appLoader/custom-loader）

iOS 應用的真機同步： 找到 Sublime Text 安裝目錄 -> D:\安裝目錄\Data\Packages\APICloudLoader\appLoader\custom-loader-ios（Mac 系統爲：/Users/用戶名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/appLoader/custom-loader-ios）

10、新建一個文件夾，以雲端應用 ID 命名，把剛下載的自定義 Loader 放入此目錄，Android 應用重命名爲 'load.apk,iOS 應用則爲load.ipa'。

圖片說明

11、獲取應用包名。如圖：

圖片說明

12、新建一個 'load.conf' 文件（version - 自定義 Loader 版本號，packageName - 應用包名），格式如圖：

注意：iOS平臺的自定義loader，如果沒有上傳自己的iOS證書，則所有app項目的自定義loader統一包名爲“com.api.customloader”

圖片說明

13、右鍵點擊本地應用 moduleTest 文件夾 -> 彈出菜單頂部選擇'Android真機同步..' 或 'iOS真機同步..'

14、等待真機同步完成， Android 手機自動打開剛同步的應用，代表同步成功，iOS不會自動打開應用，需要手動打開同步完的應用。

15、暫不支持iOS 10 以上版本的手機。

WiFi真機同步和WiFi真機預覽

請看專題文檔：Sublime WiFi真機同步和WiFi真機預覽(http://docs.apicloud.com/Dev-Tools/sublime-wifi-sync)

WiFi日誌輸出

安裝WiFi日誌輸出插件：

WiFi日誌輸出插件APICloudWiFiDebugView，包含在APICloud Sublime Text插件包中。請下載最新的插件包，拷貝到Package Control管理目錄下。

啓動WiFi日誌輸出插件：

啓動日誌快捷鍵[ctrl]+[alt]+[w]

注意事項:由於APICloudWiFiDebugView插件部分功能依賴於APICloudWiFiSync插件，所以最好將APICloudWiFiSync插件也更新到最新版本。 安裝插件後，需重啓Sublime和WiFi真機同步服務

本地打包應用

注意事項：

Mac 系統用戶請確保插件包中 tools 目錄（Mac 系統：/Users/用戶名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/tools/mac）下的 aapt,apktool,zipalign 命令有執行權限，可通過 ls -al aapt 查看某個命令(如aapt)是否有執行權限。 通過 chmod +x aapt 爲aapt添加執行權限，其他命令權限修改與其相同。

右鍵點擊應用文件夾 -> 彈出菜單選擇 '本地打包...' -> 等待打包完成，打好的apk包在應用文件夾的同級目錄，可以直接用於安裝。

圖片說明

圖片說明

使用 SVN

Windows下使用 SVN

1、Windows下 SVN 插件推薦使用官方提供的插件。可在官方Sublime-TortoiseSVN插件進行下載。下載壓縮包解壓到 \插件安裝目錄 ( 頂部菜單 -> Preferences -> Browse Packages )。確保文件名爲 TortoiseSVN ，如圖所示：

圖片說明

2、請確保系統安裝了 TortoiseSVN 客戶端，TortoiseSVN 客戶端下載。

圖片說明

3、打開ST3 ，在ST3菜單中 Preferences -> Package Setting -> TortoiseSVN -> Settings Defalut 打開TortoiseSVN的配置文件，配置tortoiseproc_path爲系統TortoiseSVN客戶端的可執行程序。如"tortoiseproc_path": "C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe"

圖片說明

圖片說明

4、通過右鍵目錄進行相關 SVN 操作，插件會自動彈出 TortoiseSVN 的客戶端界面。

圖片說明

Mac下使用 SVN

對於Mac系統(Windows也支持)可安裝下邊的第三方插件。

1、首先安裝 SVN 插件

快捷鍵 'Ctrl + Shift + P' （Mac 爲：'Command + Shift + P'）（或頂部菜單 -> Tools -> Command Palette），輸入 'install'，選擇 'Package Control:Install Package'

2、彈出的插件搜索框輸入 'SVN'，選擇第一項，回車等待安裝完畢，重啓 Sublime Text，即可使用。

圖片說明

3、右鍵選擇任一空文件夾，彈出菜單選擇 'SVN' -> 'Checkout...'，底部彈出的輸入框，按規定格式輸入用戶名，密碼及 SVN 地址，輸入完畢按回車，等待項目檢出完畢。

圖片說明

圖片說明

格式爲：svn://用戶名:密碼@svn地址

APICloud 平臺的 SVN 分支密碼在代碼頁面獲取：

圖片說明

正確的例子：svn://[email protected]:[email protected]/A6997434778733/tempTest

4、右鍵點擊剛檢出項目裏的文件，彈出菜單 -> 'SVN'，可以看到更多的 SVN 功能：'更新'、'提交'、或'比較'等等。

圖片說明

Mac版本常見問題：

1、Mac版本的Sublime Text運行SVN插件需要使用相關的svn命令，所以要在Mac上安裝Xcode。 2、如果已經安裝了Xcode但是還是找不到svn命令，可以通過xcode-select --switch XcodePath來指定Xcode路徑。

代碼提示功能

確保 APICloud 代碼提示插件安裝成功，無需額外配置即可使用，在 JS 文件或 <script> 標籤內部可以觸發提示。

  • api 對象上面的屬性及方法，在輸入 api- 時觸發提示，按 '↑ ↓方向鍵' 選擇需要的 API，選中後按回車鍵完成代碼補全。

圖片說明

  • $api 對象上面的方法，在輸入 apijs- 時觸發提示，按 '↑ ↓方向鍵' 選擇需要的 API，選中後按回車鍵完成代碼補全。

圖片說明

  • 模塊代碼提示：以 fs 模塊爲例，先輸入 'api-req' 觸發代碼提示，require 相應的模塊，然後輸入'模塊名-'時可以觸發模塊代碼提示，按 '↑ ↓方向鍵' 選擇需要的 API，選中後按回車鍵完成代碼補全。

圖片說明圖片說明

  • 如果想新增自定義的模塊代碼提示，可以參照Sublime APICloud 語法提示文檔，把新建的 '.sublime-snippet' 文件放入插件目錄（頂部菜單 -> Preferences -> Browse Packages -> User -> 自己命名的新建文件夾中）。

回顯Android調試日誌

1、首先安裝 ADBView 插件

快捷鍵 'Ctrl + Shift + P' （Mac 爲：'Command + Shift + P'）（或頂部菜單 -> Tools -> Command Palette），輸入 'install'，選擇 'Package Control:Install Package'

2、彈出的插件搜索框輸入 'ADBView'，選擇第一項，回車等待安裝完畢，

圖片說明

3、在ST3菜單中 Preferences -> Package Setting -> ADBView-> Settings Users 打開ADBView的配置文件，配置"adb_args": ["logcat", "-v", "time","-s" ,"app3c"]； 配置"adb_command"中adb.exe(Mac系統爲adb)所在路徑。(adb.exe可在官方loader的插架包中找到，Windows系統：插件安裝目錄\Sublime-APICloud-Loader\tools; Mac 系統：/Users/用戶名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/tools)。配置好後ADBView即可使用。圖片說明

4、連接移動設備，通過快捷鍵ctrl+alt+d即可打開當前回顯日誌窗口。圖片說明

代碼提示功能

確保 APICloud 代碼提示插件安裝成功，無需額外配置即可使用，在 JS 文件或 <script> 標籤內部可以觸發提示。

  • api 對象上面的屬性及方法，在輸入 api- 時觸發提示，按 '↑ ↓方向鍵' 選擇需要的 API，選中後按回車鍵完成代碼補全。

圖片說明

  • $api 對象上面的方法，在輸入 apijs- 時觸發提示，按 '↑ ↓方向鍵' 選擇需要的 API，選中後按回車鍵完成代碼補全。

圖片說明

  • 模塊代碼提示：以 fs 模塊爲例，先輸入 'api-req' 觸發代碼提示，require 相應的模塊，然後輸入'模塊名-'時可以觸發模塊代碼提示，按 '↑ ↓方向鍵' 選擇需要的 API，選中後按回車鍵完成代碼補全。

圖片說明圖片說明

  • 如果想新增自定義的模塊代碼提示，可以參照Sublime APICloud 語法提示文檔，把新建的 '.sublime-snippet' 文件放入插件目錄（頂部菜單 -> Preferences -> Browse Packages -> User -> 自己命名的新建文件夾中）。

開源地址

Sublime-APICloud-Plugins開源地址：https://github.com/apicloudcom?utf8=✓&query=sublime


補充一句：這個超級詳細的文檔看着就比較開心
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章