啟用預覽模式除了可以搶先觀察程式的效果外,
最棒的是能即時修改電腦上的程式碼,無須重新執行或編譯程式就能同步看到手機畫面上的改變,非常節省時間有效率。
那我們要修改什麼呢?
這個APP都顯示英文,個人看不慣,要改成中文。
再來從42點到1手指會抽筋,想要改成3就好。
下面就開始我們的奇妙旅程。
電腦端不要關閉終端機視窗同時直接用檔案總管瀏覽專案資料夾,其中的 app 子資料夾是我們要關注的對象,其他的都別動直接進入。
用記事本打開 package.json.
第2行: "main": "app.js", 這行告訴我們程式的進入點是 app.js,
所以關掉這個檔案,同樣用記事本打開 app.js.
從 /* 開始到 */ 之間的內容是 JavaScript 程式碼的註解說明,這段的大意是說
在 NativeScript 中,app.js 檔案是您的APP的進入點。
您可以用這個檔案為您的APP進行初始化,不過他的主要目的是把控制權交給指定的模組。
接下來這行
const application = require("tns-core-modules/application");
就是指定常數 application 代表 tns-core-modules 資料夾下的 application 模組。(該資料夾位於 ..\node_modules 資料夾下)
application.run({ moduleName: "app-root" });
這行呼叫 application 模組的 run 函數執行 app-root.
最後又是一段註解說明,提醒我們不要把程式碼放在 application.run 這行的下面,因為 iOS 不會執行這些程式碼。
到這裡這個檔案就可以官掉了。
再來就要找到他要執行的 app-root, 所以打開 app-root.xml.
這裡告訴我們框架的預設頁面是 main-page, 所以我們又要把它關掉再去打開 main-page.
可是等等,名為 main-page 的檔案有三個耶!
沒錯,用 NativeScript 寫的APP主角就是這三種檔案,也是我們要動刀的對象:
- XML 負責輸出畫面,也就是使用者界面(UI).
- CSS 負責版面處理,也就是美編工作。
- JS 則是負責流程控制的 JavaScript 程式碼。
這三種檔案都可以用記事本打開。
首先打開 main-page.xml, 找到 <ActionBar title 這行,
等號右邊的 "My App" 就是我們在手機上看到的畫面標題,把它改成 "我的測試作品".
到這裡先按 CTRL+S 存檔,接著拿起手機看看是不是變了。很神奇吧!
證明有效後接著修改其他部份。
繼續往下找到 <StackLayout 這行,底下有三個組件:
- <Label text= 這是文字標籤,把內容 "Tap the button" 改為 "點擊下面的按鈕".
- <Button text= 這是按鈕,把按鈕名稱 "TAP" 改為 "點擊".
緊接著的 tap="{{ onTap }}" 意思是一旦點擊該按鈕就會呼叫 onTap 這個處理函數,理論上它會被定義在 main-page.js 檔案李。 - <Label text="{{ message }}" 又是一個文字標籤,內容應該由 main-page.js 定義的 message 函數產生。
存檔並關閉,這時候手機畫面應該都是中文了。
最後修改起始數值和最終的訊息:
打開 main-page.js, 跳過兩段註解說明,接下來看到這行
const createViewModel = require("./main-view-model").createViewModel;
得知控制權又轉到 main-view-model.js 了。
打開找到其中的 function createViewModel() { 裡面就是定義上面兩個函數的地方。
回到檔案開頭搜尋 return, 把 "Hoorraaay! You unlocked the NativeScript clicker achievement!" 改為 "恭喜您完成姐所!".
游標往下兩行還有個 return, 把 ${counter} taps left
改為 還勝 ${counter} 次點擊
.
接著搜尋 42, 改為 3.
存檔,大功告成!
讀到這裡您一定感到暈頭轉向,我也是!
別擔心,等整個範例流程都跑完,我們會在重新建立一個專案,
從最基礎做起,代您一步步完成自己的APP開發。
※最後更新時間:2019-12-10 09:56:52 From:123.193.249.19 By:coscell
※最後更新時間:2019-12-10 09:58:35 From:123.193.249.19 By:coscell
※最後更新時間:2019-12-10 09:59:52 From:123.193.249.19 By:coscell
※最後更新時間:2019-12-10 10:06:12 From:123.193.249.19 By:coscell