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;"常用居中：<center></center>常用判断：if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {//当前是手机端}
①网络请求：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();
}
};
<form action="xx" target="iframe" method="post" enctype="multipart/form-data" onsubmit="aja()">
<input type="file" name="file" pattern="" title="不符合" autocomplete="off">
<input type="submit"> //不跳转action: target="iframe" 拦截表单action: onsubmit="xx();return false"
</form>
②页面跳转和分享
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框架使用更方便
<div id="app"> //oncontextmenu="return false"禁止长按或右键 onselectstart="return false"禁止复制
<select v-model='items' @change="mycity(items)">
<option id='yes' v-if="sub.NAME.indexOf('yes')>-1==true" v-for='(sub,index) in result'>{{sub.NAME}}</option>
</select>
<img :src="VUEIMG" onerror="this.src='../image/xx'" :class="{ 'classA':isA,'classB':isB}">
</div>
<script type="text/javascript" src="../script/vue.js" ></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',//Vue作用域
data:{//Vue数据
items:"city",
result:[],
},
methods:{//Vue方法
mycity:function(texts){
alert(texts);
},
},
});
apiready=function(){
vm.result=ajaxcity();//初始化时自定义方法获取数据
}
</script>
<div style="margin: 0.8rem"><input type="checkbox" id="qx" @click="all()"></div>
<div style="margin: 0.8rem"><input type="checkbox" name="dx" @click="one()"></div>
<div style="margin: 0.8rem"><input type="checkbox" name="dx" @click="one()"></div>
<input type="radio" name="radiogroup" @change='mycity()' checked="">
<script type="text/javascript">
var all=document.getElementById("qx");//全选框设置唯一的id
var one=document.getElementsByName("dx");//多个多选框设置相同name
function one(){//checkbox多选框联动
var data=[];
var selcount=0;
for(var i=0;i<one.length;i++) {
data.splice(i,0,one[i].checked);
if(one[i].checked){
selcount++;
}
if(!one[i].checked){
selcount--;
}
if(selcount==one.length){
all.checked=true;
}else{
all.checked=false;
}
}
return data;
}
function all(){//checkbox全选框联动
if(all.checked){
for(var i=0;i<one.length;i++) {
one[i].checked=true;
}
}else{
for(var i=0;i<one.length;i++) {
one[i].checked=false;
}
}
}
</script> ④导入地图框架
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZKvE25QNawwRm3EFb7hLnliSHTXReN60"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("line_map");//指定区域ID显示地图
var point = new BMap.Point(116.400244,39.92556);//经纬度
map.centerAndZoom(point, 12);//显示中心区域
var marker = new BMap.Marker(point,{icon:new BMap.Icon("../image/G.png",new BMap.Size(28,38))});//画标注
marker.id="xx";//给marker赋值//marker=new BMap.Polyline([prev,next ],{strokeColor:"#3391cc",strokeWeight: 2,strokeOpacity:0.5});//画线
map.addOverlay(marker);// 将标注添加到地图中,如要删除map.clearOverlays();
marker.enableDragging(); // 可拖拽
marker.addEventListener("click", getAttr);//点击图标
function getAttr() {
alert(JSON.stringify(marker.id));
};
marker.addEventListener("dragend", function () {//拖拽图标
var p = marker.getPosition();//获取marker的位置
alert("marker的位置是" + p.lng + "," + p.lat);
});
</script>⑤定时器
△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();
⑦图片预览图片上传
<label for="DIY" style="border:1px red solid;border-radius: 5px">自定义选择按钮</label>
<input type="file" accept="image/*" capture="camera" id="DIY" style="position:absolute;clip:rect(0 0 0 0);"><!--照相-->
<input type="file" accept="video/*" capture="camcorder"><!--录影-->
<input type="file" accept="audio/*" capture="microphone"><!--录音-->
<img id="image"src=""/>
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);
};
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
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;
类似资料：