![App Inventor 傳送資料至網頁檔案 App Inventor 傳送資料至網頁檔案](https://i0.wp.com/i.imgur.com/uWC1jCG.png?resize=1024%2C538&ssl=1)
App Inventor 傳送資料至網頁檔案
哈囉!各位中秋節快樂!!
今天要來寫一篇簡單的教學文章,主要是有關 App Inventor 和 HTML 檔案之間,資料的傳遞,之前我有寫過一篇「App Inventor 將讀取的資料使用表格呈現」的文章,不過有些同學私信跟我說,看不太懂是怎麼將從 Google 試算表 讀取到的資料,傳送到網頁檔,以表格的方式呈現!??
所以今天就來寫,如何在 App Inventor 的文字輸入框打好資料後,按下按鈕傳送到我們自己寫的網頁。那麼請跟著以下教學來開始實作:
1. 首先開啟記事本,並輸入以下 HTML 標籤。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>App Inventor</title>
</head>
<body>
</body>
</html>
接著在 <body> 標籤裡,再加入以下 <script> 標籤。
<script>
// 從 App Inventor 讀取資料
document.write(window.AppInventor.getWebViewString());
</script>
然後將檔案存成 index.html(編碼選 utf-8)
![](https://i0.wp.com/i.imgur.com/EFtXxW6.png?w=960&ssl=1)
最一開始加入的是 HTML 基本的標籤,而要在網頁上顯示資料,則是要將標籤寫在 <body> 裡面。(不論是按鈕、表格、圖片……,只要是我們能看到的,都要在 <body> 裡。)
要讀取在 App Inventor 設定的 “網路瀏覽器字串”,得使用 JavaScript 程式語言,JavaScript 的程式碼要寫在 <script> 標籤裡。
要讀取已在 App Inventor 設定好的 “網路瀏覽器字串”,要用
window.AppInventor.getWebViewString()
方法
然後再將讀取到的資料,透過 document.write() 方法,將資料顯示在網頁中。
接著開始設計 App
2. 開啟 App Inventor,並新增一個專案「WebViewString」。
需要元件如下:
![](https://i0.wp.com/i.imgur.com/sXZETNZ.png?w=960&ssl=1)
接下來,要處理網頁檔的部份,你可以將剛剛寫好的網頁檔,直接丟到 App Inventor,然後再將網路瀏覽器的首頁路徑指定過去,但這邊我要示範將網頁檔丟到虛擬主機(000WebHost) 後,再將網路瀏覽器的首頁路徑指定為我虛擬主機的網址。
![](https://i0.wp.com/i.imgur.com/fKnpEUD.png?w=960&ssl=1)
我把網頁檔放在 根目錄(public_html) 裡的 AppInventor 資料夾 裡的 WebViewString 資料夾
所以我的路徑就是:
https://jamesbang.000webhostapp.com/AppInventor/WebViewString/index.html
P.S. 網址後面的 index.html 可省略
然後將網頁切換至程式設計
拖拉以下程式方塊:
![](https://i0.wp.com/i.imgur.com/xbVdBwe.png?w=960&ssl=1)
首先判斷輸入框是否為空?有資料再做傳送
設定瀏覽器的網址
設定網路瀏覽器字串(WebViewString)
設定好後再呼叫瀏覽器回首頁即可
App 到這即製作完成!!
這是非常簡單的範例應用,同學可以多練習試試。有任何問題歡迎下方留言討論!!
aia 專案程式檔下載
App 範例執行畫面
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![App Inventor 傳送資料至網頁檔案後再回傳資料 App Inventor 傳送資料至網頁檔案後再回傳資料](https://i0.wp.com/i.imgur.com/TgwjMXt.png?resize=75%2C75&ssl=1)
![從 Dropbox 讀取 CSV 檔案至 App Inventor 從 Dropbox 讀取 CSV 檔案至 App Inventor](https://i0.wp.com/i.imgur.com/zFbK6uO.png?resize=75%2C75&ssl=1)