app.js的介紹 - 移動網絡應用程序變得容易-js教程-PHP中文網

app.js的介紹 - 移動網絡應用程序變得容易

JavaScript在移動應用程序開發中越來越流行。它使Web應用程序開發人員無需學習任何母語技能即可開發移動Web應用程序。

在本教程中，我們將討論一個名為app.js的輕量級JavaScript UI庫。使用app.js可以創建移動Web應用程序而不會損害性能或外觀。 >

鑰匙要點

> app.js是一個輕巧的JavaScript UI庫，允許開發人員在不損害性能或美觀的情況下創建移動Web應用程序。 >

>
>
>
入門

在本教程的過程中，我們將使用

> app.js

創建一個簡單的用戶註冊應用程序。我們將使用Firebase作為後端。首先，下載app.js並解壓縮。在內部我們有4個文件。

> app.min.css：包含所有android/ios樣式

的默認樣式表

使用 zepto.js

創建主屏幕

下面顯示的是app.js Web應用程序的標準格式。 >

>讓我們從頭開始。打開index.html，然後從app.min.css，app.min.js中刪除身體的所有內容，然後添加下面的腳本。

>下載jQuery並將其包含在您的頁面中或參考jQuery cdn版本。

<span><!DOCTYPE html>
</span><span><html>
</span>  <span><head>
</span>    <span><title>My App</title>
</span>    <span><meta name="viewport" content="width=device-width,
</span>                                   initial<span>-scale=1.0,
</span>                                   maximum<span>-scale=1.0,
</span>                                   user<span>-scalable=no,
</span>                                   minimal<span>-ui">
</span>    <span><link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</span>    <span><style>
</span>      <span>/* put your styles here */
</span>    <span></style>
</span>  <span></head>
</span>  <span><body>
</span>    <span><!-- put your pages here -->
</span>    <span><script></script>
</span>    <span><script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</span>    <span><script>
</span>      <span>/* put your javascript here */
</span>    <span></script>
</span>  <span></body>
</span><span></html></span>

登入後複製

<span>try {
</span>     <span>App.restore(); // it loads/restores the app
</span> <span>} catch (err) {
</span>     <span>App.load('home'); // in case of error it loads the default page
</span> <span>}</span>

登入後複製

創建一個div，添加類應用程序頁面，您就可以準備就緒。類應用程序頁面用於定義頁面。

>應用程序頁面必須始終具有數據頁面屬性。數據頁用於從JavaScript訪問該頁面。

<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>

登入後複製

現在，讓我們在其中添加頂級欄和標題。

<span><div class="app-page"></div></span>

登入後複製

接下來，我們需要在主頁上添加一個標誌和註冊按鈕。所有內容都需要在App-Content Div中定義，因此創建App-content Div並將按鈕放入其中。

browseindex.html，您應該看到帶有簽名和註冊按鈕的主頁。

創建註冊屏幕

> app.js構建是為靜態單頁應用程序的製造商提供服務。這意味著它將所有頁面導航保持在網頁的會話中，將“頁面”定義為可以實例化的
>的dom節點。

來自app.js文檔

我們將在相同的index.html中創建所有頁面。讓我們創建>註冊屏幕，然後將其連接到主屏幕按鈕。這是外觀：

<span><!DOCTYPE html>
</span><span><html>
</span>  <span><head>
</span>    <span><title>My App</title>
</span>    <span><meta name="viewport" content="width=device-width,
</span>                                   initial<span>-scale=1.0,
</span>                                   maximum<span>-scale=1.0,
</span>                                   user<span>-scalable=no,
</span>                                   minimal<span>-ui">
</span>    <span><link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</span>    <span><style>
</span>      <span>/* put your styles here */
</span>    <span></style>
</span>  <span></head>
</span>  <span><body>
</span>    <span><!-- put your pages here -->
</span>    <span><script src="https://img.php.cn/zeptojs.com/zepto.min.js"></script>
</span>    <span><script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</span>    <span><script>
</span>      <span>/* put your javascript here */
</span>    <span></script>
</span>  <span></body>
</span><span></html></span>

登入後複製

>數據目標屬性用於將屏幕鏈接在一起。將數據目標添加到主頁上的“註冊”按鈕以鏈接到此屏幕。如果您瀏覽index.html文件，然後單擊主頁上的“註冊”按鈕，它將重定向到Inbeup屏幕。

>將您的應用程序掛接到firebase

>

firebase是實時存儲和同步數據的功能強大的API。要開始使用Firebase，您需要註冊一個免費帳戶。只需登錄，創建應用程序，然後單擊鏈接以管理應用程序。您將獲得一個獨特的URL來存儲數據。就我而言，它是：

> https://burning-fire – 1723.firebaseio.com/

>在Firebase儀表板上，單擊左側菜單的簡單登錄。單擊電子郵件和密碼身份驗證提供程序選項卡並檢查已啟用。

>創建一個稱為

controller.js 的控制器腳本，並將其包含在中。每個應用程序頁面都有控制器邏輯。在> controller.js 中，我們將定義控制器邏輯以讀取電子郵件和密碼，然後將其存儲在firebase中。開始，下載並包括Firebase客戶端或引用CDN版本。

我們還需要firebase簡單的登錄腳本。

<span>try {
</span>     <span>App.restore(); // it loads/restores the app
</span> <span>} catch (err) {
</span>     <span>App.load('home'); // in case of error it loads the default page
</span> <span>}</span>

登入後複製

首先，我們需要使用Firebase URL創建一個firebase實例。使用此Firebase實例，創建一個FirebaseImplelogin實例。

<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>

登入後複製

當我們嘗試身份驗證用戶登錄時，如果沒有錯誤，將加載

loginhome

<span><div class="app-page"></div></span>

登入後複製

。

接下來，我們將為 ignup頁面添加控制器邏輯。這是它的外觀：

>單擊btnsignup

註冊

<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">My Web App</div>
</span>    <span></div>
</span><span></div></span>

登入後複製

頁面上的按鈕，將通過調用auth.createuser。

添加我們正在成功的登錄上加載的loginhome html頁面，如下所示：

>瀏覽

index.html頁面，然後單擊> is implyup

按鈕。輸入電子郵件和密碼，然後單擊

<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">Simple Web App</div>
</span>    <span></div>
</span>    <span><div class="app-content">
</span>        <span><br />
</span>        <span><div class="app-button green">SignIn</div>
</span>        <span><br />
</span>        <span><div class="app-button blue">SignUp</div>
</span>    <span></div>
</span><span></div></span>

登入後複製

>註冊

。如果一切順利，新添加的用戶將出現在firebase用戶列表中。 > 在屏幕上創建符號 到目前為止，到目前為止，我們擁有的是一個主頁，該頁面鏈接到> Inbip and signin

屏幕。我們已經創建了

>註冊

屏幕，並將其鏈接到主頁。讓我們添加一個

> signin屏幕。上面的HTML代碼類似於> Inbeup屏幕。現在，讓我們將控制器附加到此數據頁面。

<span><!DOCTYPE html>
</span><span><html>
</span>  <span><head>
</span>    <span><title>My App</title>
</span>    <span><meta name="viewport" content="width=device-width,
</span>                                   initial<span>-scale=1.0,
</span>                                   maximum<span>-scale=1.0,
</span>                                   user<span>-scalable=no,
</span>                                   minimal<span>-ui">
</span>    <span><link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</span>    <span><style>
</span>      <span>/* put your styles here */
</span>    <span></style>
</span>  <span></head>
</span>  <span><body>
</span>    <span><!-- put your pages here -->
</span>    <span><script src="https://img.php.cn/zeptojs.com/zepto.min.js"></script>
</span>    <span><script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</span>    <span><script>
</span>      <span>/* put your javascript here */
</span>    <span></script>
</span>  <span></body>
</span><span></html></span>

登入後複製

上面的代碼調用auth.login函數以針對firebase數據進行身份驗證。如果找到了用戶，它將重定向到loginhome。
>讓我們添加
loginhome頁面的控制器方法，並定義註銷功能。

<span>try { </span> <span>App.restore(); // it loads/restores the app </span> <span>} catch (err) { </span> <span>App.load('home'); // in case of error it loads the default page </span> <span>}</span>
登入後複製
登入後複製
登入後複製
>由於我們添加了
signin 頁，因此在註冊成功回調中刪除app.load（'signin'）。使用數據標記屬性將主頁鏈接到> signin>頁面。瀏覽到 index.html>，如果很好，登錄和註冊功能都應正常。
>在登錄家庭中添加列表

>接下來，讓我們為登錄的用戶創建一個接口，以將項目添加到列表中。我們修改了現有的Loginhome HTML，以包括一個文本框和一個按鈕。我們還在頂部欄中添加了歡迎消息和鏈接。這是修改後的HTML代碼：

我們需要檢查文本框以獲取有效數據，並將數據保存到firebase中。如果數據無效，我們將使用對話框顯示彈出驗證。為了將數據保存到Firebase中，我們將使用Push（）。以下是btnadd的代碼，請單擊：
<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>
登入後複製
登入後複製
登入後複製

接下來，我們需要提供一個接口來顯示用戶輸入的數據。讓我們創建另一個頁面，
wishlist
<span><div class="app-page"></div></span>
登入後複製
登入後複製
登入後複製
，如下所示：
> >使用類應用程序列表注意UL。我們將把物品填充到此列表中。在
> loginhome
<span><div class="app-page" data-page="home"> </span> <span><div class="app-topbar"> </span> <span><div class="app-title">My Web App</div> </span> <span></div> </span><span></div></span>
登入後複製
登入後複製
頁面上，我們在頂部欄中有一個鏈接，稱為 wish List
。讓我們將一個事件附加到該鏈接，以加載 wishlist頁面時。。現在，我們需要聲明 wishlist 頁面的控制器方法。在控制器內部，我們需要定義一個單擊事件，以加載登錄名
當單擊頂部欄中的按鈕時。我們還需要從Firebase獲取數據並將其與類應用程序列表綁定到UL。這是控制器代碼：
<span><div class="app-page" data-page="home"> </span> <span><div class="app-topbar"> </span> <span><div class="app-title">Simple Web App</div> </span> <span></div> </span> <span><div class="app-content"> </span> <span><br /> </span> <span><div class="app-button green">SignIn</div> </span> <span><br /> </span> <span><div class="app-button blue">SignUp</div> </span> <span></div> </span><span></div></span>
登入後複製
登入後複製

嘗試瀏覽索引。 結論在本教程中，我們使用了app.js的某些功能來創建一個小應用程序。我們僅專注於有限的功能，例如應用程序頁面，app-list和app.dialog。 app.js提供的所有功能和功能都可以在app.js文檔中找到 >本教程中的源代碼可在GitHub上找到。
>
<span><div class="app-page" data-page="SignUp"> </span> <span><div class="app-topbar"> </span> <span><div class="app-button left blue" data-target="home">back</div> </span> <span></div> </span> <span><br /> </span> <span><div class="app-content"> </span> <span><input id="btnEmail" class="app-input" placeholder="Email"> </span> <span><input id="btnPassword" " token operator">-input " placeholder="Password" type="password"> </span> <span><div id="btnSignUp" class="app-button green ">SignUp</div> </span> <span></div> </span><span></div></span>
登入後複製
經常詢問有關app.js
的問題（常見問題解答）
> app.js在Web開發中的主要功能是什麼？

app.js是一個JavaScript庫，簡化了構建Web應用程序的過程。它提供了一個用於創建用戶界面，管理狀態和處理事件的框架。它旨在易於使用，具有簡單的API，可以使開發人員快速構建複雜的應用程序。它也是高度模塊化的，這意味著您可以根據項目的要求使用盡可能多的或盡可能少的時間。
>
app.js與其他JavaScript庫相比如何？
>我可以將app.js與其他JavaScript框架一起使用，例如Angular還是React？
>我如何開始使用app.js？

>開始使用app.js很容易。您可以從官方網站下載圖書館，也可以通過NPM安裝。安裝後，您可以立即開始在項目中使用它。在線上也有大量的教程和資源可幫助您學習如何有效地使用app.js。並且可以用於各種網絡開發項目。一些常見用例包括構建單頁應用程序，創建交互式用戶界面以及在復雜應用程序中管理狀態。它也是原型製作的絕佳工具，因為它允許您快速構建和測試新想法。

app.js適合大規模項目嗎？
是的，是的，app.js是合適的。用於小型和大型項目。它的模塊化設計使隨著項目的增長而易於擴展。您可以僅從基礎知識開始，然後根據需要添加更多功能。這使其成為小型個人項目和大型企業應用程序的一個不錯的選擇。
> app.js如何處理數據綁定？
app.js使用Model-view-view-controller（MVC）數據綁定的體系結構。這意味著您的數據（模型）的變化會自動反映在視圖中，反之亦然。這使您可以輕鬆地保持用戶界面與數據同步，而無需每次更改數據時手動更新視圖。
>
>我可以將app.js用於移動應用程序開發嗎？ >是的，App.js可用於移動應用程序開發。它的設計旨在響應迅速，並且在台式機和移動設備上都可以正常運行。您可以使用它來構建移動Web應用程序，或者與Cordova或PhoneGap等工具一起使用它來構建本機移動應用程序。
app.js？

app.js提供什麼樣的支持。在線也有很多可用的資源，包括教程，文檔和論壇。如果您遇到任何問題或有任何疑問，通常可以在社區中找到所需的答案。

是app.js開源嗎？

是的，app.js是開源的。。這意味著您可以免費使用它，並且您可以根據需要為其開發做出貢獻。源代碼可在GitHub上獲得，並且始終歡迎社區的貢獻。

以上是app.js的介紹 - 移動網絡應用程序變得容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！