Web App Tutorial: MUI Learning Notes Lesson two: page layouts

Page initialization

In app development, to use the html5+ extension API, you must wait for the Plusready event to work, and the MUI encapsulates the event as a mui.plusReady() method, involving html5+ APIs, which are written in the Mui.plusready method. The following is an example of printing the current page URL:

Mui.plusready (function () {console.log ("current page URL:" +plus.webview.currentwebview (). GetURL ());});

Mui.init () MUI plug-in initialization

Create a sub-page

In mobile app development process, often encounter card end of the page, at this time if using local scrolling, on the Android phone will appear the problem of scrolling is not smooth, MUI's solution is: the need to scroll the area through a separate WebView implementation, full use of native scrolling. This is done by decomposing the target page into the main page and the content page, the main page showing the end of the card, such as the top navigation, the bottom tab, etc., the content page displays the content that needs scrolling, and then invokes the Mui.init method to initialize the content page in the main page.

 Mui.init ({    subpages:[{      url:your-subpage-url,// Child page HTML address, support local address and network address       id:your-subpage-id,//child page flag        styles:{        top:subpage-top-position,//Sub-page top location          bottom:subpage-bottom-position,//Sub-page bottom position          width:subpage-width,//Child page width, default is 100%         height:subpage-height,//Sub-page height, default to 100%        ......       },      extras:{}//Additional extension Parameters     }]   }); 

parameter Description:styles represents the window properties, refer to the Webviewstyle in the 5+ specification; note that the height and width two properties, even if not set, are calculated by default by 100%, so if the top value is not "0px", It is recommended to set the bottom value at the same time, otherwise the 5+ runtime is calculated based on height 100%, which may cause the actual bottom position of the page to exceed the screen range; left and right.

Example: The first page of the Hello MUI is actually a combination of index.html and list.html, as follows:

650) this.width=650; "src=" Http://dev.dcloud.net.cn/mui/assets/img/hello-mui-index.png "style=" border-color:# 0000FF; "/>

Index.html

+

650) this.width=650; "src=" Http://dev.dcloud.net.cn/mui/assets/img/hello-mui-list.png "style=" border-color:# ff0000;margin-top:36px; "/>

List.html

=

650) this.width=650; "src=" Http://dev.dcloud.net.cn/mui/assets/img/hello-mui-list.png "style=" MARGIN-TOP:29PX; Border-color: #FF0000; height:257px; "/>

The first page after merging

Index.html's role is to display fixed navigation, list.html display specific list content, the list item scrolling is in the list.html WebView with the use of native scrolling, both to ensure that the scroll bar does not penetrate the top navigation, the experience of the app, but also ensure that the list of smooth scrolling, to solve the problem of regional rolling lag Problem. List.html is Index.html's sub-page, the creation of code is relatively simple, as follows:

Mui.init ({subpages:[{URL: ' list.html ', id: ' list.html ', styles:{top: ' 45px ',//mui title bar default height is 45px; Bottom: ' 0px '//default is 0px, not defined;}]});

Open a new page

do Web apps, a problem that can't be avoided is the transition animation; The web is built on a link, and a click on a link from one page to another page, if it is opened by a refreshing way, The user faces a blank page wait, and if you move through the DOM node (a common spa solution) by using JavaScript in a non-refreshed way, you will encounter high performance challenges: DOM nodes are large, the page is too big, transitions are not smooth, and even the browser crashes The solution of MUI is that the single WebView only hosts the DOM of a single page, reducing the DOM hierarchy and page size; page switching uses native animations to give the most-consumed parts to the native implementation.

Mui.openwindow ({    url:new-page-url,    id:new-page-id,     styles:{      top:newpage-top-position,//New page Top location        bottom:newage-bottom-position,//new Page Bottom position       width: newpage-width,//New page width, default to 100%      height:newpage-height,//new page height, default to 100%       ......    },    extras:{       .....//custom extension parameters, which can be used to handle     },    createnew between pages: false,//whether to repeat the creation of the same ID WebView, the default is false: Do not create duplicate, direct display     show:{       autoshow:true,//page loaded event occurs automatically, default is true      anishow:animationtype,// Page display animation, default is "Slide-in-right";       duration:animationtime//page animation duration, Android platform default 100 MS, iOS platform default 200 ms;     },    waiting:{      autoshow:true,//automatically displays the Wait box, which defaults to true       title: ' Loading ... ',//wait for the prompt to appear on the dialog box       options:{         width:waiting-dialog-widht,//the width of the waiting box background area, by default automatically calculates the appropriate width according to the content          height:waiting-dialog-height,//the height of the Wait box background area, by default automatically calculates the appropriate height according to the content          ......      }    }})

Parameter description:

• Styles represent window parameters, refer to Webviewstyle in the 5+ specification; especially note that the height and width two properties, even if not set, are calculated by default by 100%, so if the top value is not 0px, it is recommended that you set the bottom value at the same time. Otherwise, the 5+ runtime is calculated based on height 100%, which may cause the actual bottom position of the page to exceed the screen range; left and right.

• Extras: Additional extension parameters of the new window, which can be used to handle the transfer of values between pages; For example var webview = mui.openWindow({url:‘info.html‘,extras:{name:‘mui‘}});console.log(webview.name); , the "MUI" string is exported; Note: The extension parameter is only valid when a new window is opened, if the target window is a preloaded page, The extras parameter passed when opened by the Mui.openwindow method is not valid.

• CreateNew: Whether to repeat the creation of WebView with the same ID; To optimize performance and avoid repeated creation of Webview,mui in the app v1.7.0 start to increase the createnew parameter, the default is False, the logic is as follows: If the createnew is true, do not judge the repetition, each time a new webview, if Fasle, first calculate whether the current app has the same ID webview, if present, the direct display; The new creation and execution of the display logic based on the show parameter, which can have an impact: if the business is written in the Plusready event, and the Plusready event is only triggered when the first creation is made, the next time you mui.openWindow open the same webview again through the method, The Plusready event is not triggered again and can be triggered by a custom event; case reference: http://ask.dcloud.net.cn/question/6514;

• Show shows control of window display. AutoShow: Whether the target window is automatically displayed after the loaded event, if the target page is a preloaded page, the parameter is invalid, anishow indicates that the page is animated, such as from the right side, from the lower side, etc., refer to Animationtypeshow in the 5+ specification.

• Waiting represents the system wait box; The MUI framework waits for a new page when the processing logic for the Wait box is: Show Wait box--Create target page webview--> target page loaded event occurs--close wait box; The wait box is displayed only if the new page is a newly created page (WebView), otherwise the target page is displayed directly if the page is preloaded, and no wait box is displayed. Parameters in waiting: AutoShow indicates that the wait box is automatically displayed, the default is true, if false, the wait box is not displayed, note: If the wait box is displayed, but the target page does not automatically display, you need to close the waiting box in the target page by the following code plus.nativeUI.closeWaiting(); . The title indicates the prompt text on the Wait box, and options indicates that the wait box displays parameters such as width, background color, hint text color, etc., and can refer to the waitingoption in the 5+ specification.

Example 1: In the Hello MUI, click on the icon in the top right corner of the homepage to open the About page, the implementation code is as follows:

Tap for MUI-encapsulated Click events, refer to the Gesture Events section document.getElementById (' Info '). AddEventListener (' tap ', function () {//Open about page Mui.openwindow ({url: ' examples/info.html ', id: ' Info '});

Because the styles parameter is not passed in, it is displayed by default, and the show parameter is not passed, so the new page slides in from the right side using the Slide-in-right animation.

Example 2: Open the B page from a page, b page for a list page that needs to be loaded from the server, if the B page loaded event occurs, it is displayed, because the data is not loaded, the list page is empty, the user experience is not good The user experience can be improved as follows (the best user experience should be preloaded): The first step, b page Loaded event occurs, does not automatically display;

A page opens the B page, setting show's AutoShow to False, then the B page is not automatically displayed after its loaded event, Mui.openwindow ({url: ' b.html ', show:{Autoshow:fal SE}});

Second, after the B page to get the list data, and then close the wait box, display b page

b page onload gets the list data from the server; window.onload = function () {//Get data from the server .../////////////////////////Business data obtained and inserted into the current page DOM;//NOTE: If the AJAX request    The following code should be placed after processing the AJAX response data, Mui.plusready (function () {//Close the Wait Box plus.nativeUI.closeWaiting ();  Displays the current page mui.currentWebview.show (); });}

Close page

The MUI framework encapsulates the window closure function in a mui.back method, with the following logic:

• If the current webview is a pre-loaded page, hide current webview;

• Otherwise, close current webview;

In the MUI framework, there are three actions that trigger a page close (the Mui.back method is executed):

• Click .mui-action-back the control that contains the class

• In the screen, swipe right

• Android Phone Press the back button

iOS platform native support right slide off from the edge of the screen

iOS platform can be implemented by Popgesture parameters from the edge of the screen to the right slide off WebView, refer to the 5+ specification, if you want to disable this feature, you can set Popgesture to None by SetStyle method.

Hbuilder the mheader generated code block will automatically generate a title bar with a return navigation arrow, click the back arrow to close the current page, because the return arrow contains the .mui-action-back class, the code is as follows:

If you want to add a control that closes the page in a different area than the top navigation bar, simply add the class to the corresponding control .mui-action-back , as shown below as an example of a close button:
<button type= "button" class= ' mui-btn mui-btn-danger mui-action-back ' > Close </button>
The MUI framework encapsulates the page right-slide-off feature, which is not enabled by default, to use the right-slide-off feature, you need to mui.init(); set the Swipeback parameter in the method as follows:
Mui.init ({swipeback:true//enable right slide off function});
The MUI framework listens to the back button of the Android phone by default, then performs the page shutdown logic, and if you do not want the MUI to automatically process the back button, turn off the MUI's Back button monitoring as follows;
Mui.init ({keyeventbind: {backbutton:false//Close Back button listener}});
In addition to the above three operations, you can call mui.back() the method directly, execute the window close logic;
mui.back()Only the window logic is processed, and if you want to process some other business logic before the window closes, you can abstract the business logic into a specific function and register it as the Beforeback parameter of the Mui.init method; Beforeback's execution logic is:

 
 

  
  
 
   
If the function corresponding to the Beforeback parameter returns False, the method is no longer executed mui.back() ;
 
   
Otherwise (returns TRUE or no return value), the execution mui.back() method continues;
 
  
 
 
Example: To open the details page from the list, and then return from the Details page to refresh the list interface, you can register the Beforeback parameter and then refresh the data through the Custom Event notification list page with the sample code as follows:
Mui.init ({beforeback:function () {///Get list interface Webviewvar list = plus.webview.getWebviewById (' list ');// Trigger the custom event (refresh) of the list interface for data refresh Mui.fire (list, ' Refresh ');//returns TRUE to continue the page close logic return true;});
Note: Beforeback execution return must be synchronous (blocking mode), if the use of Nativeui asynchronous JS (non-blocking mode), you may have unexpected results, such as: through plus.nativeUI.confirm() the pop-up confirmation box, may not have been selected by the user, The page has been returned (Beforeback synchronous execution, no return value, continuation mui.back() of the method, Nativeui does not block the JS process): In this case, to customize the business logic, you need a replication method, as mui.back follows a custom example, The current page is not closed until user confirmation is required
Backup Mui.back,mui.back has closed the Windows logical encapsulation (preload and parent-child window), so it is best to reuse mui.backvar Old_back = Mui.back;mui.back = function () {var btn = [  "OK", "Cancel"; Mui.confirm (' Confirm closing the current window?    ', ' Hello mui ', Btn,function (e) {if (e.index==0) {///Execute MUI packaged window close logic; old_back (); }  });}
Why is Swipeback:false set up and can still be turned right on iOS?
iOS platform native support from the screen edge right slide off, this is controlled by the Popgesture parameter, refer to the 5+ specification, if you want to disable, you can set Popgesture to None by SetStyle method.
Can you implement custom shutdown logic by AddEventListener adding back key monitoring?
AddEventListener will only add new execution logic, and old listening logic (Mui.back) will still execute, so if you need to implement custom shutdown logic, you must rewrite Mui.back.
Pre-load
The so-called preload technology is to create the target page in advance when the user has not triggered the page jump, so that when the user jumps, you can immediately switch the page, save time to create a new page, improve the app experience. MUI provides two ways to implement page preloading.
Mode one: configured by the Preloadpages parameter in the Mui.init method.
Mui.init ({preloadpages:[{url:prelaod-page-url, Id:preload-page-id, styles:{},//window parameters extras:{},/ /Custom extension Parameters subpages:[{},{}]//the pre-loaded page}], preloadlimit:5//the number of preloaded windows (once exceeded, FIFO) by default (No Limit});
This scheme is simple to use, can preload multiple pages, but does not return a reference to preload each page, to obtain the corresponding WebView reference, also need to get through the plus.webview.getWebviewById way; Because Mui.init is executed asynchronously, the corresponding WebView reference is obtained immediately after the Mui.init method is executed, and may fail, such as the following code:
Mui.init ({preloadpages:[{url: ' list.html ', ID: ' List '}]}); var list = Plus.webview.getWebviewByid (' Lis T ');//may return empty here;
Mode two: Pre-loading by Mui.preload method.
var page = mui.preload ({url:new-page-url, id:new-page-id,//default uses the URL of the current page as the ID styles:{},//window parameter extras:{}//custom extension Parameters});
mui.preload()a reference to the corresponding WebView can be returned immediately by preloading the method, but only one page can be preloaded at a time, and the method needs to be called multiple times if multiple webview are to be loaded; mui.preload()
such as the above two options, each with advantages and disadvantages, according to the specific business scenarios flexible choice;
Determine if pre-loading is successful or not, through intuitive phenomena analysis
The preloaded page opens immediately without a wait box, and the non-preloaded page defaults to the Wait box, and then the new page is displayed;/p>
Method Two, add log to analyze whether the pre-loaded page has been created
For example: A page pre-loading B page, then the a page fully loaded (can be simulated by settimeout), print the current application of all WebView, see if the URL of the B page, to analyze.
For example, add the following code to the a page:
Mui.plusready (function () {setTimeout (function () {var array = Plus.webview.all (); if (array) {for (Var i=0,len=        array.length;i<len;i++) {Console.log (Array[i].geturl ()); }}},5000)}
Reference page: http://dev.dcloud.net.cn/mui/window/
Web App Tutorial: MUI Learning Notes Lesson two: page layouts