APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示

UIAlbumBrowser是一个本地媒体资源扫描器,在Android平台上可扫描整个设备的资源,iOS仅扫描相册内部的资源。注意本模块在iPhone设备上仅支持iOS8.0及更高版本。
模块文档地址:https : //docs.apicloud.com/Client-API/UI-Layout / UIAlbumBrowser

本例展示了常用的imagePicker()接口和open()接口。imagePicker()只能选择照片,可以点击相机按钮进行拍摄。open()接口可以选择照片或视频,有类型参数进行控制。
注意iOS上返回的路径需要使用transPath()接口进行处理。附件为小部件形式的代码包。

模块经常使用的场景,如从相册选择图片然后进行上传。
高级用法,用scan()和fetch()接口从相册获取指定数量的图片路径,然后通过帧自定义选择界面UI效果。

<!DOCTYPE html>
<html>
?
<头>
    <meta charset =“ utf-8”>
    <meta name =“ viewport” content =“最大比例= 1.0,最小比例= 1.0,用户可缩放= 0,宽度=设备宽度,初始比例= 1.0” />
    <title>标题</ title>
    <link rel =“ stylesheet” type =“ text / css” href =“ ../ css / api.css” />
    <样式>
        身体 {
            padding-top:60像素;
        }
?
        .imgcontainter {
            显示:flex;
            显示:-webkit-flex;
            / *显示:-webkit-box; * /
            flex-direction:行;
            flex-wrap:包装;
            证明内容:环绕;
            / * justify-content:center; * /
            align-items:居中;
            / * align-content:拉伸; * /
            高度:100%;
            填充:5px;
        }
?
        .imgcontainter img {
            flex:1 1自动;
            -webkit-flex:1 1自动;
            宽度:145像素;
            高度:145px;
            边距:5px;
        }
?
        按钮{
            边距:10px;
        }
    </ style>
</ head>
?
<身体>
?
    <img src =“” id =“ img” width =‘300‘>
?
    <button tapmode type =“ button” onclick =“ UIAlbumBrowser_imagePicker()” name =“ button”> UIAlbumBrowser_imagePicker </ button>
    <button tapmode type =“ button” onclick =“ UIAlbumBrowser_open()” name =“ button”> UIAlbumBrowser_open </ button>
    <div id =‘bd‘class =“ imgcontainter”>
        <!-<img src =“ ../ image / 10801920.png” alt =“”>
        <img src =“ ../ image / 10801920.png” alt =“”>
        <img src =“ ../ image / 10801920.png” alt =“”>
        <img src =“ ../ image / 10801920.png” alt =“”>->
    </ div>
</ body>
<script type =“ text / javascript” src =“ ../ script / api.js”> </ script>
<script type =“ text / javascript”>
    var UIAlbumBrowser;
    var i = 0;
    var imgarr = [];
    apiready = function(){
        UIAlbumBrowser = api.require(‘UIAlbumBrowser‘);
    };
?
    //打开图片选择器
    函数UIAlbumBrowser_imagePicker(){
        UIAlbumBrowser.imagePicker({
            最多:9
            样式:{
                bg:‘#000000‘,
                // cameraImg:‘widget://res/cameraImg.png‘,
                标记:{
                    位置:“ top_right”,
                    大小:20
                },
                导航:{
                    bg:‘#000000‘,
                    cancelColor:‘#fff‘,
                    cancelSize:16
                    nextStepColor:‘#7fff00‘,
                    nextStepSize:16
                },
                thumbnail:{//(可选项)返回的标题配置,**建议本图片不要设置过大**若已有的标签,则使用已有的替代。若要重新生成替换,可先调用清除缓存接口api.clearCache()。
                    w:100,//(可选项)数字类型;返回的初始的宽;否则:原图的宽度
                    h:100 //(可选项)数字类型;返回的初始的宽;否则:原图的高度
                }
            },
            动画:真实,
        },函数(ret){
            如果(ret.eventType ==‘nextStep‘){
                如果(ret.list && ret.list.length> 0){
                    imgarr = ret.list;
                    UIAlbumBrowser_transPath();
                }
                UIAlbumBrowser.closePicker();
                //alert(JSON.stringify(ret));
            }
            如果(ret.originalPath && ret.originalPath.length> 0){
                document.getElementById(‘img‘)。src = ret.originalPath;
            }
        });
    }
?
    函数UIAlbumBrowser_open(){
        UIAlbumBrowser.open({
            最多:9
            类型:“全部”,
            isOpenPreview:是的,
            样式:{
                bg:‘#000000‘,
                标记:{
                    位置:“ bottom_left”,
                    大小:20
                },
                导航:{
                    bg:‘#000000‘,
                    titleColor:‘#ffffff‘,
                    titleSize:18,
                    cancelColor:‘#00ff00‘,
                    cancelSize:16
                    finishColor:‘#00ff00‘,
                    尺寸:16
                }
            },
            rotation:false //无效
        },函数(ret){
            如果(ret){
                alert(JSON.stringify(ret));
            }
        });
?
    }
?
    函数UIAlbumBrowser_transPath(){
        UIAlbumBrowser.transPath({
            路径:imgarr [i] .path
        },函数(ret,err){
            如果(ret){
                i ++;
                如果(i <imgarr.length){
                    UIAlbumBrowser_transPath();
                }其他{
                    i = 0;
                }
                var img = document.createElement(‘img‘);
                img.src = ret.path;
                document.getElementById(‘bd‘)。appendChild(img);
                console.log(“ ret.path:” + ret.path);
            }其他{
                console.log(JSON.stringify(err));
            }
        });
    }
</ script>
?
</ html>
复制代码

原文地址:https://blog.51cto.com/9334358/2480446

时间: 2024-09-30 11:21:57

APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示的相关文章

APICloud开发者进阶之路 | UIPickerView 模块示例demo

本文出自APICloud官方论坛 rongCloud2  3.2.8 版本更新后添加了发送小视频接口,发送文件接口. rongCloud2  概述 融云是国内首家专业的即时通讯云服务提供商,专注为互联网.移动互联网开发者提供即时通讯基础能力和云端服务.通过融云平台,开发者不必搭建服务端硬件环境,就可以将即时通讯.实时网络能力快速集成至应用中.rongCloud2 封装了融云即时通讯能力库 IMLib SDK 的 API,对融云的相关接口做了一一对应的封装,功能详情可参考目录.使用 rongClo

APICloud开发者进阶之路 |audioRecorder录音模块Demo

本文出自APICloud官方论坛   audioRecorder 模块通过封装系统的录音接口,能够快速的为开发者提供一个完整的录音功能. 该模块提供Android和iOS版本,录音方式及录制的音频格式也依赖于相关系统. 需要注意的是:安卓跟ios所支持的格式是不一样的,最好选择aac格式, 如果不选择acc格式你们就需要判断此设备是ios还是安卓,(api.systemType使用这个可以获取是安卓还是ios) 然后根据设备不同去配置对应录制音频格式. Android系统支持的录制音频格式为:a

APICloud开发者进阶之路 | 超级实用技巧

金秋9月,脑海还是北京的"中非合作蓝"!今天按照惯例,柚子君还是要督促大家充充电的! 本周<30天,App开发从0到1>将要给大家分享第十章超级实用技巧,我们精选了其中的一个章节--地图模块的实用扩展:在地图上添加自定义按钮,一起来学习吧. 主要内容本章将向读者介绍一些开发中常用的功能和技巧 , 这些技巧涉及应用开发的方方面面. 示例 1 讲解了屏幕动态适配的方法,是开发 App 必须具备要掌握的技能之一:示例 2.示例 7.示例 9 -示例 11 具体讲解了一些常见的业务

APICloud开发者进阶之路|了解APICloud 应用设计思想

大家好!上期我们介绍了<30天,App开发从0到1>一书中app的开发流程,本期我们继续第二章的精彩分享: 主要内容: 教会大家使用APICloud技术实现app的界面布局和静态页面的缩写. 学习目标: 1.学习 APICloud app 的启动过程,了解 confi g.xml 配置文件. 2.了解 APICloud 五大布局组件和混合渲染模式. 3.了解 API 对象和前端框架. 4.学习如何进行屏幕适配和状态栏处理. 本章从APICloud app执行流程.应用设计思想.界面和导航.搭建

APICloud开发者进阶之路 |纯手工编写日程表功能

最近看论坛内关于极光推送的问题有很多,本想写一个关于极光的详细教程的,无奈已经有很多大牛分享过了,所以只得纯手工写了一个日程表,可以以周为单位左右切换,适用于医疗.教育等方向的app,先看下效果图. 再看一下代码截图 自动识别当前日期,并计算出本周的起始日期,通过左右按钮切换上一周和下一周,并同步更换日程,日程可点击激活高亮,至于激活显示什么样的内容你们自己根据实际功能要求处理吧. 原文地址:https://blog.51cto.com/9334358/2404941

APICloud开发者进阶之路 |iOS修改entitlements文件

本文出自APICloud官方论坛, 感谢论坛版主 技术咨询-Kenny 的分享.   一.概述iOS原生开发中若要实现某些特殊功能,如使用HealthKit.实现Universal Links等.需要在工程target的Capabilities选项中打开对应的功能开关,而最终的配置都会写入到工程中的一个.entitlements文件中,下面我们提供了配置该entitlements文件的方法. 二.配置.entitlements是xml格式的文件,新建一个文本文件,修改内容后命名为UZApp.en

pd的django个人博客教程----1:效果展示等

开发环境同to do list 1:首页:localhost/pd/ 2:导航栏测试或者生活点入: 测试:localhost/category/?cid=1 3:点击文章后进入文章显示页面 e.g:进入文章7:localhost/article/?id=7 4:右侧边栏文章分档界面; e.g:2015,10归档:localhost/archive/?year=2015&month=10 5:浏览排行与评论排行等只是点击跳转到相应文章页面就是了. 各个页面做了展示主要目的是列出对应的URL传递,好

不再任人欺负!手游安全的进阶之路

本文由  网易云发布. Unity 2018开发者大会如期而至. 每年的Unity大会都致力呈现以新锐技术与社区精神为核心的全新Unity生态圈,传播Unity最前沿的技术功能,帮助各类创意人才使用Unity进行高效的内容创作,充分挖掘Unity潜力为各行业带来颠覆性的改变.今年同样如此,在Unity 2018开发者大会,开发者不仅可以看到最新.最炫的游戏,还能学习到很多游戏开发的知识. 如果你参加过Unity在北京.上海.广州等地的开发者大会,你可能已经听说过网易易盾这个品牌了,它是由网易内部

JAVA进阶之路(一)

初学的大三奋斗者,fighting!!! 下面是进阶之路 Java平台和语言最开始只是SUN公司在1990年12月开始研究的一个内部项目.SUN公司的一个叫做帕特里克·诺顿的工程师被自己开发的C和C语言编译器搞得焦头烂额,因为其中的API极其难用.帕特里克决定改用NeXT,同时他也获得了研究公司的一个叫做“Stealth 计划”的项目的机会. “Stealth 计划”后来改名为“Green计划”,JGosling(詹姆斯·高斯林) 和麦克·舍林丹也加入了帕特里克的工作小组.他们和其他几个工程师一