h5转app有什么问题（h5封装成app的流程）

随着h5标准的发布，使得移动应用的开发有了更多的选择，出于效率、成本、质量等原因，移动应用不再只是单纯的原生开发。

今天就简单总结一下目前的三大主流移动应用开发类型。

一、webapp、hybridapp、 nativeapp简单介绍

webapp

webapp是指使用前端语言编写的可以用于多平台的应用，运行在手机或浏览器上，对手机性能要求比较高。

• 受限于手机的webview，页面普遍存放于服务器。
• 更新容易，更新无需通知用户，不用手动升级。
• 开发成本低，维护简单。
• 体验差，用户留存较低。
• 网络依赖性较强。

hybridapp

hybridapp是指使用原生语言与前端语言编写的只能用于ios和android平台的应用，但其总体特性更接近nativeapp。

• 前端js调用原生提供的js的api，实现功能。
• 更新较容易，大部分需要无法自动更新，中控易动可实现更新无需通知用户，不用手动升级。
• 开发成本低，维护简单。
• 受限于手机的webview。
• 仍受限于技术，网速。
• 体验好，用户留存高。

nativeapp

nativeapp是指基于手机操作系统如ios、android，使用原生程式编写的应用，运行在手机上。

常用语言
ios ：objective-c swift
android ：java

• 开发成本高，需要两端开发人员，维护成本高。
• 更新较难，需要上传应用市场，需要手动升级。
• 用户体验好，留存率高。
• 性能稳定，反应速度快。

二、webapp、hybridapp、 nativeapp与原生的交互

webapp：h5与wkwebview交互

例如：wkwebview加载html链接展示页面：

oc中wkwebview实现:

//与前端约定统一标识符：nameid
wkwebviewconfiguration *config = [[wkwebviewconfiguration alloc] init];
wkusercontentcontroller * wkucontroller = [[wkusercontentcontroller alloc] init];
[wkucontroller addscriptmessagehandler:self name:@"nameid"];
config.usercontentcontroller = wkucontroller;
 //创建wkwebview
self.webview = [[wkwebview alloc] initwithframe:cgrectmake(0, 0, screenwidth, screenheight) configuration:config];
self.webview.navigationdelegate = self;
[self.view addsubview:self.webview];
//加载url
nsurl * baseurl = [nsurl urlwithstring:self.url];
nsmutableurlrequest *request = [nsmutableurlrequest requestwithurl:baseurl];
[_webview loadrequest:request];
#pragma mark  -- wkscriptmessagehandler
- (void)usercontentcontroller:(wkusercontentcontroller *)usercontentcontroller didreceivescriptmessage:(wkscriptmessage *)message{
   //判断是nameid
   if([message.name isequaltostring:@"nameid"]){
      //写点击按钮的执行方法 
    }
}

html中按钮点击事件中实现:

function jsfunction(){
window.webkit.messagehandlers.nameid.postmessage({});
}

hybridapp：选择第三方框架，根据js api接口调用。例如：中控易动，根据插件文档使用js api接口使用

例如：在中控易动创建应用、添加插件、参考插件api接口参考，这边以appinfo插件为例：

示例代码：

复制示例代码，写在调用的前端按钮事件里面：

function getappinfo() {
// 获取app相关信息
    navigator.appinfo.getinfo(function (result) {
        alert(json.stringify(result));
    },function (error) {
        alert(error);
    });
}

nativeapp：使用oc编码。例如：

uibutton *senbtn = [uibutton buttonwithtype:uibuttontypecustom];
senbtn.frame = cgrectmake(0, 0, 100, 100);
[senbtn addtarget:self action:@selector(senclick)
forcontrolevents:uicontroleventtouchupinside];
[self.view addsubview:senbtn];
- (void)senclick{
//写按钮点击方法
}