ApiCloud

時間 2019-12-10

標籤 apicloud 简体版

原文原文鏈接

1、config.xml配置文件javascript

<widget id="A12345678901"  version="0.0.1">
    <name>API Example</name>
    <description>
        API Example App.
    </description>
    <author email="developer@apicloud.com" href="http://www.apicloud.com">
        APICloud.SIR
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="windowBackground" value="#FFF" />
    <permission name="call" />
    <feature name="weiXin">
        <param name="urlScheme" value="wx7779c7c063a9d4d9" />
    </feature>
</widget>

config.xml

「id」: 必填，應用ID，由雲服務器自動分配。它是該應用的惟一標識。
「version」：必填，應用的版本號。
「name」：必填，應用名稱。
「description」：可選，應用簡單描述信息。
「content」：必填，應用運行的起始頁。
「permission」：必填，權限配置。（詳細介紹見應用配置指南文檔）

2、模塊調用css

 var dialogBox;
    apiready = function() { 
        dialogBox = api.require('dialogBox');
    }

3、屬性html

1，tapmodevue

tapmode具備速點擊事件功能，在觸發事件中加入tapmode能夠消除JS中標準click事件的300毫秒延遲；同時，它具備觸發可顯示樣式的效果，tapmode='css樣式類' 屬性，當該元素touchstart touchmove的時候就會展示css樣式。java

 <div tapmode onclick="aa()">點擊我tapmode</div>
function aa()
{
    alert("aa");
}

code

4、方法ios

1，parseTapmodeweb

api.parseTapmode() ajax

如果以後用代碼建立的 dom 元素，則須要調用該方法後 tapmode 屬性纔會生效 json

!!!注意!!!：引擎對具備tapmode屬性的元素點擊事件的優化處理會在apiready事件觸發以前，根據當前的dom樹自動進行優化。在apiready以後加載的數據使用要顯式的調用api.parseTapmode方法來進行主動的tapmode處理，例如在上拉加載更多數據後，要調用一下api.parseTapmode方法.
!!!注意!!!：要按UE設計肯定可點擊區域的大小，能夠適當擴大點擊區域來保障點擊反應的靈敏。
!!!注意!!!：api.parseTapmode調用會有性能成本，不須要的狀況下不要隨便調用。
!!!注意!!!：要按照需求明確全部按鈕點擊時的交互效果，爲tapmode屬性設置正確的樣式值，對於沒有交互效果的點擊實現，能夠不爲tapmode屬性指定任何樣式，可是爲了優化點擊速度，必需要給元素增長tapmode屬性。

注意事項

2，fixStatusBar api

傳入的DOM元素增長適當的上內邊距，避免header與狀態欄重疊

var header = $api.byId('aui-header');
    if (header) {
        $api.fixStatusBar(header);
    }

View Code

沒法跟config.xml裏面的 <preference name="statusBarAppearance" value="false" /> 一塊兒使用

注意

3，setStorage/getStorage

//設置
$api.setStorage('user', {name:'hunter',sex:'男'});
//獲取
var user=$api.getStorage('user');
var str= "姓名："+user.name+"；性別："+user.sex;

View Code

4，JSON

JSON.parse(‘’) 方法用於將一個 JSON 字符串轉換爲對象

JSON.stringify(data) 方法是將一個JavaScript值(對象或者數組)轉換爲一個 JSON字符串

5，win/frm傳參

//傳入參數        
api.openWin({
        name: 'prodetail_win',
        url: 'project/prodetail_win.html',
        pageParam: {
            prj_id: id
        }
    });

接收參數
api.pageParam

View Code

6，上傳文件

function fnUpload(filepath, callback) {
    var files = [];
    if (typeof(filepath) == 'string') {
        files.push(filepath);
    } else {
        files = filepath
    }
    api.ajax({
        url: webpage + '/api/Sys/UploadFile',
        method: 'post',
        data: {
            files: {
                'headimg': files
            }
        }
    }, function(ret, err) {
        if (ret) {
            if (checktoken(ret.ret)) {
                if (ret.ret == 0) {
                    callback(ret);
                } else {
                    alertmsg(ret.msg);
                }
            }
        } else {
            errormsg(err);
        }
    });
};

View Code

 getOneImg('camera', 'url', function(result) {
                        var url = result.data;
                        fnUpload(url,function(res){
                            if(res.ret==0)VM.imgUrls.push(res.data)
                        })
                        //gouploadfile(url, dirpid);
                     });

調用

7，調用相機或圖庫

function getOneImg(sourceType, destinationType, callback) {
    var quality = 80;
    var targetWidth = 800;
    var targetHeight = 800;
    if (api.systemType == 'ios') {
        quality = 50;
        targetWidth = 500;
        targetHeight = 500;
    }
    api.getPicture({
        sourceType: sourceType,
        encodingType: 'jpg',
        mediaValue: 'pic',
        destinationType: destinationType,
        quality: quality,
        targetWidth: targetWidth,
        targetHeight: targetHeight
    }, function(ret, err) {
        if (ret) {
            if (ret.data) {
                callback(ret);
            } else {
                api.toast({
                    msg: '取消選擇'
                });
            }
        } else {
            if (err.msg === 'user canceled') {
                api.toast({
                    msg: '取消選擇'
                });
            } else {
                api.toast({
                    msg: '讀取圖片錯誤'
                });
            }
        }
    });
}

View Code

8，多圖選擇

//多圖選擇
function getImgsObj(max, callback) {
    var UIAlbumBrowser = api.require('UIAlbumBrowser');
    var fcolor = '#fff';
    if (api.systemType == 'ios') {
        fcolor = '#000';
    }
    UIAlbumBrowser.open({
        max: max,
        type: 'image',
        styles: {
            bg: '#fff',
            mark: {
                icon: '',
                position: 'bottom_left',
                size: 20
            },
            nav: {
                bg: '#03a9f4',
                titleColor: '#fff',
                titleSize: 18,
                cancelColor: '#fff',
                cancelSize: 16,
                finishColor: fcolor,
                finishSize: 16
            }
        },
        rotation: true
    }, function(ret) {
        if (ret) {
            if (ret.eventType == 'confirm') {
                if (!ret.list || ret.list.length <= 0) return;
                callback(ret);
            }
        }
    });
}

View Code

//多圖上傳
                        getImgsObj(5, function(res) {
                             showProgressMsg('圖片處理中');
                             var index=0;
                             var total=res.list.length;
                             if(api.systemType=="ios")
                                {
                                    for(var i=0;i<total;i++)
                                    {
                                        var UIAlbumBrowser = api.require('UIAlbumBrowser');
                                        UIAlbumBrowser.transPath({
                                            path: res.list[i].path,
                                            scale: 0.1 //圖片壓縮 0~1.0
                                        }, function(rett, errr) {
                                            if (rett) {
                                                fnUpload(rett.path,function(resss){
                                                    if(resss.ret==0)VM.imgUrls.push(resss.data);
                                                    if(++index==total)api.hideProgress();
                                                })
                                            } else {
                                                
                                            }
                                        });
                                    }
                                }
                                else
                                {
                                    for(var i=0;i<res.list.length;i++)
                                    {
                                        fnUpload(res.list[i].path,function(resss){
                                                if(resss.ret==0)VM.imgUrls.push(resss.data);
                                                //if(++index==total)api.hideProgress();
                                            })
                                    }
                                }
                                
                        });

調用

5、AUI

1，aui-img-round設置圖片爲圓形

2，柵格系統

    <div class="aui-content aui-content-padded">
        <div class="aui-row aui-row-padded">
            <div class="aui-col-xs-2">1</div>
            <div class="aui-col-xs-2">2</div>
            <div class="aui-col-xs-2">3</div>
            <div class="aui-col-xs-2">4</div>
        </div>
    </div>

View Code

3，表單

        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-header">基本信息</li>
                
                 <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            檢查項目
                        </div>
                        <div class="aui-list-item-input">
                            <select>
                                <option>上海甌雲總部</option>
                                <option>綠地集團</option>
                            </select>
                        </div>
                    </div>
                </li>
                
                 <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            檢查部件
                        </div>
                        <div class="aui-list-item-input">
                            <select>
                                <option>起重機1號</option>
                            </select>
                        </div>
                    </div>
                </li>
                

            </ul>
        </div>

View Code

4，右邊的圖片加文字

<div class="aui-pull-right aui-list-item-media" style="width:100px;display:flex;align-items: center;justify-content: center;">
                        <img src="../../image/2.0/saomiao.png" style="width: 1.2rem" class="aui-list-img-sm" />開始掃描
                    </div>

View Code

5，圖片文字一塊兒居中

.box{
        display:flex;
        align-items: center;//子元素垂直居中
        justify-content: center;//子元素水平居中
}

View Code

6，加上>箭頭

 <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-label">
                            子領域
                        </div>
                        <div class="aui-list-item-input">
                            <select v-model="frmData.subdoman" tapmodel onchange="getZgxwt()">
                                <option v-for="item in subDomains" v-bind:value="item.id">{{item.content}}</option>
                            </select>
                        </div>
                    </div>

aui-list-item-arrow

 <li class="aui-list-item" onclick="add('contacts')">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mobile"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">選擇手機聯繫人</div>
                    <div class="aui-list-item-right">無需審覈</div>
                </div>
            </li>

帶圖標

7，圖片加圓形邊框

<img src="../../image/demo5.png" class="aui-img-round aui-list-img-sm">

View Code

6、第三方插件

1，datetime

插件下載：https://pan.baidu.com/s/18fG4M3k72PEPUEE-9e4QCg

<link rel="stylesheet" type="text/css" href="../../script/datetime/mobiscroll.javascript.min.css" />

<script type="text/javascript" src="../../script/datetime/mobiscroll.javascript.min.js"></script>

引用js和css文件

<input type="text" placeholder="選擇時間" readonly="readonly" v-model="frmData.xjdate" id="startday"/> 

function datatimeInit() {
    mobiscroll.datetime('#startday', {
        lang: 'zh',
        display: 'bottom',
        dateFormat: 'yy-mm-dd',
        timeFormat: 'hh:ii',
        onBeforeShow: function(event, inst) {
            api.setFrameAttr({
                name: api.frameName,
                bounces: false
            });
        },
        onBeforeClose: function(event, inst) {
            api.setFrameAttr({
                name: api.frameName,
                bounces: true
            });
        },
        onSet: function(event, inst) {
            if(event.valueText)$api.val($api.byId('startday'), event.valueText);
        }
    });
}

datatimeInit

2，多級選擇器UIActionSelector

/** 多級數據選擇器 */
function fnOpenActionSelector(itemsData, callback, num) {
    api.setFrameAttr({
        name: api.frameName,
        bounces: false
    });
    var colnum = 1;
    if (num) {
        colnum = num;
    }
    var UIActionSelector = api.require('UIActionSelector');
    UIActionSelector.open({
        datas: itemsData,
        layout: {
            row: 5,
            col: colnum,
            height: 30,
            size: 14,
            sizeActive: 14,
            maskBg: 'rgba(0,0,0,0.2)',
            bg: '#fff',
            color: '#888',
            colorActive: '#f00',
            colorSelected: '#f00'
        },
        animation: true,
        cancel: {
            text: '取消',
            size: 14,
            w: 90,
            h: 44,
            bg: 'transparent',
            bgActive: 'transparent',
            color: '#888',
            colorActive: '#888'
        },
        ok: {
            text: '肯定',
            size: 14,
            w: 90,
            h: 44,
            bg: 'transparent',
            bgActive: 'transparent',
            color: '#03a9f4',
            colorActive: '#03a9f4'
        },
        title: {
            text: '',
            size: 14,
            h: 44,
            bg: '#fff',
            color: '#888'
        },
        fixedOn: api.frameName
    }, function(ret, err) {
        api.setFrameAttr({
            name: api.frameName,
            bounces: true
        });
        if (ret) {
            if (ret.eventType == 'cancel') {
                UIActionSelector.close();
                return;
            }
            callback(ret);
        } else {
            errormsg(JSON.stringify(err));
        }
    })
}

封裝代碼

<div class="aui-list-item-inner aui-list-item-arrow" tapmode onclick="getPrimaryDomain()">
                        <div class="aui-list-item-label">
                            主領域
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" readonly="readonly" v-model="frmData.primarydoman">
                            <!-- <select v-model="frmData.primarydoman" tapmode onchange="getSubDomain()">
                                <option v-for="item in primaryDomains" v-bind:value="item.id">{{item.content}}</option>
                            </select> -->
                        </div>
                    </div>

頁面代碼

function getPrimaryDomain(){//獲取主領域
    getCommonDomain(1,function(data){
        fnOpenActionSelector(data, function(ret) {
            if(ret.eventType=="ok")
            {
                var info=ret.selectedInfo[0];
                VM.frmData.primarydoman= info.name;
                VM.frmData.primarydomanid= info.value;
                VM.frmData.subdoman= '';
                VM.frmData.zgxwt= '';
            }
         })
    });
}
function getCommonDomain(param,callback)
{
    console.log("getCommonDomain")
     fnPost('/api/ProjectHazard/GetHazardList', {parameter:param}, 'application/json;charset=utf-8', true, function(ret, err) {
                    var data;
                    if(ret.ret==0&&ret.data!=null&&ret.data.length>0)
                    {
                        data=new Array();
                        for (var i = ret.data.length - 1; i >= 0; i--) {
                            
                            data.push({"name":ret.data[i].content,"value":ret.data[i].id})
                        }
                    }
                    if(callback)
                    {
                        callback(data)
                    }
                },false,"");
}

調用代碼

3，mescroll下拉上拉組件

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>甌雲APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../script/mescroll/mescroll.min.css" />
    <style>
        .div-top{
            background-color: #FCFCFC;
        }
        .type-button{
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .type-active{
            color: #88B459;
            border-bottom-style:solid;
            border-bottom-color:#88B459;
            border-bottom-width: 3px;
            width: 50%; 
            margin: auto; 
            height: 5px;
        }
        .type-fgx{
            height:40px;
            line-height: 40px;
            float:left;
        }
        .type-fgx span{
            color: #E3E3E3
        }

        .aui-media-list{
            border:1px solid #E4E4E4;
            border-radius:5px;
            -moz-border-radius:5px; /* Old Firefox */
            margin: 10px;
        }

        .img-right{
            float: right;
            display: inline;
            margin-bottom: auto;
            margin-top: auto;
            margin-right: 10px;
        }
        
        .div-status{
            color:#FFFFFF;
            background-color: #87B453;
            border-radius:5px;
            -moz-border-radius:5px; /* Old Firefox */
            display: inline-block;
        }

    </style>
</head>

<body>
    <div id="app" v-cloak class="mescroll">
    
    <div class="aui-row div-top">
        <div class="aui-col-5">
            <div>
                <ul>
                    <li>
                        <div class="type-button" tapmode onclick="getInspectionList('待辦')">待辦</div>
                    </li>
                    <li class="type-active" v-if="frmData.type=='待辦'"></li>
                </ul>
            </div>
        </div>
        <div class="aui-col-5">
            <div>
                <ul>
                    <li>
                        <div class="type-fgx"><span>|</span></div>
                        <div class="type-button" tapmode onclick="getInspectionList('處理中')">處理中</div>
                    </li>
                    <li class="type-active" v-if="frmData.type=='處理中'"></li>
                </ul>
            </div>
        </div>
        <div class="aui-col-5">
             <div>
                <ul>
                    <li>
                        <div class="type-fgx"><span>|</span></div>
                        <div class="type-button" tapmode onclick="getInspectionList('經過')">經過</div>
                    </li>
                    <li class="type-active" v-if="frmData.type=='經過'"></li>
                </ul>
            </div>
        </div>
        <div class="aui-col-5">
             <div>
                <ul>
                    <li>
                        <div class="type-fgx"><span>|</span></div>
                        <div class="type-button" tapmode onclick="getInspectionList('改進')">改進</div>
                    </li>
                    <li class="type-active" v-if="frmData.type=='改進'"></li>
                </ul>
            </div>
        </div>
        <div class="aui-col-5">
             <div>
                <ul>
                    <li>
                        <div class="type-fgx"><span>|</span></div>
                        <div class="type-button" tapmode onclick="getInspectionList('整改')">整改</div>
                    </li>
                    <li class="type-active" v-if="frmData.type=='整改'"></li>
                </ul>
            </div>
        </div>
    </div>


    <div style="margin: 10px;"></div>


    <div class="aui-list aui-media-list" v-show="inspectionList.length>0">
        <div class="aui-list-item" v-for="item in inspectionList">
              <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">{{item.xj_content}}</div>
                                <div class="aui-list-item-right"><div class="aui-btn aui-btn-success">{{item.type}}</div></div>
                        </div>
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">
                                <i class="aui-iconfont aui-icon-my" style="margin-right:10px">{{item.cuser}}</i>
                                <i class="aui-iconfont aui-icon-date">{{item.xj_date}}</i>
                            </div>
                        </div>
                    </div>
                    <div class="img-right">
                        <img src="../../image/ui/index_arrow.png" class="aui-list-img-sm" style="width:0.8rem" />
                    </div>
              </div>  
        </div>
        <!-- <div id="nomore" class="nomore" v-if="inspectionList.length>=total">沒有更多數據了</div>
        <div id="nomore" class="nomore" v-else="inspectionList.length>=total">下翻加載更多信息</div> -->
    </div>

    
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/request.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/mescroll/mescroll.min.js"></script>
<script type="text/javascript">
var VM;
var mescroll;
apiready = function() {

    VM=new Vue({
         el: "#app",
         data:{
            frmData:{
                type:'待辦'
            },
            inspectionList:[],//巡檢列表
            total:0,
            pageindex:1,
            pagesize:10,
            mescroll:{}
         },
         mounted:function(){
            var vm=this;
            vm.fnInspectionInit(true);
            vm.fnInitMescroll();
         },
         methods:{
             fnInitMescroll:function(){
                var vm=this;
                vm.mescroll=new MeScroll("app", {
                    down: {
                        auto: false,
                        callback: vm.fnDownCallback
                    },
                    up: {
                        auto: false,
                        noMoreSize:1,
                        // isBounce: false,
                        htmlNodata:'<p class="upwarp-nodata">-- 沒有更多數據了 --</p>',
                        callback: vm.fnUpCallback
                    }
                });
             },
             fnDownCallback:function(){//下拉刷新
                var vm=this;
                 setTimeout(function () {
                    vm.fnInspectionInit(false,function(){
                        
                        vm.mescroll.endSuccess(); //刷新成功後調用此方法隱藏
                    })
                },1000);
             },
             fnUpCallback:function(){//上拉刷新
                var vm=this;
                setTimeout(function () {
                    vm.pageindex++;
                    console.log(vm.pageindex)
                    vm.fnGetCommonInspectionList(false,vm.pageindex,function(data){
                        if(data!=null&&data.length>0)
                        {
                            for (var i = data.length - 1; i >= 0; i--) {
                                vm.inspectionList.push(data[i]);
                            }
                        }
                        console.log("total:"+vm.total+",length:"+vm.inspectionList.length);

                        if(vm.total>vm.inspectionList.length)
                        {
                            vm.mescroll.optUp.hasNext = true;//可上拉
                            vm.mescroll.endUpScroll(false);//隱藏上拉
                        }
                        else
                        {
                            vm.mescroll.optUp.hasNext = false;//可上拉
                            vm.mescroll.endUpScroll(true);//隱藏上拉
                        }
                        //vm.mescroll.endSuccess(vm.inspectionList.length,vm.total>vm.inspectionList.length); 
                    });
                },300);
             },
             fnInspectionInit:function(showProgress,callback){
                var vm=this;
                vm.pageindex=1;
                vm.fnGetCommonInspectionList(showProgress,vm.pageindex,function(data){
                    vm.inspectionList=data
                    if(vm.total>vm.inspectionList.length)
                    {
                        vm.mescroll.optUp.hasNext = true;//可上拉
                        vm.mescroll.endUpScroll(false);//隱藏上拉
                    }
                    else
                    {
                        vm.mescroll.optUp.hasNext = false;//可上拉
                        vm.mescroll.endUpScroll(true);//隱藏上拉
                    }
                    if(callback)callback()
                });
             },
             fnGetCommonInspectionList:function(showProgress,pageindex,callback){//獲取巡檢
                var vm=this; 

                var prjid=$api.getStorage('userInfo').myproinfo.id;

                if(vm.frmData.type=="待辦")
                {
                    var param={parameter:{prj_id:prjid},pageindex:pageindex,pagesize:vm.pagesize};
                    fnPost('/api/SafeInspection/GetTodoList',param, 'application/json;charset=utf-8', true, function(ret, err) {
                        var data;
                        if(ret!=null&&ret.ret==0&&ret.data.length>0)
                        {
                            data=ret.data;
                            vm.total=ret.total;
                        }
                        else
                        {
                            data=[];
                            vm.total=0;
                        }
                        if(callback)callback(data);
                    },showProgress,"");
                }
                else
                {
                    var param={parameter:{prj_id:prjid,type:vm.frmData.type},pageindex:pageindex,pagesize:vm.pagesize};
                    fnPost('/api/SafeInspection/GetOtherList',param, 'application/json;charset=utf-8', true, function(ret, err) {
                        var data;
                        if(ret!=null&&ret.ret==0&&ret.data.length>0)
                        {
                            data=ret.data;
                            vm.total=ret.total;
                        }
                        else
                        {
                            data=[];
                            vm.total=0;
                        }
                        if(callback)callback(data);
                    },showProgress,"");
                }

             }


         }
     });

};


function getInspectionList(type){
    VM.frmData.type=type;
    VM.fnInspectionInit(true);
}



</script>

</html>

案例

js下載：https://pan.baidu.com/s/113VxMA48GCtwjlRa2_ZC4g

組件官網：http://www.mescroll.com/

4，提示組件dialogBox

//提示信息
function alertmsg(msg, funname) {
    var closeset = true;
    if (funname == 'exit') {
        closeset = false;
    }
    var dialogBox = api.require('dialogBox');
    dialogBox.alert({
        texts: {
            title: '提示信息',
            content: msg,
            leftBtnTitle: '肯定',
        },
        styles: {
            bg: '#fff',
            w: 280,
            title: {
                marginT: 10,
                icon: '',
                iconSize: 40,
                titleSize: 16,
                titleColor: '#000'
            },
            content: {
                color: '#000',
                size: 14
            },
            left: {
                marginB: 5,
                marginL: 5,
                w: 270,
                h: 40,
                corner: 2,
                bg: '#03A9F4',
                color: '#FFF',
                size: 14
            }
        },
        tapClose: closeset
    }, function(ret) {
        if (ret.eventType == 'left') {
            if (funname) {
                if (funname == 'exit') {
                    exitThisApp();
                } else if (funname == 'back') {
                    goback();
                } else {
                    api.execScript({
                        name: api.winName,
                        frameName: api.frameName,
                        script: funname + '();'
                    });
                }
            }
            dialogBox.close({
                dialogName: 'alert'
            });
        }
    });
}

公共方法

//返回
function goback() {
    api.closeWin();
}

goback

5，圖片瀏覽組件photoBrowser

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>甌雲APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>

    </style>
</head>

<body>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/request.js"></script>
<script type="text/javascript">
var photoBrowser;
apiready = function() {
    api.parseTapmode();
    var imgarr = api.pageParam.imgarr;
    var imgnamearr = api.pageParam.imgnamearr;
    var name = api.pageParam.name;
    var imgindex = api.pageParam.imgindex;
    photoBrowser = api.require('photoBrowser');
    var downloadpath = imgarr[imgindex];
    photoBrowser.open({
        images: imgarr,
        activeIndex: imgindex,
        placeholderImg: 'widget://image/banner_bg.png',
        bgColor: '#000'
    }, function(ret, err) {
        if (ret) {
            if (name) {
                var f_h = api.frameHeight - 50;
                api.openFrame({
                    name: 'imgname_frm',
                    url: 'imgname_frm.html',
                    rect: {
                        x: 0,
                        y: f_h,
                        w: 'auto',
                        h: 50
                    },
                    pageParam: {
                        name: name
                    },
                    bounces: false
                });
            }
            if (ret.eventType == 'loadImgFail') {
                api.toast({
                    msg: '圖片下載失敗'
                });
            }
            if (ret.eventType == 'change') {
                photoBrowser.getIndex(function(ret, err) {
                    if (ret) {
                        var nowindex = ret.index;
                        downloadpath = imgarr[nowindex];
                        getimgname(nowindex, imgnamearr);
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            }
            if (ret.eventType == 'click') {
                api.actionSheet({
                    title: '請選擇',
                    cancelTitle: '取消',
                    buttons: ['保存到相冊', '關閉窗口']
                }, function(ret, err) {
                    if (ret) {
                        if (ret.buttonIndex == 1) {
                            api.download({
                                url: downloadpath,
                                report: true,
                                cache: true,
                                allowResume: true
                            }, function(ret, err) {
                                if (ret.state == 1) {
                                    api.saveMediaToAlbum({
                                        path: ret.savePath
                                    }, function(ret, err) {
                                        if (ret && ret.status) {
                                            api.toast({
                                                msg: '保存成功'
                                            });
                                        } else {
                                            api.toast({
                                                msg: '保存失敗！'
                                            });
                                        }
                                    });
                                } else if (ret.state == 2) {
                                    alert('保存失敗');
                                } else {
                                    //下載中
                                }
                            });
                        } else if (ret.buttonIndex == 2) {
                            photoBrowser.close();
                            goback();
                        } else {
                            return;
                        }
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            }
        } else {
            alertmsg('圖片打開錯誤');
        }
    });
};
</script>

</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。