您现在的位置是：主页 > news > 网站建设中模板/苏州做网站哪家比较好

网站建设中模板/苏州做网站哪家比较好

admin2025/5/17 22:23:23【news】

简介网站建设中模板,苏州做网站哪家比较好,wordpress使用vue,菜单宣传网站怎么做的JavaScript在移动应用程序开发中变得越来越流行。它使Web应用程序开发人员无需学习任何母语即可开发移动Web应用程序。在本教程中，我们将讨论一个名为App.js的轻量级JavaScript UI库。使用App.js可以创建移动Web应用程序而不会影响性能或外观。入门在本教程的过…

网站建设中模板,苏州做网站哪家比较好,wordpress使用vue,菜单宣传网站怎么做的JavaScript在移动应用程序开发中变得越来越流行。它使Web应用程序开发人员无需学习任何母语即可开发移动Web应用程序。在本教程中，我们将讨论一个名为App.js的轻量级JavaScript UI库。使用App.js可以创建移动Web应用程序而不会影响性能或外观。入门在本教程的过…

JavaScript在移动应用程序开发中变得越来越流行。它使Web应用程序开发人员无需学习任何母语即可开发移动Web应用程序。

在本教程中，我们将讨论一个名为App.js的轻量级JavaScript UI库。使用App.js可以创建移动Web应用程序而不会影响性能或外观。

入门

在本教程的过程中，我们将使用App.js创建一个简单的用户注册应用程序。我们将使用Firebase作为后端。首先，下载App.js并将其解压缩。里面有4个文件。

app.min.css：包含所有android / iOS样式的默认样式表
app.min.js：库
index.html：入门基本模板文件
zepto.js：类似于移动设备的jQuery库

使用zepto.js是可选的。在本教程中，我们将使用jQuery 。

创建主屏幕

下面显示的是app.js网络应用程序的标准格式。

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

让我们从头开始。打开index.html并从正文中删除除app.min.js和app.min.css之外的app.min.css ，并在下面添加脚本。

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

下载jQuery并将其包含在您的页面中，或参考jQuery CDN版本。

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

创建一个div ，添加类app-page ，您就可以准备好第一页。类app-page用于定义页面。

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

app-page必须始终具有data-page属性。 data-page用于从JavaScript访问页面。

现在让我们添加一个顶部栏和标题。

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

接下来，我们需要在主页上添加一个SignIn和SignUp按钮。所有内容都需要在app-content div中定义，因此创建app-content div并将按钮放在其中。

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

浏览index.html ，您应该会看到带有SignIn和SignUp按钮的主页。

创建注册屏幕

App.js旨在为静态单页应用程序的制造商提供服务。这意味着它将所有页面导航保持在网页会话中，将“页面”定义为可以实例化的DOM节点

从App.js文档

我们将在相同的index.html创建所有页面。让我们创建SignUp屏幕并将其连接到主屏幕按钮。外观如下：

<div class="app-page" data-page="SignUp"><div class="app-topbar"><div class="app-button left blue" data-target="home">back</div></div><br /><div class="app-content"><input id="btnEmail" class="app-input" placeholder="Email"><input id="btnPassword" " class="app-input " placeholder="Password" type="password"><div id="btnSignUp" class="app-button green ">SignUp</div></div>
</div>

data-target属性用于将屏幕链接在一起。添加data-target的SignUp主页上链接按钮，此屏幕。如果您浏览index.html文件并单击主页上的SignUp按钮，它将重定向到SignUp屏幕。

将您的应用程序连接到Firebase

Firebase是功能强大的api，用于实时存储和同步数据。要开始使用Firebase，您需要注册一个免费帐户。只需登录，创建一个应用程序，然后单击链接即可管理该应用程序。您将获得一个唯一的URL来存储数据。就我而言：

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

在firebase仪表板中，从左侧菜单中单击“ Simple login ”。单击Email and Password身份验证提供程序选项卡，然后选中启用。

创建一个名为controller.js的控制器脚本，并将其包含在index.html中 。每个app-page都有控制器逻辑。在controller.js中 ，我们将定义控制器逻辑以读取电子邮件和密码并将其存储在firebase中。

首先，请下载并包含Firebase客户端，或参考CDN版本。

<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>

我们还需要firebase简单的登录脚本。

<script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>

首先，我们需要使用Firebase网址创建一个Firebase实例。使用此firebase实例，创建一个FirebaseSimpleLogin实例。

var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com'); 
var wishRef = new Firebase('https://burning-fire-1723.firebaseio.com/WishList');
var auth = new FirebaseSimpleLogin(firebaseRef, function (error, user) {if (!error) {if (user) {App.load('LoginHome',user);}}
});

当我们尝试验证用户登录名时，如果没有错误，则将加载LoginHome 。

下一步，我们将添加控制器逻辑的注册页面。这是它的外观：

App.controller('SignUp', function (page) {$(page).find('#btnSignUp').on('click', function () {var email = $('#btnEmail').val();var password = $('#btnPassword').val();if (email &amp;&amp; password) {// on successful validation create the userauth.createUser(email, password, function (error, user) {if (!error) {// App.load('SignIn'); }});} else {// on validation failure show the validation messageApp.dialog({title: 'Validation Error',text: 'Please enter username and password.',okButton: 'Try Again',cancelButton: 'Cancel'}, function (tryAgain) {if (tryAgain) {App.load('SignUp');}});}});});

点击注册页面上的btnSignUp按钮，将通过调用创建一个用户auth.createUser 。

添加成功登录后正在加载的LoginHome html页面，如下所示：

<div class="app-page" data-page="LoginHome"><div class="app-topbar"><div class="app-title">Welcome Home!! <span class="user"></span></div><div class="app-button right">Logout</div></div><div class="app-content"></div>
</div>

浏览index.html页面，然后单击SignUp按钮。输入一个电子邮件地址和密码，然后点击注册。如果一切顺利，新添加的用户将显示在firebase用户列表中。

创建登录屏幕

我们至今是一个链接到注册和登入画面的主页。我们已经创建了SignUp屏幕，并将其链接到主页。让我们添加一个登录屏幕。

<div class="app-page" data-page="SignIn"><div class="app-topbar"><div class="app-button left blue" data-target="home">back</div></div><br /><div class="app-content"><input id="btnUsername" class="app-input" placeholder="Username"><input id="btnPass" class="app-input" placeholder="Password" type="password"><div id="btnSignIn" class="app-button green">SignIn</div></div>
</div>

上面的HTML代码类似于注册画面。现在，让我们将控制器附加到此data-page 。

App.controller('SignIn', function (page) {$(page).find('#btnSignIn').on('click', function () {var email = $('#btnUsername').val();var password = $('#btnPass').val();if (email &amp;&amp; password) {auth.login('password', {email: email,password: password});} else {App.dialog({title: 'Validation Error',text: 'Please enter username and password.',okButton: 'Try Again',cancelButton: 'Cancel'}, function (tryAgain) {if (tryAgain) {App.load('SignIn');}});}});
});

上面的代码调用auth.login函数以针对Firebase数据进行身份验证。如果找到用户，它将重定向到LoginHome 。

让我们为LoginHome页面添加控制器方法并定义注销功能。

App.controller('LoginHome', function (page,user) {$(page).find('.user').text(user.email); //setting the email in welcome message $(page).find('.app-button').on('click', function () {auth.logout();  //logs out the user sessionApp.load('SignIn'); // loads the Sign In page});
});

由于我们已经添加了SignIn页面，因此App.load('SignIn')在SignUp成功回调中取消对App.load('SignIn')注释。使用data-target属性将主页链接到SignIn页面。浏览到index.html ，如果一切正常，则登录和注册功能均应正常工作。

在登录主页中添加列表

接下来，让我们为登录用户创建一个界面，以将项目添加到列表中。我们修改了现有的LoginHome html，以包括一个文本框和一个按钮。我们还在顶部栏中添加了欢迎消息和链接。这是修改后的html代码：

<div class="app-page" data-page="LoginHome"><div class="app-topbar"><div id="btnShowList" class="app-button red left">Wish List</div><div class="app-title">Welcome Home!! <span class="user"></span></div><div id="btnLogout" class="app-button red right ">Logout</div></div><div class="app-content"><input id="txtWish" class="app-input" placeholder="wish"><br /><div id="btnAdd" class="app-button green">Add Wish</div></div>
</div>

我们需要在文本框中检查有效数据，然后将数据保存到firebase中。如果数据无效，我们将使用Dialogs显示验证弹出窗口。要将数据保存到Firebase中，我们将使用push（）。以下是btnAdd点击的代码：

$(page).find('#btnAdd').on('click', function () {var wish = $('#txtWish').val();if (wish) { // checking if valid data// if valid data insert into firebasewishRef.push({'user_id': user.email,'text': wish});App.load('WishList',user); // load the page to show all wishes} else{// got invalid data, show validation messageApp.dialog({title: 'Validation Error',text: 'Looks like you forgot to enter the wish.',okButton: 'Try Again',cancelButton: 'Cancel'}, function (tryAgain) {if (tryAgain) {App.load('LoginHome', user);}});}});

接下来，我们需要提供一个界面来显示用户输入的数据。让我们创建另一个页面， WishList ，如下所示：

<div class="app-page" data-page="WishList"><div class="app-topbar"><div class="app-title">Wish List</div><div class="app-button left blue">Back</div></div><div class="app-content"><ul class="app-list"></ul></div>
</div>

注意ul和类app-list 。我们将把我们的项目填充到此列表中。在LoginHome页面上，我们在顶部栏中有一个名为Wish List的链接。让我们在该链接上附加一个事件，以在单击该链接时加载“ 愿望清单”页面。

$(page).find('#btnShowList').on('click', function () {App.load('WishList', user);});

现在，我们需要为WishList页面声明controller方法。在控制器内部，我们需要定义一个单击事件，以在单击顶部栏中的按钮时加载LoginHome 。我们还需要从firebase中获取数据，并使用类app-list将其绑定到ul 。这是控制器代码：

App.controller('WishList', function (page, user) {$(page).find('.app-button').on('click', function () {App.load('LoginHome', user); //Loading LoginHome page});// Fetching data from Firebase and passing it to show functionnew Firebase('https://burning-fire-1723.firebaseio.com/WishList').once('value', show);function show(snap) {$.each(snap.val(), function (i, value) {var spanText = $('<span/>').css('font-weight', 'bold').text(value.text);var spanUser = $('<span/>').text(' by:: ' + value.user_id);$(page).find('.app-list').append($('<li/>').append(spanText, spanUser));});}
});

尝试浏览到index.html ，一切都应该正常工作。