HTML ApiCloud混编Android和IOS

最新推荐文章于 2024-05-12 04:40:08 发布

a704755096

最新推荐文章于 2024-05-12 04:40:08 发布

阅读量2.3k

点赞数

分类专栏： HTML混编

本文链接：https://blog.csdn.net/a704755096/article/details/78633366

版权

HTML混编专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原生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);

};

⑧打印日志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;

a704755096

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML ApiCloud混编Android和IOS

原生Android和IOS开发耗时比较久，混编相对而言就有了优势，混编工具框架很多，个人觉得APiCloud相对简单容易。开发过程比较上手也有几个坑，在使用一年后简单做个总结。官方文档API：https://docs.apicloud.com/1开发工具http://www.apicloud.com/devtoolsAPICloud Studio 1 简洁稳定，代码管理直接在apiclou...
复制链接

扫一扫

专栏目录