[教學] 手機APP開發入門--4. 線上修改程式碼 - 討論區

[教學] 手機APP開發入門--4. 線上修改程式碼

文章瀏覽次數 3316 文章回覆數 4

coscell

coscell圖像(預設)

2019-12-10 09:52:48

From:123.193.249.19

啟用預覽模式除了可以搶先觀察程式的效果外,
最棒的是能即時修改電腦上的程式碼,無須重新執行或編譯程式就能同步看到手機畫面上的改變,非常節省時間有效率。
那我們要修改什麼呢?

這個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

留言

#1

特種兵

特種兵圖像(預設)

2019-12-11 00:17:20

From:1.161.132.213

修改 title 時改完存檔
在電腦端的伺服器畫面有看到 code
title 是我改好的
但手機端還是顯示 my app
沒有同步
請問有可能是什麼原因
重掃一次也是一樣
感謝

#2

coscell

coscell圖像(預設)

2019-12-11 09:38:17

From:123.193.249.19

要看現場才能判斷

#3

特種兵

特種兵圖像(預設)

2019-12-11 10:44:49

From:1.161.132.213

我猜是因為權限的關係
因此進入playground的權限管理查看
可能當初在練習掃 qr-code 時沒有按到允許
畫面就滑掉了
從此之後這個授權的提示就不會主動出來了
發現有一個儲存位置的權限是拒絕的,於是設定成允許
再重新掃描 qr-code 改 ui 顯示就可以順利同步了
一開始中文字在手機上顯示亂碼,後來notepad++選utf-8就可以了

#4

coscell

coscell圖像(預設)

2019-12-11 10:45:02

From:123.193.249.19

有可能是網路問題,燒等一下。