Webview组件和HTML的介绍

时间:2022-05-07 03:38:23

Deviceone平台并不是基于html5的跨平台开发工具。我们开发一个app都是使用原生的组件,但是在某些场景下html5也是非常好的选择,比如复杂的图文混排(类似新闻),比如报表chart之类用html很方便。如果你对html相关技术熟悉的话,你也可以在更多场景使用。

我们从二个方面来介绍:

加载网页

这是基本功能,加载网页很简单就是通过设置url属性为本地html(data://,source://协议)和web网页(http://,https://协议)。
do_Webview加载网页你可以理解为就像一个内嵌的浏览器打开网页一样,常用的js,css等所有和web相关的技术都支持,通常手机都带了缺省的浏览器,这个浏览器的核心和do_Webview是一致的。
当然还是有可能有细微差别,浏览器相对来说成熟更多,容错和兼容性更强。

var webview = ui("do_webview_id1");
webview.url = "source://view/test.htm";
webview.url = "http://www.baidu.com"

  

html相关的技术太多,我们这里不再做介绍,不属于deviceone平台的范畴。

调用deviceone其它组件

这个是重点,do_Webview组件是deviceone提供了众多组件中一个,这个组件是一个ui文件里的一部分,可以实现它和其它组件的交互。在html里面的js代码能调用其它MM,SM和UI组件。
和在ui.js里调用deviceone的API类似,唯一区别是所有与deviceone相关的操作都必须放在onDeviceOneLoaded回调函数里,这个回调函数有点类似JQuery的ready方法。
SM和MM的使用方法完全一样,但是对UI的操作建议是通过触发page的消息来处理。比如test.html加载在test.ui里的webview组件里,如果test.html需要控制test.ui里的其它ui,最好的方式是在test.html里的js代码发送一个page作用域的消息给test.ui.js,在test.ui.js里去操作其它ui组件。
可以参考以下示例,这个示例完整展示了调用SM,MM,UI的方法:

//login.html
<Script>
var login = document.getElementById("login");
var back = document.getElementById("back");
//所有和deviceone相关的调用都需要放在onDeviceOneLoaded回调函数里,类似JQuery的ready方法
window.onDeviceOneLoaded = function() {
// sm对象的获取和在ui.js里获取没有差别
var nf = sm("do_Notification");
var app = sm("do_App");
var page = sm("do_Page");
login.onclick = function() {
var name = document.getElementById("loginName").value;
var pwd = document.getElementById("loginPwd").value;
if (!name || !pwd) {
//调用原生的alert方法
nf.alert("用户名或密码不能为空!")
} else
loginNewPage(http, page);
}
back.onclick = function() {
//点击html的按钮返回到前一个page
app.closePage();
}
// mm对象的创建和在ui.js里没有区别
var http = mm("do_Http");
http.method = "POST";
http.on("result", function(data) {
//对ui的操作最好是通过消息发送到ui.js里去做,而不是直接在html里操作
page.fire("progressbar", "hide");
if (data.status == 200) {
app.openPage({
source : "source://view/main.ui",
statusBarState : "transparent"
});
}
});
}
function loginNewPage(http, page) {
http.url = "http://www.baidu.com";
http.request();
//对ui的操作最好是通过消息发送到ui.js里去做,而不是直接在html里操作
page.fire("progressbar", "show");
}
</Script>

  

上面的示例可以看到通过加装本地html可以直接访问deviceone的任何API,包括html不支持的本地读写等操作。

另外加载web页面,也就是http:// 的页面其实也可以访问deviceone的任何API,这会带来一个安全问题,所以do_Webview组件增加一个属性来控制,如果这个属性为false,则无法调用deviceone的其它组件了

webview.allowDeviceOne  = false;

  

Webview组件和HTML的介绍的更多相关文章

  1. 小程序web-view组件

    不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件.   1,web-view这个组件是什么鬼? 官网的介绍: ...

  2. &lbrack;转&rsqb;小程序web-view组件

    本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...

  3. ReactNative WebView组件详解

    在开发Android的时候,一般我们会有一些加载网页的需求,或者执行一些JavaScript,我们都知道在Android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求 ...

  4. Android 4&period;2版本以下使用WebView组件addJavascriptInterface方法存在JS漏洞

    JS注入漏洞存在的Android版本:Android < 4.2 综述:Android的SDK中提供了一个WebView组件,用于在应用中嵌入一个浏览器来进行网页浏览.WebView组件中的ad ...

  5. Hadoop基础-Hdfs各个组件的运行原理介绍

    Hadoop基础-Hdfs各个组件的运行原理介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.NameNode工作原理(默认端口号:50070) 1>.什么是NameN ...

  6. 安卓开发笔记——WebView组件

    我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...

  7. 微信小程序中的 web-view 组件

    web-view 是一个可以承载 web 网页的容器,当 WXML 文件中存在 web-view 组件时,其他组件会自动全部失效,而且 web-view 承载的组件会自动铺满小程序的整个页面.其他组件 ...

  8. ReactNative&colon; 使用网页组件WebView组件

    一.简介 在移动端开发中,很多时候需要嵌入一个网页来帮助实现某一个活动,这方式大大提高了活动快速迭代的灵活性,在RN中,同样也这么处理这种情况的.其实,这种混合式开发称为Hybird APP,它们就是 ...

  9. 【Flutter学习】基本组件之Webview组件

    1.添加依赖 dependencies: flutter_webview_plugin: ^+ 2.导入库 import 'import 'package:flutter_webview_plugin ...

随机推荐

  1. IAR EW8051-8&period;10&period;4安装及破解方法

    第一步:获取破解license 1: 点击桌面左下角“开始”按钮,找到cmd.exe,右键创建cmd.exe 快捷方式到桌面: ————如果是windows7 ,请右键点击cmd.exe 快捷图标,点 ...

  2. Android Studio Gradle构建脚本

    Gradle是一种依赖管理工具,基于Groovy语言,面向Java应用为主,它抛弃了基于XML的各种繁琐配置,取而代之的是一种基于Groovy的内部领域特定(DSL)语言. 构建工具就是对你的项目进行 ...

  3. Error Creating Deployment 有关Tomcat配置问题

    配置Tomcat的时候出现提示框The selected server is enabled,but is not configured properly.Deployment to it will ...

  4. 【剑指offer】面试题39:深度二叉树

    def TreeDepth1(root): if None == root: return 0 if None == root.left and None == root.right: return ...

  5. 查看源码利器之sublime text 3 配置 Ctags 插件

    最近在看源码的时候发现sublime text 3是很给力的一款软件,小巧精致,这里着重讲解一下Ctags协助编译和跟踪函数 一.安装Package Control (如果Preferences &g ...

  6. 使用Func&lt&semi;&gt&semi;和Action简化委托

    /// <summary> /// 入口 /// </summary> public void Run() { TestDelegate t = test; t(); Acti ...

  7. 使用getline输入一行字符串

    给定10个国家名,按字母顺序输出,国家名中可以包含空格,国家名用换行隔开 #include<algorithm> #include<iostream> #include< ...

  8. Owin 自寄宿 asp&period;net web api

    http://owin.org/ Owin 定义了webserver和webapplication之间的标准接口,目标就是为了解耦webapplication对webserver的依赖, 就是说以后可 ...

  9. 小程序scss页面布局

    html <view class="main"> <form bindsubmit="feedback"> <textarea c ...

  10. 兼容ie透明书写

    filter:alpha(opacity=0); opacity:0;filter:alpha(opacity=70); opacity:0.7;