使用 JQM.Show、Genymotion、Android Studio 和 MS WebMatrix 创建 JQuery Mobile CRUD 应用
5.00/5 (2投票s)
使用 JQM.Show 在您的 PC 上创建 JQuery Mobile 应用，配备这些工具。
引言
在之前的几篇文章中，我演示了如何使用我开发的名为 JQM.Show 的 RAD 工具创建 JQuery Mobile CRUD 应用。如前所述，这个 RAD 工具可以安装在您的 Android 移动设备上，目前支持 4-7 英寸的屏幕，并且可以在 Android Play 商店下载。本文的目的是展示我目前如何在 PC 上使用 JQM.Show、Genymotion、Android Studio 和 MS WebMatrix 来开发我的 JQuery Mobile CRUD 应用。这是在不使用物理 Android 设备的情况下完成的。
要构建您自己的 JQM.Show 应用，您需要以下工具。
Genymotion：根据其网站介绍，Genymotion 是一个快速易用的 Android 模拟器，用于运行和测试您的 Android 应用。您需要访问其网站注册并在此工具安装到您的计算机上。此工具供个人免费使用。您可以在此处下载。
Android Studio：此工具用于开发 Android 应用，但我并不用它来开发应用。我需要它的功能来查看 Genymotion 模拟器内部文件的内容。JQM.Show 创建的应用会写入设备的根文件夹结构，并可通过设备的文件夹浏览器查看。我使用 Android Device Monitor > File Explorer 来获取我文件夹的内容，因此需要 Android Studio 来访问模拟器设备。您可以在此处下载。
MS WebMatrix：此工具是一个 Web 服务器，我正用它来测试我开发的 JQuery Mobile 应用，并在各种 Internet 浏览器中运行它们。这仅是个人选择，但我相信任何本地 Web 服务器都可以用来测试您创建的 JQM.Show JQuery Mobile 应用。使用 WebMatrix，我只需打开文件夹作为站点来处理我的 JQM.Show 创建的项目，这样我就可以测试它们。我们将在这里遵循相同的方法。您可以在此处下载。
JQM.Show：这是我使用“应用程序、模型、字段”方法开发 JQuery Mobile 应用的 RAD 工具。您稍后将从此处下载它以供您的模拟器使用。
一些简单的假设：您已经阅读了我关于使用 JQM.Show 创建应用的系列文章。无论如何，我们在这里也会创建一个。您也熟悉 JQuery Mobile 以及如何使用该框架创建应用。最后，您已经安装了上述工具并且已准备就绪。以下是电影数据库的各种后端。正如您所注意到的，UI 是相同的，但 CRUD 功能因后端而异。
下载 MoviesDatabaseLocalStorage.zip
下载 MoviesDatabaseJSON.zip 以及一个额外的
下载 MoviesDatabaseIndexedDB.zip
我在这里包含 IndexedDB 版本是为了引起您的一些好奇，我很快就会写一篇文章来解释它的工作原理。
背景
之前我们已经讨论过使用 JQM.Show 创建 JQuery Mobile CRUD Web 应用的安装过程。它们是
第 1 部分、第 2 部分 和 第 3 部分。无论如何，我们将在 GenyMotion 中创建一个应用。
注意：请确保您的互联网连接已激活以便进行这些准备工作。
准备 Genymotion:
安装 Genymotion 后，您需要向其添加一个设备配置文件，以便能够在其上运行 Android 模拟设备。为此：
1. 启动 Genymotion（它会要求您使用下载时使用的详细信息登录）。
2. 点击“添加”，将列出可用设备列表，您可以选择要使用的设备。我建议您从列表中选择一个 7 英寸的设备，因为这能提供更佳的 JQM.Show 用户体验。
3. 点击“下一步”，根据您的设备情况，Virtual Box 也将安装到您的设备上。
4. 完成后，选择您选择的设备并点击“启动”，这将启动您的模拟器。这应该会像下面的示例一样显示模拟器。
准备 Android Studio
1. 安装完成后，它可能会要求您更新所需文件。我们只需要 AS 中的 Android Device Monitor 来访问文件浏览器，以便轻松地将文件拖放到您的 Genymotion 设备中。
2. 启动 Android Device Monitor（位于顶部工具栏）。这可能会显示一个错误，如果出现，请点击“确定”。
3. 成功后，这将打开监视器。完成后，选择“文件浏览器”选项卡。这将显示您模拟设备上的文件夹和文件列表，根文件夹是 mnt\shell\emulated\0。JQM.Show 将在此文件夹中存储创建的项目。
准备 MS WebMatrix
1. 安装完成后，这里没有什么需要做的，只需等待 JQM.Show 创建的项目文件夹。稍后我将向您展示如何操作。对于我们所有的项目，我们将点击“文件”>“打开”>“文件夹作为站点”。
准备 JQM.Show
此过程涉及准备 Genymotion 模拟器以使用 JQM.Show。
1. 在您的 Genymotion 模拟器中，打开浏览器并输入 https://play.google.com/store/apps/details?id=com.b4a.JQMShow 并在您的模拟设备上安装 JQM.Show。
您也可以通过以下方式实现：
1.1 在您的模拟器上打开浏览器
1.2 输入 https://play.google.com/store 并搜索 Anele Mbanga 或 JQM.Show。
2. 点击 JQM.Show 并安装它。这可能会要求您登录，请使用您的 Gmail 用户名和密码。
3. 安装完成后，使用返回菜单回到您设备的开始屏幕，然后启动 JQM.Show，您现在已准备好开发您的 JQuery Mobile CRUD Web 应用。这应该会显示下面的屏幕。
使用代码
让我们开发一个简单的 Web 应用，并将其从设备导出，放入我们的 MS WebMatrix Web 服务器并在本地的 Internet 浏览器中运行它。
创建 JQuery Mobile CRUD 应用
1. 要使用 JQM.Show，您需要先注册。点击“跳过”，您可以稍后滚动浏览此介绍。
2. 点击“开始播放”。如果您已经拥有 JQM.Show 帐户，请登录，否则请注册。
3. 首先，您应该看到一个空白屏幕，没有任何项目。
4. 让我们创建一个新项目。选择“新建应用向导”。我们将创建一个简单的电影数据库应用。
4.1. 在“应用名称”中，输入 Movies Database，关闭安全设置。点击“下一步”。
4.2 在“模型名称”中，输入 Movie，在“显示名称”中输入 Movies，点击“下一步”。
4.3 在此屏幕中，我们需要详细说明每个电影模型将包含什么。对于每部电影，让我们存储名称、年份和类型。让我们保持简单。将“电影名称”、“电影年份”、“电影类型”作为字段名输入，然后点击“下一步”。
4.4. 从现在开始，JQM.Show 将为您编写 CRUD 应用的代码并生成用户界面。从下一个屏幕点击“完成”。
4.5 几秒钟后，下面的屏幕应该出现，指示您创建的应用的位置。
恭喜您，您已在 PC 上通过 JQM.Show 创建了您的第一个 JQM.Show JQuery Mobile Web 应用。现在让我们将项目文件夹从模拟器导出到您的 PC。
从模拟器设备中拉取 JQuery Mobile CRUD 应用
5. 打开 Android Device Monitor，在 mnt\shell\emulated\0 下找到项目文件夹。默认情况下，已创建一个使用 SQLite 的 WebSQL 项目，并带有该后缀。
5.1. 选择文件夹使其成为活动状态，如图中矩形所示。
5.2 选择按钮将文件夹从设备拉取到 PC。
5.3 在下一个屏幕中，选择“桌面”作为您的目标位置，然后点击“确定”。
将出现一个进度条，指示您的操作进度。当它消失时，您将完成从设备拉取文件夹的操作。
恭喜您，您已将项目从模拟设备导出到桌面。现在让我们看看输出是什么样的。我们将使用 MS WebMatrix 来完成。
运行 JQuery Mobile CRUD 应用
6. 启动 MS WebMatrix（如果尚未运行）。
6.1 选择“文件”>“打开”>“文件夹作为站点”，在 WebMatrix 中选择文件夹，选择 MovieDatabaseWebSQL 文件夹，然后点击“选择文件夹”。
6.2 如果下一个屏幕显示“检测到 PHP”，请点击“取消”，因为我们暂时不想安装 PHP。
6.3. 我们需要更新我们应用的某些站点设置，以便它现在能正常工作。如果一切顺利，您应该会看到如下所示的结构；如果没有，所有站点文件都将列出而没有文件夹。JQM.Show 当前未发布的版本已更新以保持此结构，并将很快提供。
您可能会注意到像 controllers、models 和 views 这样的文件夹，请不要惊慌。JQuery Mobile 尚不支持 AngularJS，但我想正确地组织所有文件夹以便于代码维护。
6.3. 选择导航选项卡中的“站点”，然后选择“设置”。选择“.Net 版本”为“无”，因为该应用不使用 .NET。
您也可以禁用“启用 PHP”。点击“文件”导航项，然后从菜单中选择“重启”。如果一切顺利，您应该会在屏幕底部看到一条通知：
以下站点已成功重启：'MoviesDatabaseWebSQL'。
6.4. 从“运行”菜单中，选择您要使用其运行站点的浏览器。我更喜欢 Google Chrome。
这将打开您的浏览器并运行您名为 Movie Database 的 JQuery Mobile CRUD 应用。由于此应用使用了默认图标和所有内容，可以通过直接编辑 index.html 文件进行自定义以满足您的需求。
您应该看到这个...
恭喜您，您已通过 JQM.Show 在 PC 上完全创建了您的应用。
添加一部电影
选择“电影”>“新建”（输入您的电影详细信息并选择“保存”。
我喜欢使用 Ripple Emulator 进行测试，您可以在此处为 Chrome 浏览器下载。我从插件中打开 Ripple 并选择 iPhone 5。
随意浏览，尝试使用您的应用，并添加更多电影。
深入研究源代码和后端
这里生成的源代码格式和模板与我之前关于 CRUD 应用的讨论相同，但因为我们正在创建一个全新的应用来存储电影，让我们看看我们的屏幕是如何设计的。
后端
1. 在您的 Chrome 浏览器中，按 F12，这将打开开发者模式。
2. 选择“资源”，然后在 WebSQL 下找到 MovieDatabase 文件。
我们的电影记录已保存。进行此操作的 JavaScript 是：
// Save click event on Add page
$('#pgAddMovieSave').on('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
//get form contents into an object
var MovieRec = pgAddMovieGetRec();
//save object to WebSQL
app.addMovie(MovieRec);
});
屏幕内容被读取并保存在一个名为 MovieRec 的变量中，然后使用 app.addMovie 进行保存。
//read contents of each form input
function pgAddMovieGetRec() {
//define the new record
var MovieRec = {};
MovieRec.MovieName = $('#pgAddMovieMovieName').val().trim();
MovieRec.MovieYear = $('#pgAddMovieMovieYear').val().trim();
MovieRec.MovieGenre = $('#pgAddMovieMovieGenre').val().trim();
return MovieRec;
}
app.addMovie 使用 SQLite 的 defered 方法将记录保存到数据库。
// add a new record to WebSQL storage.
app.addMovie = function (MovieRec) {
$.mobile.loading("show", {
text: "Creating record...",
textVisible: true,
textonly: false,
html: ""
});
// define a record object to store the current details
var MovieName = MovieRec.MovieName;
// cleanse the record key of spaces.
MovieName = MovieName.split(' ').join('-');
MovieRec.MovieName = MovieName;
// store the json object in the database
$.when(SqlInsertRecord(dbMoviesDatabase, "Movie", MovieRec)).done(function () {
//show a toast message that the record has been saved
toastr.success('Movie record successfully saved.', 'Movies Database');
//find which page are we coming from, if from sign in go back to it
var pgFrom = $('#pgAddMovie').data('from');
switch (pgFrom) {
case "pgSignIn":
$.mobile.changePage('#pgSignIn', {transition: pgtransition});
break;
default:
// clear the edit page form fields
pgAddMovieClear();
//stay in the same page to add more records
}
}).fail(function (err) {
//show a toast message that the record has not been saved
toastr.error('Movie record NOT successfully saved.', 'Movies Database');
});
$.mobile.loading("hide");
};
有关我之前如何构建 WebSQL JQuery Mobile CRUD 应用的详细解释，请参阅本文。除模型名称外，源代码完全相同，方法也是相同的。
只是为了看一下 index.html 样板代码，这是头部的输出。
前端预览
<!DOCTYPE html>
<html manifest="index.appcache">
<head>
<title>Movies Database</title>
<meta charset='utf-8'/>
<meta name='format-detection' content='telephone=no' />
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1'/>
<meta name='playstore' content='https://play.google.com/store/apps/details?id=com.b4a.JQMShow'/>
<meta name='apple-mobile-web-app-cabable' content='YES'/>
<meta name='keywords' content='JQM.Show,JQuery Mobile,JQuery,JavaScript,Google Play Store,Anele Mbanga,Mobile,Hybrid,HTML,CSS,Responsive,HTML5,JSON,Stringify,Parse'/>
<meta name='mobile-web-app-capable' content='yes'/>
<meta name='apple-mobile-web-app-title' content='Movies Database'/>
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent.'/>
<meta name='version' content='1.00' />
<meta name='generator' content='JQM.Show 5.00' />
<meta name='date' content='2015-05-15 17:32' />
<meta name='copyright' content=' ' />
<meta name='author' content=' ' />
<meta name='email' content='' />
<meta name='website' content='' />
<meta name='description' content='. Available from Android Play Store at https://play.google.com/store/apps/details?id=com.b4a.JQMShow' />
<link rel="apple-touch-icon" href="images/apps.png">
<link rel="icon" type="image/png" href="images/apps.png">
<link rel="shortcut icon" type="image/png" href="images/apps.png">
<link rel="apple-touch-icon" sizes="57x57" href="images/apps57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apps72.png">
<link rel="apple-touch-icon" sizes="80x80" href="images/apps80.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apps114.png">
<link rel="apple-touch-icon-precomposed" href="images/appsIconPreComposed.png">
<link rel="apple-touch-startup-image" href="images/appsIconStartUp320by460.png">
<link rel="stylesheet" href="css/toastr.min.css">
<link rel="stylesheet" href="css/jqm-datebox.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/addtohomescreen.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<script src="js/navbar.js" type="text/javascript"></script>
<script src="js/jqm-datebox.core.js" type="text/javascript"></script>
<script src="js/jqm-datebox.mode.slidebox.js" type="text/javascript"></script>
<script src="js/jqm-datebox.mode.flipbox.js" type="text/javascript"></script>
<script src="js/jqm-datebox.mode.datebox.js" type="text/javascript"></script>
<script src="js/jqm-datebox.mode.customflip.js" type="text/javascript"></script>
<script src="js/jqm-datebox.mode.custombox.js" type="text/javascript"></script>
<script src="js/jqm-datebox.mode.calbox.js" type="text/javascript"></script>
<script src="js/toastr.min.js" type="text/javascript"></script>
<script src="js/fastclick.js" type="text/javascript"></script>
<!--[if IE]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->
<script src="js/stanfordcryptolibrary.js" type="text/javascript"></script>
<script src="js/excellentexport.min.js" type="text/javascript"></script>
<script src="js/d3.min.js" type="text/javascript"></script>
<script src="js/d3tree.js" type="text/javascript"></script>
<script src="js/addtohomescreen.min.js" type="text/javascript"></script>
<script src="js/remoteserver.js" type="text/javascript"></script>
<script src="js/support.js" type="text/javascript"></script>
<script src="js/websql.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<style>body * {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.ui-header .ui-title, .ui-footer .ui-title {margin-right: 0 !important; margin-left: 0 !important; }
.marker {max-width: 100%; max-height: 100%; }
.tab-content {display:none; }
.tab-content:first-child { display: block; }
.ui-body-c { border: 1px solid #aaa!important;}
caption {font-weight: bold; font-size: 1.1em; }
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { display: block !important; padding: 0.9em 75px 0.9em 15px !important; }
body .ui-li .ui-li-desc {white-space: normal; }
body .ui-footer .ui-title {white-space: normal; }
a, button, .myelements {-ms-touch-action: manipulation; touch-action: manipulation; }
img { padding: 5px; }
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 80px !important; }
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 10% !important; }
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { padding-left: 25% !important; }
.iphonedv { width:150px;height:96px;margin:15px 4px 10px 4px;float:left;padding-bottom:35px;text-align:center; }
.iphonebtn { text-decoration: none; color: #FFFFFF; }
.backpicture { background-image:url('images/b1.jpg');background-repeat:no-repeat;background-size:cover; }
.red {color:red; }
.rightnav { width:65%;float:left;margin-left:35px;}
.leftnav { width:30%;float:left; }
.borderdv { border-radius: inherit; }
.centertext { text-align: center; }
.ui-icon-exportexcel:after {background-image: url("images/exportexcel.png");background-size: 14px 14px;}
.ui-icon-records:after {background-image: url("images/records.png");background-size: 14px 14px;}</style>
</head>
请注意文件路径，根据使用的 JQM.Show 版本，您的文件可能尚未在文件夹中，但总体上是相同的。然后，您可以在 JQM.Show 中重新打开项目，并用您的作者详细信息和站点等进行自定义。
您可以在此处找到 JQM.Show 的详细用户手册，了解更多详情。
如果您想将您的应用转换为混合应用，以便在 iPhone 或 Android 上运行，您可以遵循我的这篇文章此处，这应该不是问题。
同样，如果您宁愿使用不同的后端，如 JSON、XML，您只需在 JQM.Show 中更改后端，即可创建适用于这些后端的相应代码。我在下面的文章中讨论了使用这些后端进行开发：
- JQuery Mobile JSON 后端
- JQuery Mobile XML 后端
- JQuery Mobile LocalStorage 后端
- JQuery Mobile WebSQL 后端（本文使用）
关注点
在我之前的文章中，我已经详细解释了创建 CRUD JQuery 应用的许多细节。通过本文，我希望让那些想在 PC 上而不是在设备上使用 JQM.Show 开发类似应用的人更近一步。JQM.Show 是专门为在 Android 设备上运行而开发的，然而，我上面已经演示了，即使您没有 Android 设备，您也可以在 PC 上做同样的事情。
Genymotion 速度非常快，我喜欢用它来测试我的 Android 设备。我使用 B4A 开发我的 Android 应用，它可以在此处获得，有了它和 Genymotion，对我来说，一切皆有可能。
这就是全部内容，希望这篇文章非常有启发性。请享用。