I. The APP cannot connect to the background:
1. The URL path in the Ajax part is incorrect
2. The access is blocked.
3. Check whether the accessed IP address and port are correct. This is a unified JS configuration. Write some default configuration in it to reduce duplicate code.
2. App uses cache, which is universal, not session.
// Set the cache information
plus.storage.setItem(“user”,userInfo);
// Read the local storage and check whether it is the first boot
var showGuide = plus.storage.getItem(“lauchFlag”);
// Only portrait display is supported
plus.screen.lockOrientation(“portrait-primary”);
mui.init({
SwipeBack :true,// Enable the right swipe off function
pullRefresh: {
Container: “#refreshContainer”, // drop down to refresh the container identifier, querySelector can locate any CSS selector, such as ID,. Class, etc
down: {
Style: ‘circle’, // Required, pull-down refresh style, currently supports native 5+ ‘circle’ style
Color: ‘#2BD009’, // Optional, default “#2BD009” dropdown refresh control color
Height: ’50px’, // Optional, default 50px.
Range: ‘100px’, // Optional default 100px, control can drop and drop range
Offset: ‘0px’, // Optional default 0px, drop down the starting position of the refresh control
Auto: true, // Optional, the default is false. The pull-up refresh is performed for the first time
Callback: downpullfresh, // Mandatory, refresh function, written for specific business, such as getting new data from the server via Ajax;
Auto: true,// Optional, the default is false. The pull-down refresh is performed for the first time
},
up: {
Height: 50, // Default 50. Trigger pull-up load drag distance
** auto: true, // Optional, default false. Automatic pull-up loading **
Contentrefresh: “Loading…” // Optional, pull up to load the title content displayed on the control while it is loading
Contentnomore: ‘There is nomore data ‘, // Optional, a reminder to display when there is nomore data at the end of the request;
Callback: uppullfresh, // Mandatory, a refresh function, written for a specific business, such as getting new data from the server via Ajax;
}
},
});
function openPage(url, id) {
mui.openWindow({
url: url,
id: id,
styles: {
Top: ‘100px’, // New page top position
Bottom: ‘200px’, // Bottom of new page
},
extras: {},
CreateNew: false, // Whether to create webViews with the same ID repeatedly. The default value is false: do not create webViews repeatedly and display them directly
show: {
AutoShow: true, // the page is automatically displayed after the loaded event, the default is true
},
waiting: {
AutoShow: true, // Displays wait boxes automatically, default is true
Title: ‘Loading… ‘, // Wait for the prompt displayed on the dialog box
}
})
}
var winAll = plus.webview.all(); // Get all forms
//console.log(JSON.stringify(winAll))
var tab_home = plus.webview.getWebviewById(“tab_home.html”); // Get the specified page
Refresh the list page
var list1 = plus.webview.getWebviewById(‘index-assessment.html’);
// Trigger the custom event (refresh) on the list interface to refresh data
if (list1) {
mui.fire(list1, ‘refresh_list’);
}
mui.back();
document.addEventListener(‘refresh_list’, function(event) {
news.items = [];
start = 0;
pullupRefresh();
});
##vue
1. Data arguments need to be separated by commas, not semicolons.
2. Methods support binding methods such as @click=”reverseMessage”
var appvue = new Vue({
el: ‘#testvue’,
data: {
show: false,
use: true,
url: ‘login.html’,
isColor: false,
isSize: true,
idinfo: ‘2220’,
message: ‘helloWorld! ‘
},
methods: {
reverseMessage: function() {
this.message = this.message.split(”).reverse().join(”)
},
changeUrl:function(){
this.url = ‘home.html’;
}
}
})
function test() {
console.log(appvue);
appvue.url =’abc.html’;
//appvue._data.url=’def.html’;
//appvue.data.url = ‘html/home.html’;
}
You can also use v-bind:value=”idinfo”
**v-bind:value **
## Modify the window title control style and title content
This is the ** title bar ** control created by the dynamic modification window
## Settings for popup menu location
Inside the demo, due to the set position: fixed; Then, the content is too long, which will lead to the occlusion of the pop-up layer. It is necessary to change position: fixed to position:absolute.
Related codes:
index.html
<html><head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <! CSS --> <link rel="stylesheet" href=" CSS/mi.min.css "> <link rel="stylesheet" type="text/ CSS "href=" CSS /app.css"> <style>. color: #6d6d72; font-size: 15px; } .oa-contact-cell.mui-table .mui-table-cell { padding: 11px 0; vertical-align: middle; } .oa-contact-cell { position: relative; margin: -11px 0; } .oa-contact-avatar { width: 75px; } .oa-contact-avatar img { border-radius: 50%; } .oa-contact-content { width: 100%; } .oa-contact-name { margin-right: 20px; } .oa-contact-name, oa-contact-position { float: left; } </style> </head> <body> <! -- <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 Class ="mui-title"> (TAB) menu </h1> </header> --> <nav class="mui-bar mui-bar-tab"> <a id=" tab_HOME "class="mui-tab-item <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label"> </span> </a> <a id="tab_vue" class="mui-tab-item" href="javaScript:openPage();" > <span class="mui-icon mui-icon-email"> <! - < span class = "mui - badge" > < / span > -- > < / span > < span class = "mui - TAB - label" > vue part < / span > < / a > < a id = "tab_setting" Class ="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label"> Set </span> </a> </nav> <! -- <div class="mui-content"> </div> --> <script src="js/mui.min.js"></script> <script> mui.init({ swipeBack:true, Subpages: [// First load home {URL: 'HTML /home.html', ID:' tab_HOME ', styles: {top: '0px', bottom: '60px'}}], preloadPages: [// Preload Other pages {URL: 'HTML /vue_demo.html', id: 'tab_vue', styles: {top: '0px', bottom: '60px' } }, { url: 'html/setting.html', id: 'tab_setting', styles: { top: '0px', bottom: '60px' } } ], }); Mui.plusready (function() {// // get all Webview Windows // var winAll = plus.webview.all(); / / / / / / get all form the console. The log (JSON. Stringify (winAll) var tab_home = plus. Webview. GetWebviewById (" tab_home "); var tab_vue = plus.webview.getWebviewById("tab_vue"); var tab_setting = plus.webview.getWebviewById("tab_vue"); }); document.getElementById("tab_home").addEventListener("tap", function(even) { // var tab_home = this.webview.getWebviewById("tab_vue"); // console.log(JSON.stringify(tab_home)); // tab_home.show(); //tab_vue.hide(); // This step must have //tab_setting.hide(); }) document.getelementById ("tab_vue").addeventListener ("tap", function(even) {mui.toast(4444); // var tab_vue = plus.webview.getWebviewById("tab_vue"); // tab_vue.show(); openPage("html/vue_demo.html","html/vue_demo.html"); }) document.getElementById("tab_setting").addEventListener("tap", function(even) { }) function openPage(url,id) { mui.toast(8899); OpenWindow ({url:url, ID :id, styles: {top: '100px', // New page top bottom: '200px', // new page bottom}, extras: {}, createNew: false, // Whether to create a webView with the same id repeatedly. The default is false: show: {autoShow: {autoShow: true}, waiting: {autoShow: true, // autoShow: true, // ', / / wait for prompt content is displayed on the dialog box}})} < / script > < / body > < / HTML >Copy the codehome.html
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <! <link rel="stylesheet" href=".. /css/mui.min.css"> <! <link rel="stylesheet" type="text/ CSS "href=".. /css/app.css"/> <style> .title{ margin: 20px 15px 10px; color: #6d6d72; font-size: 15px; } .oa-contact-cell.mui-table .mui-table-cell { padding: 11px 0; vertical-align: middle; } .oa-contact-cell { position: relative; margin: -11px 0; } .oa-contact-avatar { width: 75px; } .oa-contact-avatar img { border-radius: 50%; } .oa-contact-content { width: 100%; } .oa-contact-name { margin-right: 20px; } .oa-contact-name, oa-contact-position { float: left; } </style> </head> <body> <! -- <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 </h1> </header> --> <div class="mui-content" id="refreshContainer"> <ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1 <span class="mui-badge mui-badge-primary">11</span> </li> <li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-success">22</span> </li> <li Class ="mui-table-view-cell">Item 3< SPAN class=" muI-badge ">33</span> </li> </ul> <div class="title"> home </div> <div Id ="tabbar" class=" mui-Control-content mui-active"> <div class="title"> This is the first child page in the div mode TAB.</div> <div Class ="title"> What is a div mode TAB? In fact, it is to simulate an independent page through DIV, and simulate the switch of different pages through DIV display and hide, typical SPA mode; </div> <div class="title"> This mode is suitable for simple business systems, because each TAB content should be written in a div, if the logic is complex, it will lead to the DOM structure of the current page complex, resulting in slow webView response, or even crash; Therefore, it is recommended to use the WebView mode TAB if the system is complex and requires pull-down refresh operations. </div> </div> </div> </body> <script src=".. /js/mui.min.js"></script> <script> mui.init({swipeBack:true,// enable the right swipe to disable the function pullRefresh: {container: "#refreshContainer", // drop down to refresh the container identifier, querySelector can locate any CSS selector, such as id,. Class, etc. Down: {style: Color: '#2BD009', // Optional, default '#2BD009', height: '50px', // Optional, default 50px. Drop refresh control height, range: '100px', // Default 100px, offset: '0px', // Default 0px, start position of the drop refresh control auto: true, // Optional, default false. Callback: downpullFresh, // Mandatory, refresh function, written for specific business, such as fetching new data from the server via Ajax; }, up: {height: 50, // Optional. Default 50. Trigger pull-up loading drag distance Auto: true, // Optional, default false. Automatic pull-up load once ContentRefresh: "Loading..." Contentnomore: 'There is nomore data ', // Optional, if the request is completed if there is nomore data; Callback: uppullfresh, // Mandatory, a refresh function, written for a specific business, such as getting new data from the server via Ajax; }}}); // function downpullfresh() {mui.toast(12); // After loading the new data, you must execute the following code: For ajax requests, place the following code after processing the Ajax response data: // No more, endPulldown passes true, PullRefresh mui('#refreshContainer').pullRefresh().endpullDown (); } function uppullfresh() {mui.toast(32); // Business logic code, such as fetching new data from the server via Ajax; / / note: / / 1, after loading the new data, must execute the following code, true said no more data: / / 2, for ajax requests, you have to place the following code in after handling the ajax response data enclosing endPullupToRefresh (true | false). } </script> </html>Copy the codeThis article is from: Song Wenchao Super, exclusive platform CSDN, SegmentFault, Jianshu, OSChina, please indicate the source of reprint.