webapp开发新手，遇坑记录。
1.ios系统部分标签绑定click事件无效
要实现一个点击指定控件以外的位置让该控件消失的功能，在用click事件绑定在body标签想以此监听点击的屏幕所有位置，在android手机上测试时正常，但是在ios手机上测试时就无法触发click事件。改用touchstart的方法之后则在android，ios两个系统下都能够兼容
具体代码如下：
使用click事件的部分代码：
var postMessageEl = document.getElementById('postMessage');
var wrapperDataset = postMessageEl.dataset;
$("body").on('click',(function(e){
if(e.target.id != 'postMessage'){
wrapperDataset.flag = "off";
displayPopup();
}else{
if(wrapperDataset.flag === "on"){
wrapperDataset.flag = "off";
}else{
wrapperDataset.flag = "on";
}
displayPopup();
}
}));
使用touchstart事件的部分代码：
var postMessageEl = document.getElementById('postMessage');
var wrapperDataset = postMessageEl.dataset;
$("body").on('touchstart',(function(e){
if(e.target.id != 'postMessage'){
wrapperDataset.flag = "off";
displayPopup();
}else{
if(wrapperDataset.flag === "on"){
wrapperDataset.flag = "off";
}else{
wrapperDataset.flag = "on";
}
displayPopup();
}
}));
2.用js来动态修改指定标签的css样式
var testID = document.getElementById('testID');
testID.className = "css样式名";
3.html主页面向子页面传递数据并且子页面监听到数据变化后执行相应操作
主页面代码：
localStorage.setItem("key","data");
mui.fire(plus.webview.getWebviewById('kid.html'), 'customevent');
子页面代码：
window.addEventListener('customevent',function(event){//接受从主页面传来的值并刷新页面
//监听到主页面的操作之后，需要执行的方法
});
4.水平居中的方法
设定父控件的 style="width: 100%;text-align: center;"
需要水平居中的控件放在父控件中即可
5.localStorage如何存入和读取json数据
var jsonData = {'name': 'test', 'age': 188}; // 定义一个JSON对象
var str_jsonData = JSON.stringify(jsonData); //json.stringify用于从一个json对象中将数据解析成字符串形式
console.log(typeof(str_jsonData));
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地
var getLocalData = localStorage.getItem('localData'); // 读取字符串数据
console.log(typeof(getLocalData));
var jsonObj = JSON.parse(getLocalData);//json.parse用于从一个字符串中解析出json对象
console.log(typeof(jsonObj));
console.log(jsonObj.age);
6.保存网络图片
//创建下载任务
var dtask = plus.downloader.createDownload(loadUrl, {}, function(d, status) {
if (status == 200) {
//下载成功
//本地相对路径("_downloads/logo.jpg")转成SD卡绝对路径("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg");
var sd_path = plus.io.convertLocalFileSystemURL(d.filename);
plus.gallery.save(sd_path, function() {
mui.toast("保存成功")
});
} else {
//下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在
}
});
//启动下载任务
dtask.start();
网友评论