共计 9477 个字符，预计需要花费 24 分钟才能阅读完成。
一、app 连贯不到后盾：
1.ajax 局部写的 url 门路谬误
2. 拜访被拦挡。
3. 拜访的 ip 和端口是否正确，这里是个对立配置的 js。将一些默认配置写在外面，缩小反复代码而已。
二、app 用的是缓存，全局通用，不是 session。
// 设置缓存信息
plus.storage.setItem(“user”,userInfo);
// 读取本地存储，查看是否为首次启动
var showGuide = plus.storage.getItem(“lauchFlag”);
// 仅反对竖屏显示
plus.screen.lockOrientation(“portrait-primary”);
mui.init({
swipeBack:true,// 启用右滑敞开性能
pullRefresh: {
container: “#refreshContainer”, // 下拉刷新容器标识，querySelector 能定位的 css 选择器均可，比方：id、.class 等
down: {
style: ‘circle’, // 必选，下拉刷新款式，目前反对原生 5 +‘circle’款式
color: ‘#2BD009’, // 可选，默认“#2BD009”下拉刷新控件色彩
height: ’50px’, // 可选, 默认 50px. 下拉刷新控件的高度,
range: ‘100px’, // 可选 默认 100px, 控件可下拉拖拽的范畴
offset: ‘0px’, // 可选 默认 0px, 下拉刷新控件的起始地位
auto: true, // 可选, 默认 false. 首次加载主动上拉刷新一次
callback: downpullfresh, // 必选，刷新函数，依据具体业务来编写，比方通过 ajax 从服务器获取新数据；
auto: true,// 可选, 默认 false. 首次加载主动下拉刷新一次
},
up: {
height: 50, // 可选. 默认 50. 触发上拉加载拖动间隔
auto: true, // 可选, 默认 false. 主动上拉加载一次
contentrefresh: “ 正在加载 …”, // 可选，正在加载状态时，上拉加载控件上显示的题目内容
contentnomore: ‘ 没有更多数据了 ’, // 可选，申请结束若没有更多数据时显示的揭示内容；
callback: uppullfresh, // 必选，刷新函数，依据具体业务来编写，比方通过 ajax 从服务器获取新数据；
}
},
});
function openPage(url, id) {
mui.openWindow({
url: url,
id: id,
styles: {
top: ‘100px’, // 新页面顶部地位
bottom: ‘200px’, // 新页面底部地位
},
extras: {},
createNew: false, // 是否反复创立同样 id 的 webview，默认为 false: 不反复创立，间接显示
show: {
autoShow: true, // 页面 loaded 事件产生后主动显示，默认为 true
},
waiting: {
autoShow: true, // 主动显示期待框，默认为 true
title: ‘ 正在加载 …’, // 期待对话框上显示的提醒内容
}
})
}
var winAll = plus.webview.all(); // 获取所有窗体
//console.log(JSON.stringify(winAll))
var tab_home = plus.webview.getWebviewById(“tab_home.html”); // 获取指定的页面
刷新列表页
var list1 = plus.webview.getWebviewById(‘index-assessment.html’);
// 触发列表界面的自定义事件（refresh）, 从而进行数据刷新
if (list1) {
mui.fire(list1, ‘refresh_list’);
}
mui.back();
document.addEventListener(‘refresh_list’, function(event) {
news.items = [];
start = 0;
pullupRefresh();
});
##vue
1、data 参数须要逗号隔开，而不是分号。
2、methods 反对绑定办法 如 @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’;
}
当然也能够用 v -bind:value=”idinfo”
还有像v-bind:value 这种都能够简写为:value
## 批改窗口题目控件的款式和题目内容
这个是动静批改 窗口创立的 标题栏 控件
## 对于弹出菜单地位的设置
demo 的外面，因为设置的 position: fixed; 而后导致了内容过长会导致 弹出层被遮挡，须要把 position: fixed 改成 position:absolute;
相干代码:
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">
<!-- 规范 mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App 自定义的 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 class="mui-title">（选项卡）菜单 </h1>
</header> -->
<nav class="mui-bar mui-bar-tab">
<a id="tab_home" class="mui-tab-item mui-active">
<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 局部 </span>
</a>
<a id="tab_setting" class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label"> 设置 </span>
</a>
</nav>
<!-- <div class="mui-content">
</div> -->
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack:true, // 启用右滑敞开性能
subpages: [ // 首先加载首页
{
url: 'html/home.html',
id: 'tab_home',
styles: {
top: '0px',
bottom: '60px'
}
}
],
preloadPages: [ // 预加载其余页面
{
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() {
// // 获取所有 Webview 窗口
// var winAll = plus.webview.all(); // 获取所有窗体
// //console.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(); // 这一步必须有
//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);
mui.openWindow({
url:url,
id:id,
styles: {
top: '100px', // 新页面顶部地位
bottom: '200px', // 新页面底部地位
},
extras: { },
createNew: false, // 是否反复创立同样 id 的 webview，默认为 false: 不反复创立，间接显示
show: {autoShow: true, // 页面 loaded 事件产生后主动显示，默认为 true},
waiting: {
autoShow: true, // 主动显示期待框，默认为 true
title: '正在加载...', // 期待对话框上显示的提醒内容
}
})
}
</script>
</body>
</html>home.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">
<!-- 规范 mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App 自定义的 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 class="mui-title"> 第一局部内容 </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"> 首页 </div>
<div id="tabbar" class="mui-control-content mui-active">
<div class="title"> 这是 div 模式选项卡中的第 1 个子页面.</div>
<div class="title"> 何谓 div 模式的选项卡？其实就是通过 DIV 模仿一个独立页面，通过 DIV 的显示、暗藏模仿不同页面的切换，典型的 SPA 模式；</div>
<div class="title">
这种模式适宜简略业务零碎，因为每个选项卡内容要写在一个 DIV 中，若逻辑简单，会导致以后页面 DOM 构造繁冗，造成 webview 响应迟缓，甚至解体；因而若零碎较简单，须要下拉刷新等操作，举荐应用 webview 模式的选项卡；</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack:true,// 启用右滑敞开性能
pullRefresh: {
container: "#refreshContainer", // 下拉刷新容器标识，querySelector 能定位的 css 选择器均可，比方：id、.class 等
down: {
style: 'circle', // 必选，下拉刷新款式，目前反对原生 5 +‘circle’款式
color: '#2BD009', // 可选，默认“#2BD009”下拉刷新控件色彩
height: '50px', // 可选, 默认 50px. 下拉刷新控件的高度,
range: '100px', // 可选 默认 100px, 控件可下拉拖拽的范畴
offset: '0px', // 可选 默认 0px, 下拉刷新控件的起始地位
auto: true, // 可选, 默认 false. 首次加载主动上拉刷新一次
callback: downpullfresh, // 必选，刷新函数，依据具体业务来编写，比方通过 ajax 从服务器获取新数据；auto: true,// 可选, 默认 false. 首次加载主动下拉刷新一次
},
up: {
height: 50, // 可选. 默认 50. 触发上拉加载拖动间隔
auto: true, // 可选, 默认 false. 主动上拉加载一次
contentrefresh: "正在加载...", // 可选，正在加载状态时，上拉加载控件上显示的题目内容
contentnomore: '没有更多数据了', // 可选，申请结束若没有更多数据时显示的揭示内容；callback: uppullfresh, // 必选，刷新函数，依据具体业务来编写，比方通过 ajax 从服务器获取新数据；}
},
});
// 下拉
function downpullfresh() {mui.toast(12);
// 留神，加载完新数据后，必须执行如下代码，留神：若为 ajax 申请，则需将如下代码搁置在解决完 ajax 响应数据之后
// 没有更多内容了，endPulldown 传入 true，不再执行下拉刷新
mui('#refreshContainer').pullRefresh().endPulldown();
}
// 上拉
function uppullfresh() {mui.toast(32);
// 业务逻辑代码，比方通过 ajax 从服务器获取新数据；// 留神：//1、加载完新数据后，必须执行如下代码，true 示意没有更多数据了：//2、若为 ajax 申请，则需将如下代码搁置在解决完 ajax 响应数据之后
this.endPullupToRefresh(true | false);
}
</script>
</html>本文来源于：宋文超 super，专属平台有 csdn、思否(SegmentFault)、简书、开源中国(oschina)，转载请注明出处。
