客户端的设计，利用的是Hybrid APP的构建技术，核心是HTML5技术，下面先简单介绍下Hybrid应用的以及Ionic框架。

技术介绍

Hybrid App介绍

移动app可以大致被分为三种，native、hybrid和web app。如果使用native app，你可以使用设备和操作系统的所有能力，同时，平台的性能负荷最小。然而，构建web app可以让你的代码跨平台，使得开发时间和成本大大减少。而hybrid app把这两者的优点都结合起来，使用一套共同代码，在许多不同的平台上部署类似原生的app。

有两种构建hybrid app的方法：

Webview app：HTML,CSS和Javascript基础代码在一个内部的浏览器（叫做WebView）中运行，这个浏览器打包在一个原生的app中，一些原生的API可以通过这个包被Javascript获得，比如Adobe PhoneGap和Trigger.io。
被编译的hybrid app：用一种语言编写代码（如C#或者Javascript），对于每一种支持的平台都把代码编译进原生代码中，这样做的结果是，每一个平台都有一个原生的app，但是在开发过程中少了一些自由空间。可以看一下这些例子，Xamarin，Appcelerator Titanium，Embarcadero FireMonkey。

优点：

开发人员可以使用现有的网页技术
对于多种平台使用一套基础代码
减少开发时间和成本
使用响应式网页设计可以非常简便的设计出多样的元素（包括平板）
一些设备和操作系统特征的访问
高级的离线特性
可见度上升，因为app可以原生发布（通过app store），也可以发布给移动端浏览器（通过搜索引擎）

缺点：

某些特定app的性能问题（那些依赖于复杂的原生功能或者繁重的过渡动画的app，如3D游戏）
为了模拟native app的UI和感官所增加的时间和精力
并不完全支持所有的设备和操作系统
如果app的体验并不够原生化，有被Apple拒绝的风险（比如说一个简单的网站）
这些缺点比较显著，不能忽略，它们告诉我们，并不是所有的app都适合混合模式，你需要小心的预计你的目标用户、他们对平台的选择和对app的需求。对于许多app来说，好处都是大于坏处的，比如内容驱动的app。

Ionic介绍

Ionic是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。 Ionic特点:

ionic 基于Angular语法，简单易学。
ionic 是一个轻量级框架。
ionic 完美的融合下一代移动框架，支持 storage.blog.fliaping.com，代码易维护。
ionic 提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。
ionic 专注原生，让你看不出混合应用和原生的区别
ionic 提供了强大的命令行工具。
ionic 性能优越，运行速度快。storage.blog.fliaping.com

Ionic学习

前导知识

storage.blog.fliaping.com

HTML5技术
JavaScript
AngularJS storage.blog.fliaping.com

基础学习

请参考网络其他教程，例如：

当然最好的还是官方的文档 Ionic Documentation storage.blog.fliaping.com 本篇文章针对已经入门Ionic的童鞋，没有入门的请先完成基础学习。

界面介绍

界面截图storage.blog.fliaping.com

先界面贴出效果。

下图：主界面和景点详情页面

searchapp-home

下图：景点详情页面

searchapp-detail-page

下图：原始链接页面

QQ20160612-3@2x copy

下图：AND和OR查询

searchapp-and-or-query

下图：结果排序页面

searchapp-sort

下图：结果筛选页面

searchapp-filte

界面逻辑结构

页面结构图如下： searchapp-page-framework

项目构建

关于Ionic框架的详情使用，请参考基础学习内容和项目中的源码。

ngCordova插件模块

1.　在源码起始HTML页面中，引入ng-cordova.js文件，如下，把该文件放在项目目录的lib/ngCordova/dist目录下，并在index.html中添加如下代码片段。

1
2


<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

2.　将ng-cordova模块注入应用,如下代码，在angular中构建module时加入ngCordova模块。

1

var app = angular.module('searchIndex', ['ionic','ngCordova']);

定位插件

本项目中使用了设备的定位功能，如果简单使用HTML的定位功能，在当前Ionic环境下并没有效果，因为可能Ionic构建出来的应用并不是标准的浏览器，并没有调用设备的定位硬件，但Ionic的最大好处是Hybrid方式，既可以通过中间层Cordova来调用设备硬件。

插件介绍页：http://ngcordova.com/docs/plugins/geolocation/

1.　安装插件：

1

cordova plugin add cordova-plugin-geolocation

2.　在controler中注入$cordovaGeolocation插件。

1
2
3
4


app.controller("homeCtrl",['$scope','$cordovaGeolocation',
      function ($scope,$cordovaGeolocation){
    //......
    }

3.　在代码中使用该插件的定位功能

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


var isIOS = ionic.Platform.isIOS();
        var isAndroid = ionic.Platform.isAndroid();
        console.log("Platform:"+ionic.Platform.platform());

        if(isAndroid || isIOS){
            var posOptions = {timeout: 10000, enableHighAccuracy: false};
            $cordovaGeolocation
                .getCurrentPosition(posOptions)
                .then(function (position) {
                    window.localStorage['latitude']  = position.coords.latitude;
                    window.localStorage['longitude'] = position.coords.longitude;
                    //$scope.closeLocation();
                    $scope.loading(false);
                }, function(err) {
                    // error
                });
        }

应用内网页浏览

插件介绍页：http://ngcordova.com/docs/plugins/inAppBrowser/

1.　安装插件：

1

cordova plugin add cordova-plugin-inappbrowser

2.　在controler中注入$cordovaInAppBrowser插件。

1
2
3
4


app.controller("homeCtrl",['$scope','$cordovaInAppBrowser',
      function ($scope,$cordovaInAppBrowser){
    //......
    }

3.　在代码中使用该插件，实现应用内打开链接

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


$scope.openUrl = function (url) {
            var isIOS = ionic.Platform.isIOS();
            var isAndroid = ionic.Platform.isAndroid();
            console.log("Platform:"+ionic.Platform.platform());

            if(isAndroid || isIOS){

                var options = {
                    location: 'yes',
                    clearcache: 'yes',
                    toolbar: 'yes'
                };

                $cordovaInAppBrowser.open(url, '_blank', options)

            }else {
                $window.open(url);
            }

        };

调试

Android平台

由于Android平台的开放特性，发布该平台软件比较简单，直接利用Ionic提供的命令即可。

在本项目的目录下执行如下命令

1
2
3
4


ionic platform android   #添加android平台
ionic build android      #构建android平台代码
ionic emulate android    #在android模拟器上运行程序
ionic run android        #在运行android机器上运行程序

emulate命令是打开android模拟器并加载应用，run命令需要将手机插到电脑上，并确认Debug功能打开，并在手机上对该电脑进行了认证。

IOS平台

因为ios平台的封闭性，如果想在ios平台进行调试，可以利用Xcode提供的模拟器，当然需要在OSX平台上进行。此外也可以利用Xcode直接加载Ionic构建好的工程，在真机上调试。

1
2
3


ionic platform ios  #添加ios平台
ionic build ios     #构建ios平台代码
ionic emulate ios   #在ios模拟器上运行程序

如果在真机上进行调试，需要在构建ios平台代码之后打开Xcode，加载Ionic应用目录下的platforms/ios/TripSearch.xcodeproj工程。之后登陆Apple账号，获得免费的ios开发授权之后即可对项目编译并在真机上运行。

整个过程还是比较麻烦的，需要一定的经验和问题解决能力，因为这不是我们的重点，这里不再多说。

发布

真正的发布需要签名之后发布到各大应用市场，笔者没有相关经验，但觉得这些都还简单，应该难不倒聪明的大家。

基于Ionic的客户端设计

文章目录