HBuilder完成webApp入门（3）关于webview (转)

2024-05-16 04:23:05

个人认为WebView是 html5+ API的一个非常重要的部分。

WebView 的帮助文档http://www.html5plus.org/doc/zh_cn/webview.html

为什么对WebView的掌握很重要？因为它是一个HTML5+ APP的基础。刚刚学习HBuilder的同学一般会将重点放在 mui 组件上。mui 提供了很多默认的方法，如 openWindow(打开新页面)，back(回退到上一个窗口)等等，不会意识到其实你操作的就是WebView对象。

那么在HBuilder的引擎中，WebView是一种什么样的实现呢？请参看下图：

从上面的图我们可以看到，每个页面其实就是对应一个WebView对象。每个WebView有自己的javascript运行环境，各个WebView之间不会干扰。同时，所有WebView会共享storage，session等信息。

如果你之前有Web开发经验，会知道在浏览器里从一个页面转入到新的页面的时候，旧的页面就无论如何也看不到了---除非你有一个返回的处理。

但是HBuilder就不同了。

正如上面的图所示，每次迁移到新的画面的时候，打开了一个新的WebView，但是旧的WebView其实还停留在那里，只不过新的WebView覆盖在了上面。

当然，如果你直接使用plus.Webview的方法，如create, show 是可以的。但是HBuilder给我们提供了更好的方法，就是 mui 库的 openWindow, preload 等方法

在 mui 中，默认有后退的功能，也就是返回到上一个页面。我们可以看看 back 的代码：

Js代码

$.registerBack = function(back) {
return $.regesterHandler('backs', back);
};
/**
* default
*/
$.registerBack({
name: 'browser',
index: 100,
handle: function() {
if (window.history.length > 1) {
window.history.back();
return true;
}
return false;
}
});
/**
* 后退
*/
$.back = function() {
if (typeof $.options.back === 'function') {
if ($.options.back() === false) {
return;
}
}
$.each($.backs, function(index, back) {
return !back.handle();
});
};

我们可以看到，back 调用的其实是 window.history.back()，这应该依赖于浏览器内核的实现。因为HTML5+ API 不涉及浏览器内核的标准定义，也没有 webview 的生命周期的标准定义，所以大家一定要注意控制 webview 的生命周期，以避免重复创建出来多个 webview。

转载于:https://www.cnblogs.com/lyn940208/p/6013849.html

HBuilder完成webApp入门（3）关于webview (转)相关推荐

HBuilder完成webApp入门（2）
一.HBuilder的下载地址:http://www.dcloud.io/,点击那个"DownLoad"就可以了二.假设一切顺利,启动HBuilder后,大家会看到如下的界面 ...
BUI Webapp 入门教程
BUI 是用来快速构建界面交互的UI框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( 微信, 钉钉, 淘宝, 支付宝等 ), ...
安卓开发入门教程-通过WebView打开网页
什么是WebView WebView是用来打开网页的一种UI控件,可以在App内跳转到指定网址,而不是采用系统浏览器打开网页. 基础样例效果图实现方案 activity class MainAct ...
webapp入门到实战_web前端入门到实战：前端高手在CSS 开发效率的必备片段
这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找清除浮动浮动给我们的代码带来的麻烦,想必不需要多说,我们 ...
Hbuilder开发app实战-识岁01-actionsheet实例
前言之前写了HBuilder开发App入门-滴石.相信大家看完后应该能够入门了, 之后会做一些简单的app.把nativejs一些经常使用的功能都过一遍,这样以后做app就没什么难的了. 识岁借助 ...
Hbuilder的error
Hbuilder的error ##运行=>手机=>显示Webview调试控制台,你会发现新的大陆
A095_Html5入门
目录 1.内容介绍 2.知识回顾 2.1.学习过哪些前端的内容 2.2.问题分析 2.3.小结 3.HTML5 3.1.什么是HTML5 3.2.为什么要学习HTML5 3.3.新功能 3.4.兼容性 ...
学习跨平台移动应用开发必须理解的一些概念
跨平台移动应用开发概念移动应用开发分类 Native app Web app Hybrid app 三者的区别关于native.js的理解典型跨平台移动APP开发框架 H5与H5+ H5 app ...
App跨平台开发框架分析
所谓的跨平台app开发就是一套代码写完以后可以多端发布运行到各个平台,比如:安卓.iOS.web. 原生开发是一对一的,安卓.iOS需要分别写两套代码,学习成本高.开发成本高.后期维护麻烦:跨平台AP ...

最新文章

热门文章