[教學] 手機APP開發入門--7. 從頭開始 - 討論區

[教學] 手機APP開發入門--7. 從頭開始

文章瀏覽次數 1369 文章回覆數 1

coscell

coscell圖像(預設)

2019-12-22 13:59:51

From:123.193.249.19

前面我們利用官方的範例樣板跑完了整個開發流程。
現在就從基礎開始,一步步做出我們自己的作品,從中學習必要的相關知識。

第一步還是要建立專案,執行以下指令:
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 節其中一種方法進行測試。

留言

#1

特種兵

特種兵圖像(預設)

2019-12-24 23:09:36

From:1.161.140.136

想使用中文名稱失敗了,提示只能允許字母與數字和一些符號
模版的選擇也是有固定的,不能亂打參數
現在還有很多不懂的地方,可能要先釐清哪些是 xml, js 的東西
哪些是這個套件提供的應用