使用Ext JS社群版的快速模版：建立移動版應用程式

摘要： 註冊社群版 社群版的註冊地址如下： https://www.sencha.com/products/extjs/communityedition/?utm_source=snceb&utm_medium=email&utm_campaign=sncex...

註冊社群版

註冊社群版要注意的事情是儘量不要使用國內的如qq、阿里雲這樣的郵箱，很多時候會收不到註冊郵件，建議使用微軟、谷歌等公司的郵箱。

註冊後，會收到幾封電子郵件，有一封是用來重置登入密碼的，這個步驟一定要做，不然，在NMP中你就無法登入網站下載ext-gen等工具和包。還有一封標題為《Thank you for Requesting Ext JS Community Edition》的郵件也要看看，該郵件是為使用社群版提供支援的，單擊《tutorial 》會切換到使用教程。

安裝ext-gen

在VS Code的終端視窗中，輸入以下命令登入Sencha的NPM倉儲：

npm login --registry=https://sencha.myget.org/F/community/npm/ --scope=@sencha

命令執行後會提示輸入使用者帳號，這裡要注意的是需要將郵件地址中的“@”替換換“…”才是真正的登入帳號。

輸入完密碼和公開的郵件地址後，就可執行以下命令安裝ext-gen 了：

npm install -g @sencha/ext-gen

ext-gen 安裝完成後，輸入以下命令可以檢視幫助：

ext-gen --help

Sencha ExtGen v1.0.2 Community Edition - The Ext JS code generator

Quick Start: ext-gen -a

ext-gen app (-h) (-d) (-i) (-t 'template') (-m 'moderntheme') (-n 'name')

-h --helpshow help (no parameters also shows help)
-d --defaultsshow defaults for package.json
-i --interactiverun in interactive mode (question prompts will display)
-t --templatename for Ext JS template used for generate
-m --modernthemetheme name for Ext JS modern toolkit
-n --namename for Ext JS generated app
-v --verboseverbose npm messages (for problems only)

Examples:
ext-gen app --template universalmodern --moderntheme theme-material --name CoolUniversalApp
ext-gen app --interactive
ext-gen app -a -t moderndesktop -n ModernApp


You can select from the following Ext JS templates provided by Sencha ExtGen

Modern Templates:

moderndesktop
This template contains 1 profile, configured to use the modern toolkit of Ext JS for a desktop application

universalmodern
This template contains 2 profiles, 1 for desktop and 1 for mobile. Both profiles use the modern toolkit.

modern themes:theme-material, theme-ios, theme-neptune, theme-triton

由於目前並沒有單獨基於移動端開發的目標，因而在這裡需要建立一個通用應用程式，讓它包含phone配置，具體執行的命令如下：

ext-gen app -t universalmodern -m theme-material -n CE66

在CE66 中引用包，需要修改應用程式的workspace.json 檔案的packages.dir 的設定，以指定引用包的路徑，但直接使用${workspace.dir}/../packages/local 來指定路徑，會出現除錯時找不到檔案的情況。造成這個問題的主要原因是要除錯CE66 應用程式，只能將根目錄設定為client\ce-66 ，不然不能訪問node_modules 等目錄。為了解決這個問題，可以使用window的mklink 命令，將client\ce-66\packages\local 資料夾指向client\packages\local ，具體操作步驟如下：

client

mklink /j ce-66\packages\local packages\local
為 ce-66\packages\local <<===>> packages\local 建立的聯接

命令執行完成後，就會發現訪問ce-66\packages\local 資料夾與訪問packages\local 資料夾沒有任何區別了。餘下要做的是修改workspace.json 檔案，具體修改程式碼如下：

"packages": {
"dir": "${workspace.dir}/packages ,${workspace.dir}/packages/local",
...
}

然後是在app.json 檔案中新增以下引用：

"Locale",
"Common.Core",
"Common.Modern",
"Common.Data"

生成一次應用程式

先在package.json 檔案的scripts 中新增以下命令用於生成開發環境的應用程式：

"build-development": "npx sencha app build development",

在VS Code中切換到ce-66 資料夾，然後執行npm run build-development 就可生成應用程式了。如果覺得還是使用cmd 方法，也可執行命令sencha app build -dev 來執行生成操作。

實現本地化

執行生成操作後，會發現本地化包的檔案已被複制到client\ce-66\build\development\CE66\desktop\resources\Locale 和client\ce-66\build\development\CE66\phone\resources\Locale 資料夾，首頁可通過這兩個目錄中的一個來載入本地化檔案。

與桌面應用程式一樣，需要修改index.html 檔案和app.js 檔案來載入本地化檔案以及執行本地化重寫操作。

完成以上操作後，執行一次生成操作。然後修改iisexpress.json 檔案，將路徑修改為client\ce-66\ 。啟動IIS Express後，在Chrome瀏覽器中，按F12開啟Web開發工具，並切換到移動裝置除錯模式，然後開啟應用程式，以驗證本地化檔案是否已成功載入且應用程式是否能正常執行。如果一切順利，說明專案開發環境已經配置好了。