断点调试问题
跨平台开发，所以我们需要在不同平台进行断点调试，分成两大类，网页端和app端
网页端调试
Chrome 浏览器
最爽的调试工具，刷新一下立马见效，直接实时修改样式，变量查看方便，关键是可以使用链接调试某个页面，免去了真机，模拟器需要一层层跳转比较麻烦，这个，地球人都会的东西了
app端，真机or模拟器调试
iOS真机
1). 打开
设置程序，进入Safari->高级页面开启Web检查器2). 用usb连接电脑,运行程序 3). 运行`Safari`,点击`Safari`菜单下面的`偏好设置（Preferences...）`，切换到`高级选项（Advanced）`,勾选`在菜单栏显示开发菜单（Show Develop menu in menu bar）` 4). 如图，选择相应的`html`页面即可打开调试界面 iOS模拟器
1). 下载xcode，安装模拟器
2). 运行程序
3). 如图，选择
html页面即可打开调试界面
Android真机(系统4.4以上)
1). 打开`开发者选项`，开启`usb调试`，连接usb 2). 运行程序 3). 在`Chrome`地址栏，输入`chrome://inspect`或通过`菜单`->`工具`->`检查设备`打开设备检查页面 4). `DevTools`工具会自动检测已连接设备运行的可调试页面列表，点击对应页面的`inspect`链接打开调试页面
Android模拟器
1). 安装Android studio，启动模拟器 2). 参考`Android真机(系统4.4以上)`对应的步骤
底部tabbar的问题
在原生app中，我们使用系统提供的切换选项卡来坐切换，但是，在h5中，mui的教程(mui初级入门教程（二）— html5+ webview 底部栏用法详解)使用了iframe切换，使用后发现如下问题:
在h5中，执行了回退操作，假若页面中含有AJAX代码，页面就会被强制刷新，所以，当使用iframe之后，切换到了第二个选项卡，进入二级页面，再进行回退操作时，iframe会强制刷新，由此导致选项卡切换为默认的第一个，但是当前界面还是停留在第二选项卡的界面，如图：
最终解决办法是在四个首页(首页、话题、文章、评茶)，使用html+css模拟下方的切换卡，高亮显示当前对应的切换卡
正则表达式
为了截取MarkDown中的图片，需要使用正则来获取，如下:
var reg = new RegExp("/!\[[^\]]+\]\([^\)]+\)/g")
参考文章:深入浅出的javascript的正则表达式学习教程
##页面跳转传参
页面间传参，由于是跨平台开发，需要兼容两端，app端可使用mui的框架进行页面传参，网页端使用url传参
打开新界面:
|
|
目标界面获取参数:
|
|
事件冒泡与捕获
事件传递有事件捕获and事件冒泡：
事件捕获，从外到内，父元素到子元素传递
事件冒泡，从内到外，子元素到父元素传递
阻止冒泡，
w3c中使用stopPropagation(),ie使用cancelBubble = true
参考文章：js之事件冒泡和事件捕获详细介绍
mui样式覆盖
样式覆盖涉及到优先级的问题，直接定位class很难修改到样式，建议在Chrome浏览器中先修改，再复制到代码中
##滑动条长度修改mui提供的滑动条控件，使用了栅格系统，将屏幕分成了12份，如下代码设置滑动条长度：
|
|
win.onload = function() {
$('#sliderProgressBar').css({
'width': '11.1111%',
'margin-left': '11.111%'
});
}
|
|
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
|
|
var options_relation = $("#relation_family option:selected");
var relationTx = options_relation.text();
|
|
(function(win, $) {
var PULL_DOWN = 'pull_down', //下拉刷新
PULL_UP = 'pull_up'; //上拉加载更多
var refreshs = new Array();
var pullToRefresh = function(options) {
this.STATIC = $.extend({
PULL_DOWN: 'pull_down',
PULL_UP: 'pull_up',
tableIds: [],
requestData: null,
renderWithData: null,
refreshEnd: null,
isMulti: true,
needPullDown: true,
needPullUp: true,
contentrefresh: '正在刷新...',
contentnomore: '- 没有更多了 -'
}, options);
PULL_DOWN = this.STATIC.PULL_DOWN;
PULL_UP = this.STATIC.PULL_UP;
this.initRefresh();
}
pullToRefresh.prototype.getData = function(type, callBack, index) {
if(this.STATIC.requestData) {
this.STATIC.requestData(type, function(arr, isLast) {
if(type == PULL_DOWN) {
if(callBack) {
callBack(arr, isLast);
}
} else {
if(callBack) {
callBack(arr, isLast);
}
}
}, index);
}
}
pullToRefresh.prototype.render = function(type, currentIndex, data) {
var table = null;
if(currentIndex < this.STATIC.tableIds.length) {
table = $(this.STATIC.tableIds[currentIndex]);
}
if(table != null && type == PULL_DOWN) {
table.empty();
}
if(this.STATIC.renderWithData) {
this.STATIC.renderWithData(table, data, currentIndex, type);
}
}
pullToRefresh.prototype.handleRefresh = function(self, type) {
var index = 0;
if(this.STATIC.isMulti) {
index = parseInt(self.element.getAttribute('index'));
}
var _this = this;
_this.getData(type, function(data, isLast) {
if(data !== null) {
_this.render(type, index, data);
}
if(_this.STATIC.isMulti) {
if(type == PULL_DOWN) {
self.endPulldownToRefresh();
if(isLast) {
self.endPullupToRefresh(isLast);
} else {
self.refresh(true);
}
} else {
self.endPullupToRefresh(isLast);
}
} else {
if(type == PULL_DOWN) {
self.endPulldownToRefresh();
if(isLast) {
self.endPullupToRefresh(isLast);
} else {
self.refresh(true);
}
} else {
self.endPullupToRefresh(isLast);
}
}
if(_this.STATIC.refreshEnd) {
_this.STATIC.refreshEnd();
}
}, index);
}
/**
*
* @param {Boolean} isPullDown true：下拉刷新；false:加载更多
*/
pullToRefresh.prototype.startRefresh = function(isPullDown) {
var self = this;
if(self.STATIC.isMulti) {
if(mui.os.plus) {
mui.plusReady(function() {
refresh(self, isPullDown);
});
} else {
mui.ready(function() {
refresh(self, isPullDown);
});
}
} else {
if(mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
refresh(self, isPullDown);
}, 0);
});
} else {
mui.ready(function() {
refresh(self, isPullDown);
});
}
}
}
function refresh(self, isPullDown) {
if(self.STATIC.isMulti) {
$.each(refreshs, function(index, refresh) {
if(isPullDown) {
refresh.pullRefresh().pulldownLoading();
} else {
refresh.pullRefresh().pullupLoading();
}
});
} else {
if(isPullDown) {
mui('#pullrefresh').pullRefresh().pulldownLoading();
} else {
mui('#pullrefresh').pullRefresh().pullupLoading();
}
}
}
pullToRefresh.prototype.initRefresh = function() {
var _self = this;
if(_self.STATIC.isMulti) {
mui.init();
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll-wrapper'), function(index, pullRefreshEl) {
refreshs.push(mui(pullRefreshEl));
mui(pullRefreshEl).pullRefresh({
down: {
callback: function() {
_self.handleRefresh(this, PULL_DOWN);
}
},
up: {
contentnomore: _self.STATIC.contentnomore,
callback: function() {
_self.handleRefresh(this, PULL_UP);
}
}
});
});
} else {
var down = null,
up = null;
if(_self.STATIC.needPullDown) {
down = {
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: _self.STATIC.contentrefresh, //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: function() {
_self.handleRefresh(this, PULL_DOWN);
}
};
}
if(_self.STATIC.needPullUp) {
up = {
contentnomore: _self.STATIC.contentnomore,
callback: function() {
_self.handleRefresh(this, PULL_UP);
}
}
}
mui.init({
gestureConfig: {
doubletap: true
},
pullRefresh: {
container: '#pullrefresh',
down: down,
up: up
}
});
}
}
window.ZqRefresh = pullToRefresh;
})(window, jQuery);1234单个下拉刷新：- html
|
|
zqRefresh = new ZqRefresh({
tableIds: [‘.mui-table-view’],
requestData: requestData,
renderWithData: renderWithData,
isMulti: false
});
zqRefresh.startRefresh(false);
function requestData(type, callBack) {
//do something
//then call callBack
if(callBack){
callBack(data,isLast);
}
}
function renderWithData(table, data, currentIndex, type) {
//render ui
table.append($(‘‘));
}
|
|