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.常用方法函数

①网络请求：jquery框架比自带的请求好用

      function ajaxlogin(){        $.ajax({                url: baseurl+"/api/system/login",                type: 'post',                dataType: 'json',                async:false,                beforeSend: function(request) {                request.setRequestHeader("access-token", $api.getStorage('ACCESS_TOKEN'));//请求head                },                data: {                            username: "admin",//请求参数                            password: 123456                },                success: function (data) {                           $api.setStorage('USER', data.data.USER);//储存简单数据                          // alert( JSON.stringify( data ) );                }          });    };

②页面跳转

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...";};

api.addEventListener({  name:'viewappear'},function(ret,err){  alert('系统监听到显示页面');});  api.addEventListener({  name:'keyback'},function(ret,err){  alert('系统监听到返回键');});//自定义广播api.sendEvent();

③select和radio使用

<div class="boxflex box_text" id="app">    <select v-model='items' @change="mycity(items)">      <option v-if="sub.NAME.indexOf('yes')>-1==true" v-for='(sub,index) in result'>{{sub.NAME}}</option>    </select></div><script type="text/javascript" src="../script/vue.js" ></script><script type="text/javascript">    var vm=new Vue({//Vue框架      el:'#app',      data:{        items:"城市",        result:[],      },      methods:{        //方法        mycity:function(texts){        alert(texts);        },      },    });    apiready=function(){      //获取城市    vm.result=ajaxcity();//自定义方法获取城市列表    }</script>

<input type="radio" class="aui-checkbox" name="radiogroup" @change='mycity()' checked="">          var radios = document.getElementsByName("radiogroup");//整个组的name需相同          var tag = false;          var val;          var index;          for (var i = 0; i < radios.length; i++) {            if(radios[i].checked) {               tag = true;               val = radios[i].value;               index=i;               break;            }          }

④导入地图框架

<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()或窗口关闭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(); 

⑦图片预览图片上传

<img id="image"src=""/>var image = '';//"data:image/png;base64,xxx"function selectImage(file){if(!file.files || !file.files[0]){return;}var reader = new FileReader();reader.onload = function(evt){document.getElementById('image').src = evt.target.result;//图片预览数据image = evt.target.result;//图片上传数据}reader.readAsDataURL(file.files[0]);//base64格式};

⑧打印日志log(工具栏->启动日志)

alert(document.getElementById("myid").value);//显示input的值。alert(document.getElementById("hid").innerText);//显示标签innerHTML值。标签隐藏document.getElementById('x').style.display="none";jq标签隐藏$('#x').hide();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;}};

……