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

技术介绍

Hybrid App介绍

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

有两种构建hybrid app的方法:

  1. Webview app:HTML,CSS和Javascript基础代码在一个内部的浏览器(叫做WebView)中运行,这个浏览器打包在一个原生的app中,一些原生的API可以通过这个包被Javascript获得,比如Adobe PhoneGap和Trigger.io。
  2. 被编译的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特点:

  1. ionic 基于Angular语法,简单易学。
  2. ionic 是一个轻量级框架。
  3. ionic 完美的融合下一代移动框架,支持 storage.blog.fliaping.com,代码易维护。
  4. ionic 提供了漂亮的设计,通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。
  5. ionic 专注原生,让你看不出混合应用和原生的区别
  6. ionic 提供了强大的命令行工具。
  7. 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开发授权之后即可对项目编译并在真机上运行。

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

发布

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