html5与app,HTML5和h5
H5必知必会之与App交互
奇技指南
成都创新互联主营莲湖网站建设的网络公司,主营网站建设方案,手机APP定制开发,莲湖h5小程序开发搭建,莲湖网站营销推广欢迎莲湖等地区企业咨询
2018年11月26日发表的“360 AI音箱H5开发实践”一文中,曾简单提到“与Native交互”。本文将就此主题深入探讨H5与App交互的几种常见模式。
本文内容如下:
H5,在中国被专门用来指代开发内嵌于手机应用中的网页的技术,外国好像并没有这个说法。从技术上讲,H5是HTML5即Hyper Text Markup Language(超文本标记语言)第5版的简称。而HTML只是开发网页要用到的多种技术之一。除了HTML,还要用CSS设计界面,用JavaScript实现交互,甚至要用Node.js实现服务端逻辑。为什么H5会被用来笼统地指代这些技术呢?我猜一是因为它简单,二是移动端网页开发技术又恰好需要这么一个概念。
移动端网页运行在手机应用内嵌的浏览器引擎中,这个没有UI的内核容器统称WebView,即iPhone的UIWebView(iOS 2.0–12.0)、WKWebView(iOS 8.0+,macOS 10.10+)和Android的WebView。总之,WebView就是在手机应用中运行和展示网页的界面和接口(神奇的是,英文Interface,既可以翻译成“界面”也可以翻译成“接口”)。
H5与原生应用的交互都是通过原生应用中的WebView实现的。通过这个环境,H5可以调用原生应用注入其中的原生对象的方法,原生应用也可以调用H5暴露在这个环境中的JavaScript对象的方法,从而实现指令与数据的传输。
比如,在Android应用中,WebView类有一个公有方法addJavascriptInterface,签名为:
调用这个方法可以向WebView中以指定的名称name注入指定的Java对象object。这样,WebView中的JavaScript就可以通过name调用object的方法。比如:
在iOS或macOS中,需要通过创建WKWebView类的实例在应用中嵌入网页,交互过程类似。
所谓基础接口,就是首先要规定原生应用和JS分别在WebView里注入/暴露一个什么对象:
并约定在这两个对象上分别可以调用什么方法:
顾名思义,NativeBridge.callNative是由JS调用向Native传递指令或数据的方法,而JSBridge.callJS则是由Native调用向JS传递指令或数据的方法。方法签名中的参数含义如下:
基础接口只有两个对象和两个方法,JS与App间的互操作则通过action和params来扩展和定义。
对于JS而言,虽然这里只定义了一个对象一个方法,但实践中,可以把action对应方法的实现附加到JSBridge上,只要把callJS实现为一个分发方法即可,比如:
这样,所有对callJS的调用,都会转化成对JSBridge上相应action方法的调用,优点是只需一行代码。
另一种实现方式是通过switch...case语句实现调用分发,比如:
这样实现的优点是所有方法一目了然,当然同样也是把所有相关接口都附加到同一个JSBridge对象上。
以上两种实现模式各有利弊。
由JS发起的单向调用App的操作,主要涉及加载URL和切换到原生界面,可对应如下action:
loadUrl调用的参考协议如下:
这里NativeBridge是App的原生对象,其callNative方法被调用时,会收到一个对象(字典/映射)参数。根据这个参数的action属性的值,App可知需要执行的操作是加载URL。于是再取得params属性中的url,发送请求即可。
loadContent调用的参考协议如下:
同上,这里通过params向App传递了必要参数,App负责切换到相应的原生界面。
由App发起的单向调用JS的操作,主要涉及用户点击后退按钮(),可对应如下action:
can_back调用的参考协议如下:
此调用返回的值示例如下:
顾名思义,can_back用于App询问JS:在返回上一级界面前,是否弹窗提示用户?
返回值中的can如果是true,则直接返回,不提示;如果是false,则弹出一个确认框,请用户确认。另一个值target是与App约定的返回目标,比如prev表示返回上一级,top表示返回顶级,等等。
双向调用是JS先调用App,然后App在完成操作后再调用JS,双向通常都需要传递数据。双向调用主要涉及JS调用App原生组件和用户点击右上角按钮,可对应如下action:
loadComponent的参考协议如下:
在这个例子中,涉及JS调用App显示其实现的城市选择组件:type: 'location',用户选择完城市之后,App再调用set_location,将用户选择的城市名称传给JS:
JS根据拿到的值更新界面,完成一次双向调用。另一个例子是JS调用原生的日期选择组件,与此类似。
为什么叫displayNextButton?因为根据具体业务场景,可能存在如下三种情况:
displayNextButton协议的参考实现如下:
以上代码示例表明,JS调用App,告诉App显示“下一步”按钮,但是要禁用变灰,因为enable: false。如果传递的是enable: true,那么用户就可以点击“下一步”按钮了。点击之后,App再调用JS的save_form。最后,如果不想显示按钮,可以传递name: ''。
下面重点说一下用户点击“下一步”按钮,App调用save_form的场景。此时也分两种情况:
如果是JS通过App保存数据——可能因为App端实现了数据写入必需的加密机制——那么,JS可以在App调用save_form时将约定好的数据返回给App,由App去保存数据。
如果是JS直接保存数据,比如通过Ajax,那么在保存完数据之后,则还需要调用前面所说的App暴露的loadUrl或loadComponent方法,以告知App切换界面。当然这种情况下会出现第三次调用,但仍然属于双向调用。
本文介绍了JS与App交互的几种模式,而且只讨论了JS端的实现。在开发实践中,团队各端总会面临哪一端主导的问题。本文展示的参考实现就是H5端主导的一种实现形式。H5主导的特点是把主要业务逻辑都封装到WebView中,App主要协同配合,而优点是业务逻辑的变更不会蔓延到App。毕竟相对于H5,App的安装部署模式会造成多版本共存问题,需要尽可能控制新版本。假如由App端主导,将逻辑封装在App端,势必造成版本不受控,给整个项目或产品埋下隐患。
当然,事无绝对。具体情况还要具体分析。而且,哪方主导有时候也取决多方面因素。实践中还是要因人、因时、因势制宜。
html5做手机app和做手机网页一样吗
不一样,需增加自适应标签来保持一样。
代码如下:
meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/
解释:Viewport指用户网页的可视区域,content中的“width”指的是虚拟窗口宽度,上面代码意为虚拟窗口/页面宽度初始比例为1,最小比例为1,最大比例为1,用户不可扩展,页面不可缩放。
扩展资料:
HTML5的事件属性和异常处理
事件属性
HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性:
onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
移动APP和HTML5的区别是什么
想了解他们之间的区别,先看一下各自的简单定义吧。
app:主要是指application(应用程序)
HTML是hypertext markup language(超文本标记语言)
主要区别有
1.应用环境:
手机原生app面前比较流行环境是Android和IOS两个版本。
HTML5主要是在浏览器中进行运行和渲染,其实浏览器是App的一种。
2.相关编程语言:
移动APP的编程语言一般是:c#,Java, c,vb 等...
HTML5的编程语言则是:html5,css3,javascript,php/jsp/asp 等...
3.开发成本和周期:
移动APP相对来说开发成本比较高,周期也比较长。html主要应用于前端web开发,开发制作周期短,费用少。
4.兼容性
手机app在不同的系统中需要开发不同版本(例如前面所说的Android和IOS),而html5可以跨平台主要有浏览器就可以运行。
5.用户体验。执行效率,显示效果,可以调用的系统权限都是不一样的。
在用户体验和表现这个方面 APP提供用户展示图形界面和数据展现的丰富性方面要比HTML5好。而且调用的系统权限APP相对权限要高。
总结:html5和app各有自己优势和不足,需求者应该根据各自的特点来选择合适的语言。
HTML5和原生APP有什么不一样
HTML5的APP,指的是使用HTML5技术实现的,功能与交互类似于APP的移动端网站。
原生APP,指的是使用iOS或Android开发语言实现的APP(iOS开发语言为Object C、Android开发语言为Java)
使用HTML5技术与Object C / Java语言合并开发的应用被称为“Hybird APP”。
此外,2015年Facebook出品了可用于JavaScript开发的移动端原生应用 - React Native,React Native实现了对iOS和Android两大平台的支持。
HTML5技术目前并不广泛应用于APP的开发。
APP和HTML5有啥区别?
APP和HTML5有啥区别:
1.html5的app比较轻巧,原生态app如比较正规,html5实现的功能有限,只能实现一些轻型的交互场景,而app则可以完美解决。
2.html5虽然可以跨平台,可是浏览器有个加载速度,对于用户体验上说,有个加载的等待,就比如你用qq浏览器打开百度,和直接使用百度app是两种体验。浏览器打开百度,还得有个加载,而百度app则duang的出下了输入框界面。
3.html5的app对于导航来说,目前有个弊端。而原生态app则在页底固定悬浮着导航菜单。
4.html5 app也有自己的优势,比如有的app页面想要分享出来,则采用html5 app。也比如滴滴打车集成在微信里一样,如果手机中没有滴滴打车的app,则直接可以在默认浏览器上加载出来,进行打车。
html5 app在设计时需要注意的一些要点:
1)各手机浏览器的兼容测试
2)底层服务的调取(能调取,但只有当其是核心功能时才保留 eg:新浪、美团等皆去掉了头像上传功能)
3)注意离线数据存储,减少数据请求频率。
4)考虑保存用户的哪些数据:设置、个人数据、阅读锚点、跳出页面等。【这点一般说的就是导航菜单】
5)避免动效与浏览器的交互冲突
6)按顺序 异步加载
网站栏目:html5与app,HTML5和h5
网站网址:http://pwwzsj.com/article/dsgieoi.html