【App开发笔记】2.7 添加第一个模块-UILoading

源码地址

2.7.1 在Apicloud studio中右键项目根目录“模块管理”

【App开发笔记】2.7 添加第一个模块-UILoading_第1张图片
模块管理

2.7.2 选择模块库

选择模块库

2.7.3 找到UIloading并点击右上角的加号

【App开发笔记】2.7 添加第一个模块-UILoading_第2张图片
点击右上角的加号

2.7.4 编译自定义loader并安装

【App开发笔记】2.7 添加第一个模块-UILoading_第3张图片
编译自定义loader

2.7.5 将我们【2.6 AI+AE做一个简单的loading动图】 中制作的png序列放到image/middle_loading中

【App开发笔记】2.7 添加第一个模块-UILoading_第4张图片
放到image/middle_loading中

2.7.5 封装模块的接口

js/common.js

function OpenLoadingMiddle() {
    var activity = api.require('UILoading');
    var content=[];
    for(var i=0;i<50;i++){
        content.push({frame: 'widget://image/middle_loading/'+i+'.png'})
    }
    activity.keyFrame({
        rect: {
            w: 34,
            h: 34
        },
        styles: {
            bg: 'rgba(0,0,0,0)',
            corner: 5,
            interval: 40,
            frame: {
                w: 34,
                h: 34
            }
        },
        content:content
    });

}
function CloseLoadingMiddle() {
    var uiloading = api.require('UILoading');
    uiloading.closeKeyFrame();
}

2.7.6 调用一下试试

index.html



2.7.7 同步到手机

【App开发笔记】2.7 添加第一个模块-UILoading_第5张图片
效果图

你可能感兴趣的:(【App开发笔记】2.7 添加第一个模块-UILoading)