我们在使用移动APP项目时,当我们第一次打开应用时会出现引导页,在使用apicloud进行开发移动项目时我们也需要考虑到怎样实现引导页的效果,我们可以使用UIScrollPicture模块来实现。
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, //禁止循环播放 }, 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.引导页结束跳转到主页面
//启动程序主页面 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.清除引导页状态缓存
//清除记录引导页状态的本地缓存数据 function fnClearCache(){ api.removePrefs({ key: 'isFirst' }); api.toast({ msg: '引导页缓存数据清除成功!', duration: 2000, location: 'middle' }); }
上一篇: APICloud中下拉刷新的实现
下一篇: 前端开发时配合CMS的一些小规范