As an old front-end framework for mobile terminals, MUI is defined as “a high-performance front-end framework closest to the native APP experience”, which naturally has its advantages.
First, window management
1.1 Page initialization
Mui.plusready () initializes the page, for example:
mui.plusReady(function(){
console.log(111);
});
Copy the codeMui.init () is muI plug-in initialization. See Section 3.1 for details and examples. Mui.ready () specifies a function to execute when the DOM is ready. It is written similarly to mui.plusready ()
The official document: dev.dcloud.net.cn/mui/window/…
1.2 Creating sub-Pages
The TAB TAB and the bottom tabbar are typical examples of creating child pages, as shown
list.html
index.html
mui.init({
subpages: [{url:'list.html'.// Sub-page HTML address, support local address and network address
id:'list.html'.// Subpage flag
styles:{
top:'45px'.// The default muI title bar height is 45px;
bottom:'0px'// Default is 0px, optional;}}});Copy the code1.3 Open a new page
There will always be cases of clicking on one page to jump to another. Use the mui. OpenWindow ()
mui.openWindow({
url:new-page-url,
id:new-page-id,
styles: {top:"50px".// New page top position
bottom:'0px'.// New page bottom location
width:"100%".// New page width, default is 100%
height:"100%".// New page height, default is 100%. },extras: {...// Custom extension parameters that can be used to handle inter-page values
},
createNew:false.// Whether to create webViews with the same ID repeatedly. The default value is false
show:{
autoShow:true.// the page is displayed automatically after the loaded event, default is true
aniShow:animationType,// The page displays animation, default is "slide-in-right";
duration:animationTime// The page animation duration is 100 ms by default on Android and 200 ms on iOS.
},
waiting: {autoShow:true.// Displays wait boxes automatically. Default is true
title:'Loading... '.// Wait for the prompt displayed on the dialog box
options:{
width:waiting-dialog-widht,// The width of the background area of the waiting box is automatically calculated according to the content by default
height:waiting-dialog-height,// The height of the background area of the waiting box is automatically calculated according to the content by default. }}})Copy the code1.4 Open a new page with native navigation bar
Draw the native navigation bar control by setting parameters for the titleNView node in the styles node of mui.OpenWindow ()
mui.openWindow({
url: webviewUrl,
id: webviewId,
styles: { // Window parameters refer to the WebviewStyle specification in 5+, that is, WebviewStyle parameters can be set here
titleNView: { // The title bar control of the window
titleText:"Title bar".// Title bar text. When this property is not set, the title of the current page is loaded by default, and the title of the page is automatically updated
titleColor:"# 000000".// Font color, color value format is "#RRGGBB", default value is "#000000"
titleSize:"17px".// The font size defaults to 17px
backgroundColor:"#F7F7F7".// Control background color, color value format is "#RRGGBB", default value is "#F7F7F7"
progress:{ // Progress bar style for the title bar control
color:"#00FF00".// Progress bar color, default is "#00FF00"
height:"2px" // Progress bar height, default is "2px"
},
splitLine: {// The bottom split line of the title bar control, similar to borderBottom
color:"#CCCCCC".// Split line color, default is "#CCCCCC"
height:"1px" // Line height, default is "2px"}}}});Copy the code1.5 Closing the Page
Mui framework encapsulates the window-closing function in mui.back method. The specific execution logic is as follows: (1) If the current webview is a pre-loaded page, hide the current webview; (2) Otherwise, close the current webView; In the MUI framework, there are three actions that trigger a page closure (execute the mui.back method) :
(1) Click the control that contains the. Mui-action-back class
<button type="button" class='mui-btn - btn-Danger Mui-action back'> Closed </button>Copy the code(2) Inside the screen, swipe quickly to the right
mui.init({
swipeBack:true // Enable the right swipe off function
});
Copy the code(3) The Android phone presses the back button
mui.init({
keyEventBind: {
backbutton: false // Turn off the back button listening}});Copy the codeIn addition to the above methods, you can also call the mui.back() method directly
// Backup mui.back, mui.back has wrapped the window closing logic quite well (preloading and parent-child Windows), so it is best to reuse mui.back
var old_back = mui.back;
mui.back = function(){
var btn = ["Sure"."Cancel"];
mui.confirm('Are you sure to close the current window? '.'Hello MUI',btn,function(e){
if(e.index==0) {// Execute muI wrapped window closing logic;old_back(); }}); }Copy the code1.6 preload
Preloading is to create a target page in advance before the user triggers a page jump. In this way, when the user jumps, the page can be switched immediately, saving the time of creating a new page and improving the app experience. Mui provides two ways to implement page preloading. Method 1: Configure the preloadPages parameter in mui.init.
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles: {},// Window parameters
extras:{},// Customize extension parameters
subpages:[{},{}]// Preload the child pages of the page}].preloadLimit:5// The number of preloaded Windows limit (once exceeded, fifO) is not limited by default
});
Copy the codeFeatures: use of this scheme is simple and can be preloaded multiple pages, but you don’t return to preload each page reference, if you want to obtain corresponding webview reference, still need to pass plus. Webview. GetWebviewById way; In addition, because mui.init is executed asynchronously, it may fail to get the corresponding webView reference immediately after executing mui.init, for example:
mui.init({
preloadPages:[
{
url:'list.html'.id:'list'}}]);var list = plus.webview.getWebviewByid('list');// return null;
Copy the codeMethod 2: Use mui.preload to preload data.
var page = mui.preload({
url:new-page-url,
id:new-page-id,// The current page URL is used as the id by default
styles:{},// Window parameters
extras:{}// Customize extension parameters
});
Copy the codeFeatures: Preload through mui.preload() method, can immediately return the corresponding webView reference, but can only preload one page at a time; To load multiple WebViews, call mui.preload() multiple times
Ii. Event management
2.1 Event Binding
In addition to using the addEventListener() method to listen for events on a particular element, you can also use the.on() method to implement event binding for bulk elements.
mui(".mui-table-view").on('tap'.'.mui-table-view-cell'.function(){
/ / to get id
var id = this.getAttribute("id");
// Pass a value to the details page to inform you of loading new data
mui.fire(detail,'getDetail', {id:id});
// Open the news details
mui.openWindow({
id:'detail'.url:'detail.html'
});
})
Copy the code2.2 Event Cancellation
If you want to unbind an event using the on() method, you can use the off() method. The off() method has different implementation logic depending on the parameters passed in.
Dev.dcloud.net.cn/mui/event/#…
2.3 Event Triggering
Events on specific DOM elements can be dynamically triggered using the mui.trigger() method.
var btn = document.getElementById("submit");
// Listen for click events
btn.addEventListener("tap".function () {
console.log("tap event trigger");
});
// Trigger the click event of the Submit button
mui.trigger(btn,'tap');
Copy the code2.4 Gesture Events
In the development of mobile applications, there will be a lot of gesture operations, such as sliding, long press and so on
Configuration of gesture events
mui.init({
gestureConfig: {tap: true.// Defaults to true
doubletap: true.// Default is false
longtap: true.// Default is false
swipe: true.// Defaults to true
drag: true.// Defaults to true
hold:false.// Defaults to false and does not listen
release:false// Defaults to false and does not listen}});Copy the codeEvent listeners
var elem = docment.getElementById("dome");
elem.addEventListener("swipeleft".function(){
console.log("You're swiping left.");
});
Copy the code2.5 Custom Events
Because the value is transmitted between multiple WebViews, it cannot be used in mobile browser and wechat.
Listen for custom events
// Add through window
window.addEventListener('customEvent'.function(event){
// Get the content of the parameters passed in by event.detail. });Copy the codeFires a custom event for the target window with mui.fire()
Third, utils
3.1 the init ()
The MUI framework concentrates many functions in mui.init. To use a function, you only need to configure the corresponding parameters in muI. init
mui.init({
/ / child pages
subpages: [{
/ /...}]./ / preload
preloadPages:[
/ /...].// Drop refresh, drop load
pullRefresh : {
/ /...
},
// Gesture configuration
gestureConfig:{
/ /...
},
// Sideslip closed
swipeBack:true.//Boolean(default false) Enable the right swipe off function
// Monitor the Back and menu buttons of the Android phone
keyEventBind: {
backbutton: false.//Boolean(default true) Turns off the back key listening
menubutton: false //Boolean(default true) Turns off menu key listening
},
// Process the business before the window closes
beforeback: function() {
/ /... For details, click ↑ "Close the page" link to view
},
// Set the status bar color
statusBarBackground: '#9defbcg'.// Set the status bar color, iOS only
preloadLimit:5// The number of preloaded Windows limit (once exceeded, fifO) is not limited by default
})
Copy the code3.2 the mui ()
Mui uses CSS selectors to fetch HTML elements and return an array of MUI objects. $(“#app”) $(“#app”) $(“#app”) $(“#app”)
Obj1 is the muI object
var obj1 = mui("#title");
Obj2 is a DOM object
var obj2 = obj1[0];
Copy the code3.3 each ()
Each is both a class method and an object method, and the two methods are applicable to different scenarios. In other words, you can use mui.each() to iterate over arrays or JSON objects, or you can use mui(selector).each() to iterate over DOM structures.
Var array = [1,2,3] mui.each(array,function(index,item){
console.log(item*item);
})
Copy the code3.4 the extend ()
Merge the sum of two objects into one object
var target = {
company:"dcloud".product: {mui:"Small and efficient"}}var obj1 = {
city:"beijing".product: {HBuilder:"Fly code."
}
}
mui.extend(target,obj1);
/ / output: {" company ":" dcloud ", "product" : {" HBuilder ":" fly the same coding} ", "city" : "Beijing"}
console.log(JSON.stringify(target));
Copy the codeAs you can see from the output above, the MUI under the product node is replaced by the HBuilder, because by default only the key and value under the root node of the object are merged. If you want to merge deeply, you can pass in the deep argument as follows:
var target = {
company:"dcloud".product: {mui:"Small and efficient"}}var obj1 = {
city:"beijing".product: {HBuilder:"Fly code."}}// Deep merge is supported
mui.extend(true,target,obj1);
/ / output: {" company ":" dcloud ", "product" : {" s ":" small and efficient ", "HBuilder" : "fly the same coding}", "city" : "Beijing"}
console.log(JSON.stringify(target));
Copy the code3.5 later ()
SetTimeOut encapsulation
3.6 scrollTo ()
ScrollTo () is an enhanced implementation of window.scrollto () in mobile phone, which can set the time of scrolling animation and the callback function after scrolling. Given the size of the phone’s screen, this method can only scroll vertically.
mui.scrollTo(0.1000);
Copy the code3.7 OS
The requirements of the current operating environment are determined by navigator.userAgent, which muI encapsulates by calling MUi.os.xxx
if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)) {/ /...
}
Copy the code