Webview组件和HTML的介绍

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 = "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的方法：

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({                      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的其它组件了

1	webview.allowDeviceOne  = false ;