[教學] 手機APP開發入門--12. 文字輸入 - 討論區

[教學] 手機APP開發入門--12. 文字輸入

文章瀏覽次數 1284 文章回覆數 6

coscell

coscell圖像(預設)

2019-12-27 10:25:12

From:123.193.249.19

文字輸入也是很重要的使用者界面。
NativeScript 提供兩種輸入框元件標籤:

  • <TextField/>: 單行輸入框
  • <TextView/>: 多行輸入框

為了讓 iOS 使用者能清楚辨認文字輸入的位置,上面兩個元件還需要加入 hint 屬性提示,像這樣:

<TextField hint="在此輸入文字"/>

上面的提示文字在使用者輸入第一個字後會自動消失,如果清除文字又會自動顯示出來。

首先參考第9節在 about.xml 最後再加上一個『與我聯絡』的按鈕。
接著當然要寫一個對應的 about.js 來處理這個按鈕,內容就跳轉到聯絡表單 contact.xml.
再來就是要設計這個聯絡表單,我們新學的文字輸入元件標籤就要上場了:

<Page>
  <StackLayout>
    <Label textWrap="true" text="歡迎填寫下面的表單與我聯絡,我會盡快回覆:" />
    <TextField hint="訊息主題" />
    <TextView hint="訊息內容" />
    <Button text="送出" tap="onTap" />
  </StackLayout>
</Page>

最後的重頭戲 contact.js 登場了:

var dialogsModule = require("ui/dialogs");

function onTap() {
  console.log("送出按鈕已被按下");

  dialogsModule.alert("您的訊息已送出");
}
exports.onTap = onTap;

正常情況下,這裡應該要把使用者的訊息透過簡訊或電子郵件發送給我們,但這抄出了我們目前的程度,
所以現在只能暫時先用簡單的程序處理:

之前我們跳轉畫面用的是 frame 模組,這次我們用到的是 dialogs 模組。
在 onTap 函數裡我們作兩件事:

console.log 是內建函數,用來顯示訊息在終端機視窗。
當您使用 tns preview 或 tns run 來測試程式,按下『送出』按鈕就會在終端機視窗上看到『送出按鈕已被按下』的訊息,
開發者往往也用這種方式來找出程式碼的錯誤所在。

dialogsModule.alert 函數的作用則是在使用者的畫面上跳出一個訊息框。

留言

#1

特種兵

特種兵圖像(預設)

2019-12-27 11:44:18

From:211.23.21.202

真想趕快回家實做一下

#2

特種兵

特種兵圖像(預設)

2019-12-28 00:28:58

From:1.161.142.173

成功了,我的聯絡是做在首頁
不知道回上一頁的函數是什麼,想做一下

#3

coscell

coscell圖像(預設)

2019-12-28 07:49:48

From:123.193.249.19

navigate

#4

特種兵

特種兵圖像(預設)

2019-12-28 18:54:31

From:1.161.142.173

能不能讓他自動判斷上一頁的位置,而不是我們要自己打進去

#5

coscell

coscell圖像(預設)

2019-12-29 06:56:37

From:123.193.249.19

iOS會自動產生上一頁按鈕,Android有Back按鈕可用。

#6

特種兵

特種兵圖像(預設)

2019-12-29 11:17:07

From:1.161.142.173

我把非首頁的頁面都使用 actionBar 加上了標題,
他會出現在畫面的左上角
並且加入了反回的按鈕,目前還不知道要怎麼放到右上角,
但至少功能正常,
是使用內建的 goBack() 函數
一樣是在 topmost 下面
frameModule.topmost().goBack();
我覺得寫app的js跟傳統js還是差滿多的,例如都必須在他的框架下,
像是原生 alert 或是原有的內建函數不一定能直接使用,
必須知道他的上層才行,不能像原生js就直接拿來使用