阿里系手淘weex學習第一天

 

官網原文：https://weex.apache.org/zh/tools/extension.html#功能

功能

• 創建Weex項目.
• 支持在VSCode對Weex的語法支持.
• 檢查iOS和Android開發環境.
• 通過VSCode啟動Weex調試工具.
• 在熱更新模式下啟動Android及iOS工程.

VSCode拓展包包含下面的包:

• weex-new-project - 用於在VSCode中創建Weex項目.

• weex-lang - 用於在VSCode中對最新的Weex語法進行支持.

• weex-doctor - 用於檢查iOS和Android本地開發環境.

• weex-debugger - 用於在VSCode中啟動Weex調試工具.

• weex-run - 用於在熱更新模式下啟動Android及iOS工程.

你可以通過安裝 vscode-weex 拓展來安裝上面的所有包。

安裝

在 VSCode 拓展面板搜索 vscode-weex。

拓展包

weex-new-project

VSCode環境中創建Weex工程。

創建Weex工程

如何使用

1. 打開VSCode, 輸入 COOMMAND + SHIFT + P or CTRL + SHIFT + P 打開VSCode命令行。
2. 輸入 weex new project。
3. 輸入 Enter, 然后選擇你要創建的項目地址。

截圖

添加Android工程

如何使用

1. 打開VSCode, 輸入 CMD + SHIFT + P or CTRL + SHIFT + P打開VSCode命令行。
2. 輸入 weex platform add android project
3. 輸入 Enter

截圖

添加iOS工程

如何使用

1. 打開VSCode, 輸入  CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline。
2. 輸入 weex platform add iOS project。
3. 輸入 Enter。

weex-lang

VSCode針對Weex的語法支持。

更詳細的內容查，查看: vscode-weex-lang.

截圖

weex-doctor

VSCode針對開發環境的檢查。

如何使用

1. 打開VSCode，輸入 CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline。
2. 輸入 weex doctor。
3. 輸入 Enter。

截圖

weex-debugger

VSCode中啟動Weex調試工具。

如何使用

1. 打開VSCode，輸入 CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline.
2. 輸入 weex debug
3. 輸入 Enter

更多細節，查看: weexteam/weex-debugger

weex-run

VSCode環境中運行iOS/Android/Web工程。

如何使用

1. 打開通過VSCode拓展或weex-toolkit生成的項目.
2. 在VSCode調試面板下運行項目.
3. 你可以通過修改 .vscode/launch.json 進行配置.

截圖

Web

iOS

結果

Android

結果

提示

• 在運行iOS或者Android項目前請確保你添加可對應工程 （路徑與 .vscode/launch.json中的projectPath值保持一致）你可以通過使用 weex-new-project 來添加客戶端工程。

• 如果運行失敗了，你可以通過 weex-doctor 檢查一下你的本地開發環境。

• iOS環境依賴XCode，安裝后請打開XCode以便完成后續的初始化工作。

• Android環境依賴Android studio, Java SDK 1.8 (Windows需要設置Java的環境路徑，教程), Android SDK Platform 26 (通過Android studio安裝), Android SDK Build-Tools 26 (通過Android studio安裝), Android virtual device (通過Android studio安裝)

• VSCode中進行代碼斷點調試目前還未支持