1.简介 1.简介

目前市面上移动应用主流开发模式为混合模式，即HTML5页面+原生页面构成的终端应用，根据场景与性能要求使用不同的模式开发相应界面内容。公司主要采用的是以HTML5为主的混合应用结构，大部分功能页面和实现通过HTML5，客户端与服务器的交互使用AJAX。少部分前端无法实现的功能使用原生语言开发，其优点是对于需要提供多个移动平台（Android/iOS/WinPhone等）的APP，混合开发模式可以极大提高代码可一致性和降低开发成本。

在终端WebView中使用JavaScript调用原生代码，因为不同移动平台的机制和调用接口、参数有所不同，会降低可移植性，因此需要有一个移动应用底层架构来统一JavaScript调用原生代码的接口。目前比较流行的架构是Cordova。

Cordova是一个允许在网页中使用统一的JavaScript代码调用不同移动设备的常用API（拍照、文件系统、扫码等）应用框架。除了标准公共插件，cordova允许自定义插件，从而实现在网页中调用自己编写的原生代码。

HTML5页面必须适合移动设备的展示和操作，因此需要选择一个合适的UI框架，这里采用的是主流移动框架ionic，其特点是：采用angular框架，集成一系列丰富控件，门户活跃，开源免费等。

相较于Web端开发模式，移动端的混合开发为：

HTML打包在本地应用文件夹中，并非WEB项目网页存储在服务器上（当然页面也可通过请求加载服务端页面内容，但应用效率不高，且应用上架容易遭到拒绝）；
应用通过WebView/UIWebView控件加载本地资源文件（HTML/CSS/JavaScript/Resource）来展示页面；
应用通过AJAX请求从服务端获取数据更新页面内容；

应用通过JavaScript代码调用原生接口及页面（拍照、权限申请、定位等）
2. 部署环境

2.部署环境

1、前端开发环境

1）本地安装js和npm，配置环境变量（注：Node.js建议安装LTS版）；

2）执行：npm i –g cordova ionic，安装全局模块cordova和ionic-cli；

3）进入项目根路径，执行：npm i，安装项目依赖node_modules；

2、Android原生

1）本地安装Android Studio开发工具IDE；

2）通过IDE集成的SDK Manager下载项目的SDK版本，建议安装：

SDK版本：26

BuildTools：26.0.2

Android Support Library

Android Support Repository

3）第一次启动Android Studio时，为避免默认下载最新版SDK，可将软件目录 ~/bin/idea.properties 文件中新增一行：android.first.run=true

4）启动界面的Configure -> Project Structure配置好相应的JDK（JDK版本）=1.8）和SDK路径；

注意：由于Google大部分服务国内无法正常访问，建议开发人员通过国内镜像/翻墙的形式去下载和安装

3、 iOS原生

进入AppStore，本地安装Xcode开发工具IDE即可

3.调试步骤

1、Web端开发与调试

1）项目根路径下，执行ionic指令，启动本地服务8100：ionic serve

通过该方式打开项目，默认启动了live-reoload，即项目下的文件代码修改后浏览器立马刷新

2）浏览器需设置跨域，否则网络请求无法正常发送（该问题仅会在开发测试浏览器模拟阶段出现，真机中由于前端代码是直接访问的，并不会有所谓跨域问题），对于Chrome浏览器，可通过如下设置规避跨域请求问题：–disable-web-security –user-data-dir=C:\MyChromeDevUserData –disable-features=CrossSiteDocumentBlockingIfIsolating

3）浏览器访问localhost:8100，默认访问入口页，建议通过手机模拟模式查看页面效果

2、Android前端调试

1）真机连接电脑，手机开启USB 调试模式

2）打开浏览器Chrome，输入地址chrome://inspect

3）打开apk，界面会显示当前打开的html地址，点击即可打开DevTools界面。

注意：该调试方式前提是打的安装包为debug签名包，且Android版本>=4.4

3、Android原生代码调试

打开Android Studio，通过断点调试Java代码

4、iOS前端调试

1）打开Safari窗口，选择偏好设置，在高级中显示开发菜单

2）选择开发菜单，查看真机/模拟器行，能够选择当前正打开的前端页面

3）点击html地址，即可打开Devtool界面

5、iOS原生代码调试

打开Xcode，通过断点调试Object-C代码

4. 项目结构

4.项目结构

1.platforms：不同平台原生代码

2.plugins：第三方插件

3.gillion_plugins：自定义插件

4.resources：资源文件（图标、启动页更换地址）

5.www：前端代码

5.1css：样式目录

5.2html：项目界面目录

5.3img：图片资源目录，项目组可存放图片资源

5.3.1framework：框架默认图片资源，禁止项目组修改

5.4js：

5.4.1common：公共文件

5.4.1.1app.js：根模块

5.4.1.2bootstrap.js：应用启动

5.4.1.3config.js：应用配置，项目组可在此配置：应用参数、页面加载项、控件配置

5.4.1.4routes.js：应用路由，项目组可在此配置状态机

5.4.1.5run.js：应用启动事件，项目组可在此拓展

5.4.1.6service.js：服务实现类，项目组可在此全局定义接口规范

5.4.1.7util.js：工具类，项目组可在此拓展工具方法

5.4.1.8projectModule.js：项目组可在此引入依赖和模块

5.4.2controllers：项目组拓展控制器

5.4.3directives：项目组拓展指令

5.4.4filters：项目组拓展过滤器

5.4.5services：项目组拓展服务

5.4.6framewors：框架核心库，封装了大量组件和服务，禁止项目组修改

5.5lib：前端第三方库，项目组可自行添加（推荐通过bower安装）

6.config.xml：cordova配置文件，用于全局控制应用插件行为

5. 自定义页面

5.自定义页面

1、拷贝一个生成的html和js，将内容清空

2、js定义新页面的路由信息：

注意：文件路径以www作为baseUrl，注意controller名称需要与创建的Ctrl.js的名称一致

3、在新创建的js和html中实现自定义业务逻辑和代码
6.自定义拓展JS方法

6.自定义拓展JS方法

1、云平台移动端代码生成文件中，用户自定义拓展js命名为【业务对象名】【页面类型】【页面名称】js

2、在拓展类中，重写BsCtrl中的方法内容，注意方法名称需一致，代码执行将执行拓展方法内容

7. 集成极光推送

7.集成极光推送

1、访问极光推送官网，创建帐号，登录并创建APP。根据移动项目信息填写相关内容（根据需适配的平台设置推送），记住应用创建的AppKey。

2、进入项目根路径，访问Terminal，执行cordova命令安装jpush插件：ionic cordova plugin add jpush-phonegap-plugin –variable APP_KEY=你的appkey

插件安装完成后，可以看到在项目的~/plugins路径下，新增了推送相关插件模块

注：ionic cordova相关命令需先集成环境nodejs，并全局安装ionic、cordova模块

3、修改代码~/www/js/common/run.js，在应用启动时初始化极光推送，并可以实现监听推送相关方法内容

4、如若需要根据不同用户/不同角色推送消息数据，可在登录/注销方法中设置推送别名

5、$gPush中集成了常用的推送方法，包括但不限于，详细内容可查阅js文件：

initJPush：初始化极光推送

setJPushAlias：设置推送别名

deleteJPushAlias：删除推送别名

getJPushAlias：获取推送别名

openNotification：打开通知回调事件

receiveNotification：应用处于前台时，收到推送消息事件

backgroundNotification：应用处于后台时，收到推送消息事件

8.应用安装包更新

1、应用启动时，访问后台获取服务器最新版本号信息

其中updateType为0时为普通更新（提示框提示用户是否更新），1为强制更新（wifi环境下直接下载并安装）

2、iOS上架到AppStore应用默认不支持应用内更新，需要通过应用商城去更新最新版代码，downloadUrl可以传递AppStore应用商城的应用地址，当应用可更新时跳转到应用商城中引导用户更新：$gUpdate.updateApp中的downloadUrl = itms-apps://你的应用在应用商城的地址

注意：iOS应用上架前会检查上架代码内容，如若AppStore版本应用，需要将updateService中的方法getFirDownloadUrl移除，否则审核会因提示包含更新应用导致无法上架成功

3、iOS企业版应用支持应用下载安装，updateService默认集成了应用托管平台im的应用更新方法，开发人员只需传入托管平台短连接名称即可下载最新版应用内容：

9.Android热更新

由于iOS Appstore审核条例，App集成热更新内容容易遭到审核拒绝，故这边仅集成Android热更新

1.安装全局插件cordova-hcp：npm install -g cordova-hot-code-push-cli

2.安装项目插件ionic plugin add cordova-hot-code-push-plugin

3.项目根路径~/config.xml中，新增配置项：

4.项目根路径~/cordova-hcp.json中填写应用信息：

5.每次发布新版应用前，执行命令：cordova-hcp build，该命令会检索~/www文件夹内容，生成对应清单文件和时间戳

6.需将最新代码放到服务器，应用启动时会去访问最新www路径代码和清单文件，如若匹配则根据更新机制静默更新代码内容
10. 移动端数据库Sqlite

10.移动端数据库Sqlite

1、安装原生插件sqlite：ionic cordova plugin add cordova-sqlite-storage，安装完毕后，在~/plugins路径下生成storage插件内容

2、安装全局模块typeorm、typescript：npm i –g typeorm typescript

3、项目根路径下，执行npm install安装依赖库

4、创建migration通过命令生成migration：typeorm migration:create -n xxx，xxx是本次版本执行的名称，该命令会在~/ts/migration路径下创建hash-xxx.ts文件

其中，up表示应用低版本向高版本更新时，数据库会执行的方法块，由于移动设备默认不支持版本从高往低更新，故down方法可以置空

注： migration中的代码内容有且仅会实现一次，一般用于创建表/字段修改，由于移动客户端安装在用户手机中，当客户端更新修改了数据库sqlite表/字段时，代码需要根据应用版本号执行数据库内容

5、通过up参数queryRunner，我们可以实现sql语句如：创建表、修改表字段等sql语句，示例中我们创建了表POST、PARENT2和CHILD2

6、将~/ts/migration/index.ts中引入新生成的文件，执行命令：tsc，文件会编译成js，并生成到www文件相应路径下

7、在~/www/entity中声明实体，包含表结构信息：

8、run.js中，注入服务$gSqlite，初始化数据库sqlite，引入migration和表实体

9、通过面向对象的方式来执行sql语句：

1）增

单表新增、批量新增

主子表新增

2）删

3）改

4）查

查询单笔/多笔数据

级联查询主子表数据

11.地图与定位

1.布局元素添加地图指令，需要指定id。由于地图可滑动，故ion-content需要设置为scroll=”false”，否则会导致高度计算有误。

  <ion-view> 
   <ion-header-bar class="bar-stable"> 
    <div class="button button-clear ion-chevron-left" ng-click="$ionicGoBack()"></div> 
    <div class="title"> 
     <span>地图</span> 
    </div> 
   </ion-header-bar> 
   <ion-content scroll="false"> 
    <g-map id="myMap"></g-map> 
   </ion-content> 
  </ion-view>

2.Ctrl中引入服务gMap，该服务封装了地图基础功能。

initMap: initMap, // 初始化地图
getMap: getMap, // 返回当前地图对象
geoLocation: geoLocation, // 获取当前位置
geoLocationByNative: geoLocationByNative, // 调用原生借口获取当前位置
geoLocationAndCenter: geoLocationAndCenter, // 获取当前位置，并将地图移动到当前位置
route: route, // 路线规划
localSearch: localSearch,  // 本地检索
drawMarkers: drawMarkers, // 添加覆盖物
geocorder: geocorder, // 地址解析
convertor: convertor, // 坐标转换（转成百度坐标）
navigator: navigator, // 导航
destoryMap: destoryMap, // 销毁地图对象
denoise: denoise, // 去噪

3.当调用地图相关方法时，服务代码中默认判断当前是否在真机环境运行，如成立则调用原生相关方法内容，否则调用JavaScript Bmap相关方法。默认定位信息通过地图原生sdk获取，如若运行在浏览器环境则采用jssdk定位。

// 地图加载完成
$scope.$on('map.ready',
function(ev, map) {
    $scope.map = map;
});

/**
*定位
*/
$scope.geoLocation = function() {
    $gMap.geoLocation().then(function() result) {
        console.log(result);
    })
};

12.应用打包与上架 12.应用打包与上架

Android

1.确保Android开发环境配置无误，Android SDK环境变量配置完毕（ANDROID_HOME/JAVA_HOME）。

2.如若项目还未创建原生android项目，项目根路径执行命令：ionic cordova platform add android，有则跳过该步骤。

3.检查~/platforms/android路径下是否有release-singing.properties，如若不存在则将根路径的文件拷贝到目标路径下，有则跳过该步骤。

4.通过 ionic-cli 和 gradle 打包应用：在项目根路径，执行命令：ionic cordova build android –release，打包正式安装包，在~/platforms/android/app/build/outputs/apk中获取apk文件。

5.通过Android Studio打包应用：开启Android Studio，打开项目（注意路径为~/platforms/android），选择Gradle -> android -> Tasks -> build -> assembleRelease。在~/platforms/android/app/build/outputs/apk中获取apk文件。