移动手机APP混合模式开发

孙月玲

摘要 传统手机APP开发模式主要分为Android和iOS两大阵营，随着Web大前端技术的发展，混合模式下开发手机APP能够大幅降低移动APP开发，缩短开发周期，使开发更为便捷，帮助数百万Web開发者转化成移动APP开发专家！

【关键词】手机APP开发 APICloud Res tful-API

1 前言

在移动互联网越来越火爆的今天，用户更倾向于手机中安装的移动APP软件所提供的服务，从而摆脱PC电脑端的束缚。现在的移动APP软件涉及各行各业，在市场上已经占有一席之地，移动APP软件从开始的需求到最终的产品无论从开发周期到开发效率，开发成本都提出了较高要求。移动手机APP开发也从原生应用开发技术发展到混合模式开发阶段。

移动手机APP原生应用开发，是指在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行APP开发。比如Android是利用java、eclipse、Androidstudio，IOS是利用Objective-C和Xcode进行开发。原生应用APP开发，由于利用的是官方提供的语言和工具并且能够直接操控硬件设备，比如读取短信，多点触控、NFC、调用摄像头等，在应用性能上和交互体验上应该是最好的，但是原生应用的可移植性比较差，特别是一款原生的APP，Android和IOS都需要两个团队各自开发，要写两套同样的逻辑和界面。

而混合应用开发正是结合了原生应用和Web开发技术，取长补短的一种开发模式。原生代码部分利用WebView插件或者其它的框架为Web H5提供了一个容器，程序主要的业务实现、界面展示是利用H5相关的Web技术进行实现的。比如现在的钉钉、淘宝、春秋航空等都是利用的混合模式开发。

混合APP开发可以说是未来的技术发展趋势，目前主流的混合开发技术主要有：cordova模式开发、ReactNative跨平台原生开发和WeeX开发技术、基于APICloud云平台模式开发等。

2 Cordova混合模式开发

Apache Cordova是一个开源的移动开发框架。允许使用标准的web技术-HTML5，CSS3和JavaScript做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。

移动应用开发者，想扩展一个应用的使用平台，Cordova启用的WebView可以给应用提供完整用户访问界面。插件是Cordova生态系统的重要组成部分，在一些平台中，也可以作为一个组件给大的、混合应用。Cordova提供了和原生组件相互通信的接口并绑定到了标准的设备API上。这就能够通过JavaScript调用原生代码。

Apache Cordova项目维护着一组插件叫做核心插件。这些核心插件可以让你的应用程序访问设备功能，比如：电源，相机，联系人等。

插件是必须的，除了核心插件，这里还有一些第三方插件他们提供了一些附加功能，但这些功能不一定在每个平台都能用。可以通过搜索Cordova插件使用插件搜索或者npm，也可以开发自己的插件。注意：当你创建一个Cordova项目它不存在任何插件。这是新的默认行为。任何你需要的组件，哪怕是核心组件，你也必须明确添加。Cordova不提供任何UI部件和MV框架。Cordova只提供运行环境。如果你想使用UI部件或者MV框架，你需要选择他们并包含在你的应用程序中。

Cordova的命令行运行在Node.js上面并且可以通过NPM安装。根据平台具体指导安装相应平台的依赖。打开命令提示符或终端，然后键入npm install-g cordova

使用命令行创建一个空的Cordova项目。导航到希望创建项目的目录，然后键入cordova create 。要知道这个命令完整的选项，键入cordova help create。

在创建完一个Cordova项目后，导航到项目目录。在项目目录中，需要添加你想构建app的平台为了添加平台，键入cordovaplatform add 。为了知道可以添加的平台，可以在命令中键入cordova run运行cordova platform。3ReactNative和WeeX跨平台混合开发

React Native是Facebook在React.js Conf2015大会上推出了基于JavaScript的开源框架。React Native把重点放在所有开发人员关心的平台的开发效率上一一开发者只需学习一种语言就能轻易为任何平台高效地编写代码，它结合了Web应用和Native应用的优势，可以使用JavaScript来开发Android和iOS原生应用。在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染等。React Native能够使用基于JavaScript和React一致的开发体验在本地平台上构建世界一流的应用程序体验。Facebook在多个应用程序产品中使用了React Native，并将继续为ReactNative投资。React Native必须安装的软件是Chocolarey，Chocolatey是一个Windows上的包管理器，类似于linux上的yum和apt -get。一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。译注：chocolatey的网站可能在国内访问困难，导致上述安装命令无法正常完成。请使用稳定的翻墙工具。如果你实在装不上这个工具，也不要紧。所需的python2和nodejs你可以分别单独去对应的官方网站下载安装即可。

而Weex是阿里巴巴在2016年4月21日Qcon大会上宣布的跨平台移动开发工具，是使用Web开发体验来开发高性能原生应用的框架。Weex致力于使开发者能基于当代先进的Web开发技术，使用同一套代码来构建Android、iOS和Web应用。具体来讲，在集成了WeexSDK之后，你可以使用JavaScript和现代流行的前端框架来开发移动应用。Weex的结构是解耦的，渲染引擎与语法层是分开的，也不依赖任何特定的前端框架，目前主要支持Vue.js和Rax这两个前端框架。Weex的另一个主要目标是跟进当代先进的Web开发和原生开发的技术，使生产力和性能共存。在开发Weex页面就像开发普通网页一样;在渲染Weex页面时和渲染原生页面一样。对于那些不依赖于UI的功能，Weex推荐将它们包装到模块中，然后使用weex.requireModule（xxx）来引入。这是使用javascnpt调用原生功能的一种方法，如网络，存储，剪贴板和页面导航等功能。这里有一个使用stream模块获取Vuejs的star数的例子。同样，Weex也提供了一套基础的内置模块，也支持将已有的原生模块集成到Weex中。

4 基于APICloud云平台混合模式开发

APICloud移动应用开发平台，它是中国领先的“云端一体”的移动应用APP开发云服务，利用APICloud技術可以大幅降低移动APP开发和管理的难度，让APP开发工作量从1个月缩减为1周，简化了移动应用开发技术。APICloud“云端一体”的理念，可以说是重新定义了移动应用开发。APICloud由“云API”和“端API”两部分组成，为开发者从“云”和“端”两个方向提供API服务。可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。

4.1 APICloud技术的“端API”

在手机端进行界面设计时，开发者可以利用由APICloud官方提供的浏览器样式Api.css清除框架，可以让界面HTML元素在所有手机上表现一致;利用由APICloud官方平台提供的辅助脚本框架api：js，它遵循主流前端框架iQuery的使用习惯，完成手机端APP的动态信息获取和展示;还可以利用APICloud明星发者提供的一款前端布局框架AUI，实现各种页面类型的快速布局;sWipe.js框架可以让您的页面快速实现多屏切换、轮播图等功能，并且切换流畅;当您使用Web方式显示数据列表时，使用dot.js模板可以有效提高开发效率和运行体验，通过简单的自定义语法即可完成复杂布局的列表开发。

apiready= function（）{

api.parseTapmode（）;

var header= $api.byld（aui-header）;

var footer= $api.byld（footer'）;

$api.fixStarusBar（header）;

var headerPos= $api.offset（header）;

var footerPos= $api.offset（footer）;

meaus= $api.domAll（footer， '.aui-tab-item）;

var frames=[];

for （vari=0;i

frames.push（{

name：listframe+i.

url： '../html/listframe'+i+'.html'

））

）

api.openFrameGroup（{

name：Tlistframe'.

scrollEnabled： true.

rect：f

X：0.

y：headerPos.h，

w： api.winWidth，

h：api.winHeight - headerPos.h -footerPos.h

}，

index：0.

frames： frames

}，function（ret， err）{

fnSetTabSelected（ret.index）;

））;

）

开发者还可以通过调用模块，和手机硬件或其他应用交换数据：

function fnSetAvatar（）{

api.actionSheet（{

title：选择‘，

cancelTitle：取消，

buttons：[拍照，相册]

），function（ret， err）{

if （ret）{

var sourceTypes=[

‘camera'，

'album'

];

api.getPicture（{

sourceType： sourceTypes[rerbuttonlndex -1]，

allowEdit： true，

qualiry： 50，

targetWidth： 750，

targetHeight： 750，

saveToPhotoAlbum： false

};function（ret， err）{

if （ret）{

//alert（JSON.stringify（retdata》;

fnUploadAtavar（ret.data）;

） else{

alert（JSON.stringify（err》;

）

）），

） else{

alert（JSON.stringify（err》;

）

}）;

）

4.2 APICloud技术的“云API”

“云API”可以用任何可以发送http请求的设备来与API Cloud进行交互，开发者可以使用“云API”做以下事情，例如：

（1） -个移动网站可以通过Javascript来获取API Cloud上的数据;

（2） -个网站可以展示来自API Cloud的数据;

（3）可以上传大量的数据，之后可以被一个移动APP读取;

（4）使用任何语言写的程序都可以操作API Cloud上的数据：

（5）如果您不再需要使用APICloud，您可以导出您所有的数据。

4.3 采用Restful -API接口规范

各种网络应用程序，均分为前端和后端两个部分。当前的发展趋势就是，前端设备层出不穷（手机、平板、桌而电脑、其他专用设备…）。为方便不同的前端应用与后端服务进行通信，因此，必须有一种统一的数据交换机制，这导致API构架的流行，甚至出现“APIFirst”的设计思想。

RESTful API是目前比较成熟的一套互联网应用程序的API设计理论。它是一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。 apiready = function（）{

var Id= $api.getStorage（"Id"）;

var http = $api.getStorage（"http"）;

api.aj ax（{

url： http+'SunFlower/api/show.php'，

method： 'get'，

data：f

values：{

Id： Id

）

）

}， function（ret， err）{

∥if （ret）{

//

api.alert（{msg： JSON.stringify（ret）））;

/

） else{

// api.alert（{

//

msg： JSON.stringify（err）

// ））;

}|、

//alert（ret.data[O].MnName）;

var GuardianShip= documentgetElementByld（ "GuardianShip”）;

var GdName二documentgetElementByld（"GdName"）;

var needs=documentgetElementByld（"needs”）;

GuardianShip.innerHTML= retdata[Ol.GuardianShip;

GdName.innerHTML= ret.data[0]GdName;

needs.innerHTML= ret.data[0]needs;

））;

};

參考文献

[1]刘刚编著，移动APP产品原型设计[M].中国铁道出版社，2014.

[2]李争，微软开源跨平台移动开发实践[M].清华大学出版社，2011

[3]徐凯.跨终端Web [M].电子工业出版社.2013.