APICloud笔记

（1）改变手机顶部状态栏字体、图标颜色　　api.setStatusBarStyle({style:‘light‘});//light白色，dark黑色（2）页面跳转传参　　例：

　　api.openWin({   　　 name: ‘compileRegion‘,    　　url: ‘./compileRegion.html‘,   　　 reload:true,//此参数如果不传，导致页面数据不更新   　　 pageParam:{    　　    companyID:thar.company.companyID   　　 }　　});　　//在新页面获取参数：api.pageParam.companyID;　　

　　返回上一步页面：api.closeWin();

（3）提示消息　　api.toast({ msg:rst.msg});//根据需要补充参数

（4）存储数据

　　$api.setStorage("userID", userID);//存　　$api.getStorage(‘userID‘)//取　　$api.rmStorage(‘userID‘);//删

（5）打开手机浏览器

openAppWin（‘https://www.baidu.com‘）

function openAppWin(url){   var isAndroid = (/android/gi).test(navigator.appVersion);    if (isAndroid){//android手机      api.openApp({         androidPkg: ‘android.intent.action.VIEW‘,         mimeType: ‘text/html‘,         uri: url      }, function(ret, err) {         if (ret) {            console.log(JSON.stringify(ret));         } else {            alert(err.msg);         }      });   }else{//ios手机      api.openApp({         iosUrl: url      });   }}

（6）连接接口

request(接口地址,type类型,参数,回调函数);

function request(url,type,data,callback) {   if(navigator.platform == ‘Win32‘) {//pc端使用jquery.ajax      $.ajax({         contentType: ‘application/json;charset=utf-8‘,         url: url,         type: type ,         data: JSON.stringify(data),         success: function (ret){            callback(ret, null);         },         error: function (e) {            alert(e);         }      });   }   var UILoading = api.require(‘UILoading‘);//加载效果   UILoading.flower({      fixed: true   }, function(retid) {      api.ajax({         url: url,         method: type,         headers:{‘Content-Type‘:‘application/json‘},         data: {            body: data         }      }, function(ret, err){         UILoading.closeFlower({id:retid.id});//响应成功关闭加载         if(err != undefined && err != ‘‘){            api.toast({msg: err.msg});            return;         }         callback(ret, err);      });   });}

（7）点击图片查看

<script src="../script/api.js"></script><script src="../script/jquery-1.10.1.min.js"></script><script src="../script/iscroll-zoom.js"></script><script src="../script/hammer.js"></script><script src="../script/jquery.photoClip.js"></script>

$("body img").click(function(data){    open_urlImg(data.currentTarget.src);});

function open_urlImg(src){    var photoBrowser = api.require(‘photoBrowser‘);//需引入模块photoBrowser

    photoBrowser.open({        images: [            src        ],        bgColor: ‘#000‘    }, function(ret, err) {        if (ret) {            if(ret.eventType==‘click‘){                photoBrowser.close();            }        } else {            api.toast({msg:JSON.stringify(err)});        }    });}

（8）编辑头像功能html：

<div class="modifyAvatar hide" id="modifyAvatar">    <div class="content">        <article class="htmleaf-container">            <input type="file" id="file2"  name="选择图片" style="display: none;" onchange="showPhoto(this,‘identity‘)"  accept="image/*" multiple>//调取手机系统相机、图库            <div id="clipArea"></div>            <div class="operation">                <p class="operation_p">                    <button id="clipCancel" onclick="Cancel()">取消</button>                    <button id="clipBtn">保存</button>                </p>            </div>        </article>    </div></div>

js:

Avatar = function(){    $("#file2").click();};showPhoto =  function(){    document.getElementById("clipArea").style.cssText = "height: 200px;";    document.getElementById("modifyAvatar").style.cssText = "display: block;";};$("#clipArea").photoClip({    width: 200,    height: 200,    file: "#file2",     ok: "#clipBtn",    loadStart: function(){        api.toast({msg: "照片读取中"});    },    loadComplete: function(){        api.toast({msg: "照片读取完成"});    },    clipFinish: function(dataURL){        //console.log(‘成功‘);        console.log(dataURL);//得到的图片地址，可直接在接口中使用        document.getElementById("UImg").src = dataURL;        document.getElementById("modifyAvatar").style.cssText = "display:none;";    }});Cancel = function(){    document.getElementById("modifyAvatar").style.cssText = "display:none;";}