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

翻滚的胖子
2019-10-15 23:44:55
APP开发
APICloud

感谢【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）中增加返回键的监听，其代码如下