标签:
Deviceone平台并不是基于html5的跨平台开发工具。我们开发一个app都是使用原生的组件,但是在某些场景下html5也是非常好的选 择,比如复杂的图文混排(类似新闻),比如报表chart之类用html很方便。如果你对html相关技术熟悉的话,你也可以在更多场景使用。
我们从二个方面来介绍:
这是基本功能,加载网页很简单就是通过设置url属性为本地html(data://,source://协议)和web网页(http://,https://协议)。
do_Webview加载网页你可以理解为就像一个内嵌的浏览器打开网页一样,常用的js,css等所有和web相关的技术都支持,通常手机都带了缺省的浏览器,这个浏览器的核心和do_Webview是一致的。
当然还是有可能有细微差别,浏览器相对来说成熟更多,容错和兼容性更强。
1
2
3
|
var webview = ui( "do_webview_id1" ); webview.url = "http://www.baidu.com" |
html相关的技术太多,我们这里不再做介绍,不属于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的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
//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({ statusBarState : "transparent" }); } }); } function loginNewPage(http, page) { http.request(); //对ui的操作最好是通过消息发送到ui.js里去做,而不是直接在html里操作 page.fire( "progressbar" , "show" ); } </Script> |
上面的示例可以看到通过加装本地html可以直接访问deviceone的任何API,包括html不支持的本地读写等操作。
另外加载web页面,也就是http:// 的页面其实也可以访问deviceone的任何API,这会带来一个安全问题,所以do_Webview组件增加一个属性来控制,如果这个属性为false,则无法调用deviceone的其它组件了
1
|
webview.allowDeviceOne = false ; |
标签:
原文地址:http://www.cnblogs.com/mengkaia/p/5586979.html