APICloud笔记

Posted 2020-09-25

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