我們在使用移動APP項目時，當我們第一次打開應用時會出現(xiàn)引導頁，在使用apicloud進行開發(fā)移動項目時我們也需要考慮到怎樣實現(xiàn)引導頁的效果，我們可以使用UIScrollPicture模塊來實現(xiàn)。

1.引導頁顯示判斷

var UIScrollPicture; //輪播圖模塊對象
    var UIButton; //按鈕模塊對象
    var vButtonId; //按鈕模塊對象索引對象

    //程序啟動入口
    apiready = function() {
        //引導頁顯示判斷
        var isFirst = api.getPrefs({
            key: 'isFirst',
            sync: true,
        });
        // isFirst=false;
        if (!isFirst) {
            //啟動引導頁面
            fnStartGuidePage();
        } else {
            fnStartMainPage();
        }
    };

2.UIScrollPicture模塊引導頁設置

function fnStartGuidePage() {
        //設置頁面默認圖片;
        var tData = [
            'widget://res/guide1.jpg',
            'widget://res/guide2.jpg',
            'widget://res/guide3.jpg',
        ];
        UIScrollPicture = api.require('UIScrollPicture');
        UIScrollPicture.open({
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto' //此處用'auto'是為了適應某些機型頁面底部虛擬鍵的顯示／隱藏 切換
            },
            data: {
                paths: tData,
            },
            styles: {
                indicator: {
                    align: 'center',
                    color: 'rgba(255,255,255,0.4)',
                    activeColor: '#FFFFFF'
                }
            },
            contentMode: 'scaleToFill',
            auto: false, //禁止自動滾動
            loop: false, //禁止循環(huán)播放
        }, function(ret, err) {
            if (ret) {
                /*
                  //方法1  點擊末頁任意位置進入主頁面
                  if('click' == ret.eventType){
                     if(ret.index==3){
                       //關閉頁面，進入主頁面
                       fnStartMainPage();
                     }
                  }
                */
                //方法2  點擊末頁按鈕進入主頁面（使用前，需在控制臺添加UIButton模塊）
                //設計思路：添加一個UIButton模塊，在UIScrollPicture頁面滑動到末頁時顯示UIButton模塊，其余頁面隱藏按鈕模塊，在按鈕模塊添加點事件點擊模塊進入主頁面
                //添加末頁點擊進入主頁面方法
                if ('show' == ret.eventType) {
                    UIScrollPicture.addEventListener({
                        name: 'scroll'
                    }, function(ret, err) {
                        if (ret.status) {
                            if (ret.index == (tData.length - 1)) {
                                //顯示進入按鈕
                                fnShowStartBtn();
                            } else {
                                //隱藏進入按鈕
                                fnHideStartBtn();
                            }
                        }
                    });
                }

            }
        });
    }

3.引導頁結束跳轉(zhuǎn)到主頁面

//啟動程序主頁面
    function fnStartMainPage() {
        if (UIScrollPicture) {
            //緩存App啟動信息
            api.setPrefs({
                key: 'isFirst',
                value: '1'
            });
            //關閉引導頁模塊
            UIScrollPicture.close();
            //關閉方法2使用按鈕模塊
            if (UIButton) {
                UIButton.close({
                    id: vButtonId
                });
            }
        }
        //啟動主頁面
        api.openWin({
            name: 'main',
            url: 'html/main.html',
            bounces: false,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            slidBackEnabled: false,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    }

  3.1最后一頁中立即進入按鈕功能設置

//顯示進入APP按鈕
    function fnShowStartBtn() {
        if (!vButtonId && vButtonId != 0) {
            //初始化按鈕模塊
            UIButton = api.require('UIButton');
            UIButton.open({
                rect: {
                    x: api.winWidth / 2 - 50,
                    y: api.winHeight - 60,
                    w: 100,
                    h: 30
                },
                corner: 5,
                bg: {
                    normal: 'rgba(255,255,255,50)',
                    highlight: 'rgba(255,255,255,90)',
                    active: 'rgba(255,255,255,90)'
                },
                title: {
                    size: 20,
                    normal: '立即開啟',
                    highlightColor: '#000000',
                    activeColor: '#000adf',
                    normalColor: '#FFFFFF',
                    alignment: 'center'
                },
                fixed: true,
                move: false
            }, function(ret, err) {
                if ('show' == ret.eventType) {
                    vButtonId = ret.id;
                }
                if ('click' == ret.eventType) {
                    //關閉引導頁，進入主頁面
                    fnStartMainPage();
                }
            });
        } else {
            //模塊已初始化過，直接顯示
            UIButton.show({
                id: vButtonId
            });
        }
    }

    //隱藏進入按鈕
    function fnHideStartBtn() {
        if (UIButton) {
            UIButton.hide({
                id: vButtonId
            });
        }
    }

4.清除引導頁狀態(tài)緩存

//清除記錄引導頁狀態(tài)的本地緩存數(shù)據(jù)
    function fnClearCache(){
        api.removePrefs({
            key: 'isFirst'
        });
        api.toast({
            msg: '引導頁緩存數(shù)據(jù)清除成功！',
            duration: 2000,
            location: 'middle'
        });
    }