前面我們利用官方的範例樣板跑完了整個開發流程。
現在就從基礎開始,一步步做出我們自己的作品,從中學習必要的相關知識。
第一步還是要建立專案,執行以下指令:
tns create hello --template tns-template-hello-world
這裡我們增加了一個指令參數 --template tns-template-hello-world,
這樣可以省略選擇風格和模板的兩個步驟。
完成後我們來瀏覽一下 hello 資料夾結構,作一些小調整。
請進入 app 資料夾。
package.json 指出 app 進入點為 app.js.
app.js 告訴我們要執行 app-root.
app-root.xml 顯示主頁為 main-page.
從前面第4節我們學到 main-page.xml, main-page.js 和 main-view-model.js 這三個檔案是我們可以修改的對象。
因為要從頭開始,所以我們可以把這三個檔案刪除。
此外為了方便重起爐灶,我們可以新建一個資料夾 home.
這樣一來, app-root.xml 就必須作對應的修改:
<Frame defaultPage="main-page">
要改成
<Frame defaultPage="home/home">
意思就是我們要在剛剛新建的 home 資料夾裡自計建立 home.xml 內容可以向這樣:
<Page>
<StackLayout>
<Label text="大家好!這是我自己寫的第一個APP, 還請多多指教,也希望快點看到大家的作品喔!"/>
</StackLayout>
</Page>
簡單解釋一下上面的元件:
- <Page></Page>: XML 檔案的開頭和結尾
- <StackLayout></StackLayout>: 這是一種縱向的畫面布局,其中的元件項目會依序由上而下排列
- <Label/>: 文字標籤,文字內容由 text= 指定
到此就完成了我們的APP雛型,請選用前面第 3, 5, 6 節其中一種方法進行測試。