HTML ApiCloud混编Android和IOS
原生Android和IOS开发耗时比较久，混编相对而言就有了优势，混编工具框架很多，个人觉得APiCloud相对简单容易。开发过程比较上手也有几个坑，在使用一年后简单做个总结。官方文档API：https://docs.apicloud.com/
1开发工具http://www.apicloud.com/devtools
APICloud Studio 1 简洁稳定，代码管理直接在apicloud云端应用，代码提示不智能，建议需求稳定性者使用。
APICloud Studio 2 操作复杂，代码管理需先从第三方git/svn仓库选择一种检出，代码提示比较智能。
2.模块开发http://docs.apicloud.com/Module-Dev/module-dev-guide-for-android
eclipse和Androidstudio都可以进行原生开发后上传模块，注意模块名必须不能重复，详情看链接介绍
3.在线社区https://community.apicloud.com/bbs/forum.php
由于用的人不多百度很少人回答，通过在线社区是一个不错的解决问题方法
4.常用方法函数
常用css：position如果选择固定位置fixed；float如果选择左排列偏移left；overflow如果内容满出可滑动scroll；white-space如果不换行单行nowrap；display如果行内元素inline-block;设置行数：style="overflow: hidden;-webkit-line-clamp:1;display: -webkit-box;-webkit-box-orient: vertical;"常用居中：
①网络请求：jquery框架比自带的请求好用
function aja(){
$.ajax({
url: "xx",
type: "post",
dataType: "json",
async:false,
crossDomain:true,//支持跨域 后台设header("Access-Control-Allow-Origin: *");
beforeSend: function(request) {
request.setRequestHeader("access-token", $api.getStorage('ACCESS_TOKEN'));//head
},
data: {
username: "admin",//参数
password: 1,
},
error:function(err){
alert("网络出错:"+JSON.stringify(err.status));
},
success: function (data) {
$api.setStorage('ACCESS_TOKEN', data.data);//apicode储存简单数据
alert( JSON.stringify( data ) );
}
});
};
----------------------------------------------------------------------------------------------------
window.onscroll=function(){
if(window.pageYOffset>=document.body.clientHeight-document.documentElement.clientHeight){//滑到底了
aja();
}
};
②页面跳转和分享
api.openWin({
name: 'h5',
url: './h5.html',//像原生一样开启一个新页面
pageParam:{
name:'传给页面的数据',//新页面调用api.pageParam.name
},
});apiready=function(){
$api.byId("h").innerHTML=document.location ="https://www.baidu.com";//开启页面时立即自动在指定位置显示指定网址
$api.byId("h").innerHTML="请稍候,loading...";
};
var sharedModule = api.require('shareAction');//分享功能
sharedModule.share({
text: '纯文本信息,这是一条分享信息',
type: 'url',
path:"https://www.baidu.com/",
thumbnail:"widget://a.png",
});
api.addEventListener({
name:'viewappear'
},function(ret,err){
alert('系统监听到显示页面');
});
api.addEventListener({
name:'keyback'
},function(ret,err){
alert('系统监听到返回键');
});//自定义广播api.sendEvent();③select和checkbox全选单选：Vue框架使用更方便
//oncontextmenu="return false"禁止长按或右键 onselectstart="return false"禁止复制
![]()
④导入地图框架
⑤定时器
△setInterval(code,millisec) 按照周期不停地调用函数，直到调用clearInterval(name)或窗口关闭
code 必需。要调用的函数function () { //要执行的代码; }
millisec 必须。周期性执行之间的时间间隔，以毫秒计。
////获取时间var d=new Date();d.getFullYear();d.getMonth()+1;d.getDate();d.getHours();d.getMinutes();d.getSeconds();
△setTimeout(code,millisec) 在指定的毫秒数后调用函数
code 必须。要调用的函数function () { //要执行的代码; }
millisec 必须。在执行代码前需等待的毫秒数。⑥类型转换和数组操作
for (var i = 0; i < array.length; i++) {
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Number(false); //0
Number(true); //1
Number("5 "); //5
Number( "5.5 "); //5.5
}
数组pop：删除原数组最后一项，并返回删除元素的值，如数组为空返回undefined
pop();
数组push：将参数添加到原数组末尾，并返回数组的长度
push();
数组splice：删除指定位置元素或增加指定位置元素
splice(index,howmany,item1,.....,itemN)
index必需。整数，删除项目的下标，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
数组reverse：将数组反序
reverse();
数组sort(orderfunction)：按指定的参数对数组进行排序
sort();
⑦图片预览图片上传
![]()
var image = '';
$("#DIY").change(function(){
image=selectImage(this);
});
function selectImage(file){
if(!file.files || !file.files[0]){
return null;
}
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('image').src = evt.target.result;//图片预览数据
return evt.target.result;//得到的数据
}
reader.readAsDataURL(file.files[0]);//base64格式"data:image/png;base64,xxx"
}; function save(url) {// 创建隐藏的下载
var eleLink = document.createElement('a');
eleLink.download = "";
eleLink.style.display = 'none';
eleLink.href = url;//支持本地在线路径图片下载
document.body.appendChild(eleLink);
eleLink.click();//点击
document.body.removeChild(eleLink);
};
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 截图src
⑧打印日志log(工具栏->启动日志)打印cookie
alert(document.getElementById("myid").value);//显示input的值。
alert(document.getElementById("hid").innerText);//显示标签innerHTML值。
console.log($('#myid').val());//打印日志显示input的值。
console.log($('#hid').text());//打印日志显示标签html()值。
var xxx='测试打印大于3000个字符长度的log';
var index=0;
if(xxx.length<3000){
console.log('打印短的：'+xxx);
}else if(xxx.length>=3000){
while(xxx.length>index){
console.log('打印长的：'+xxx.substring(index,index+3000));
index+=3000;
}
};
document.cookie;//获取cookie字符串
document.cookie="name=abc";//设置cookie⑨支持各浏览器代码复制文字到粘贴板
/*document.getElementById("xx").onclick=function(e){
var targ = e.target;//获取当前事件点击元素Element
targ.className = 'bgover';//改变整个类css样式
//document.getElementById('xx').style.display="none"//改变单个css样式
}*/
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea")
textArea.style.width = '1px'
textArea.style.height = '1px'
textArea.style.border = 'none'
textArea.style.outline = 'none'
textArea.style.boxShadow = 'none'
textArea.style.background = 'transparent'
textArea.value = text
document.body.appendChild(textArea)
textArea.select()
if(document.execCommand('copy')){
alert("复制到粘贴板了");
}
document.body.removeChild(textArea)
}⑩显示标签内容不被转义
var temp = document.createElement("div");
temp.innerHTML = 'html标签格式的内容';
var output= temp.innerText || temp.textContent;
temp = null;
//document.getElementById("goods_id").innerHTML=output;