【apicloud】实现APP首次打开的引导页面

感谢【chobits4】的分享


1.当APP打开时,首先判断两个api.openWin,一个做引导页用的window(A),一个做引导页关闭后进入的window(B),
2.(如下判断代码):

var intro_ist = $api.getStorage('introt');
     if (!intro_ist) {
      api.openWin({
          name: 'index_intro',
          url: './html/intro_index.html',
          pageParam: {
              name: 'test1'
          }
      });
    }else {
      api.openWin({
         name: 'index_c',
         url: './html/index.html',
         pageParam: {
             name: 'test'
         }
     });
    } ;

3.其中$api.getStorage('introt'),便是是否为第一次安装的判断依据,其变量introt为其它页面设置
4.window(A)中通过api.openFrameGroup打开上三个图中的引导页,其代码如下:

api.openFrameGroup ({
             name: 's_intro',
             background: '#fff',
             scrollEnabled: true,
             rect: {
                  x: 0,
                  y: 0,
                  w: 'auto',
                  h: 'auto'
             },
             index: 0,
             frames: [{
                 name: 'frame1',
                 url: './intro_frm1.html',
                 bounces:false,
                 bgColor: 'widget://image/intro/intro_1.jpg'
                      }, {
                 name: 'frame2',
                 url: './intro_frm2.html',
                 bounces:false,
                 bgColor: 'widget://image/intro/intro_2.jpg'
             },{
                 name: 'frame3',
                 url: './intro_frm3.html',
                 bounces:false,
                 bgColor: 'widget://image/intro/intro_3.jpg'
             }]
         }, function(ret, err){
             if( ret ){
                  // alert( JSON.stringify( ret ) );
             }else{
                  // alert( JSON.stringify( err ) );
             }
         });

5. 如上代码,引导页的图片是通过bgColor传递,所以在传递的html页面一定要设置相应的html,body{height: 100%;background: rgba(0, 0, 0, 0);}属性
6.在引导页的第三页点击“立即体验”后,那么调用api.closeWin来关闭引导窗window(A),以及打开window(B)让其显示出来,在点击关闭的同时通过使用$api.setStorage('introt', 'true');设置变量introt变量给第三步中用

7.到此基本原理大家应该都清楚了,另外如果想要更好的APP体验的话,建议在window(B)以及window(A)中增加返回键的监听,其代码如下

  1. api.addEventListener({

  2.             name: 'keyback'

  3.         }, function(ret, err) {

  4.             api.closeWidget({});

  5.         });


翻滚的胖子博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论