Introduction to Webview components and HTML, webview component html

Introduction to Webview components and HTML, webview component html

The Deviceone platform is not a html5-based cross-platform development tool. We use native components to develop an app, but html5 is also a good choice in some scenarios, such as complex text-and-image mixing (similar to News), and html for report charts. If you are familiar with html-related technologies, you can also use them in more scenarios.

We will introduce the following two aspects:

Load webpage

This is a basic function. to load a webpage, you can set the url attribute to local html (data: //, source: // Protocol) and web page (http: //, https: // protocol ).
You can understand do_Webview to load a webpage as if an embedded browser opened a webpage. Common js, css, and other web-related technologies are supported, generally, mobile phones use the default browser. The core of this browser is the same as that of do_Webview.
Of course, there may still be nuances. Browsers are more mature and have better fault tolerance and compatibility.

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

　　

There are too many html-related technologies. We will not introduce them here. They are not part of the deviceone platform.

Call other deviceone Components

This is the focus. The do_Webview component is one of the many components provided by deviceone. This component is part of a ui file and can interact with other components. The js Code in html can call other MM, SM, and UI components.
Similar to calling the deviceone API in ui. js, the only difference is that all operations related to deviceone must be placed inonDeviceOneLoadedIn the callback function, this callback function is a bit similar to JQuery's ready method.
SM and MM are used in the same way, but we recommend that you process the UI operation by triggering the page message. The js Code in worker sends a page-scoped message to test. ui. js and operates other ui components in test. ui. js.
You can refer to the following example. This example shows how to call SM, MM, and UI:

// Login.html <Script> var login = document. getElementById ("login"); var back = document. getElementById ("back"); // all calls related to deviceone must be placed in the onDeviceOneLoaded callback function, similar to the JQuery ready method window. onDeviceOneLoaded = function () {// obtain the sm object and obtain it in the ui. there is no difference in obtaining var nf = sm ("do_Notification") in js; var app = sm ("do_App"); var page = sm ("do_Page"); login. onclick = function () {var name = document. getElementById ("loginName "). va Lue; var pwd = document. getElementById ("loginPwd"). value; if (! Name |! Pwd) {// call native alert method nf. alert ("the user name or password cannot be blank! ")} Else loginNewPage (http, page);} back. onclick = function () {// click the html button to return to the previous page app. closePage ();} // create a mm object and create it in the ui. there is no difference between var http = mm ("do_Http"); http. method = "POST"; http. on ("result", function (data) {// operations on the ui are best performed by sending messages to the ui. js, instead of directly operating the page in html. 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 (); // operations on the ui are best performed by sending messages to the ui. js, instead of directly operating the page in html. fire ("progressbar", "show") ;}</Script>

　　

The preceding example shows that you can directly access any API of deviceone by adding a local html, including local read/write operations not supported by html.

In addition, loading web pages, that is, http: // pages can also access any API of deviceone, which poses a security problem. Therefore, the do_Webview component adds an attribute to control the function, if this attribute is false, other components of deviceone cannot be called.

webview.allowDeviceOne  = false;