欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

h5转app有什么问题(h5封装成app的流程)

程序员文章站 2023-11-27 15:27:58
随着h5标准的发布,使得移动应用的开发有了更多的选择,出于效率、成本、质量等原因,移动应用不再只是单纯的原生开发。今天就简单总结一下目前的三大主流移动应用开发类型。一、webapp、hybridapp...

随着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插件为例:

h5转app有什么问题(h5封装成app的流程)

示例代码:

h5转app有什么问题(h5封装成app的流程)

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

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{
//写按钮点击方法
}