歡迎頁 · APP模塊

# 歡迎頁目錄結構 ``` ├─html │ ├─welcome │ │ ├─welcome_frame_1.html 歡迎頁面1 │ │ ├─welcome_frame_2.html 歡迎頁面2 │ │ ├─welcome_frame_3.html 歡迎頁面3 │ │ ├─welcome_frame_4.html 歡迎頁面4 ├─image │ ├─welcome │ │ ├─1.png 歡迎圖片1 │ │ ├─2.png 歡迎圖片2 │ │ ├─3.png 歡迎圖片3 │ │ ├─4.png 歡迎圖片4 │ │ ├─arrow.png 跳過箭頭圖片 ├─welcome.html ``` * * * * * 模塊下載：http://pan.baidu.com/s/1nvnPWk5 密碼：hm0k 視頻教程：http://pan.baidu.com/s/1slrL4rb 密碼：4swi * * * * * ![](https://box.kancloud.cn/2016-08-25_57bec131913a2.png)![](https://box.kancloud.cn/2016-08-25_57bec131b8430.png)![](https://box.kancloud.cn/2016-08-25_57bec131cb96e.png)![](https://box.kancloud.cn/2016-08-25_57bec131e5f53.png)![](https://box.kancloud.cn/2016-08-25_57bec1320604e.png) * * * * * 代碼如下： ### welcome.html ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>title</title> <link rel="stylesheet" type="text/css" href="./css/api.css"/> <style> body { } </style> </head> <body></body> <script type="text/javascript" src="./script/api.js"></script> <script type="text/javascript"> apiready = function() { var welcomeShowed = $api.getStorage('welcomeShowed'); if (welcomeShowed) { //如果已經有存儲，打開main api.openWin({ name : 'main', url : 'html/main.html' }); } else { //如果沒有存儲，打開歡迎引導頁 api.openFrameGroup({ name : 'welcomeFrames', scrollEnabled : true, rect : { x : 0, y : 0, w : 'auto', h : 'auto' }, index : 0, frames : [{ name : 'welcome_frame_1', url : 'html/welcome/welcome_frame_1.html', bgColor: './image/welcome/1.png', bounces: false, vScrollBarEnabled: false, hScrollBarEnabled: false }, { name : 'welcome_frame_2', url : 'html/welcome/welcome_frame_2.html', bgColor: './image/welcome/2.png', bounces: false, vScrollBarEnabled: false, hScrollBarEnabled: false }, { name : 'welcome_frame_3', url : 'html/welcome/welcome_frame_3.html', bgColor: './image/welcome/3.png', bounces: false, vScrollBarEnabled: false, hScrollBarEnabled: false }, { name : 'welcome_frame_4', url : 'html/welcome/welcome_frame_4.html', bgColor: './image/welcome/4.png', bounces: false, vScrollBarEnabled: false, hScrollBarEnabled: false }] }, function(ret, err) { var index = ret.index; var name = ret.name; }); //引導頁完成后，建立存儲 $api.setStorage('welcomeShowed',1); } }; </script> </html> ``` ### welcome_frame_1.html \ welcome_frame_2.html \ welcome_frame_3.html 都一樣 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>title</title> <link rel="stylesheet" type="text/css" href="../../css/api.css"/> <style> html,body { height: 100%; background: transparent;} header { height: 50px; position: relative; } .skip { position: absolute; bottom: 0px; right: 15px; width: 90px; height: 38px; line-height: 38px; border: solid rgb(211,211,211) 1px; border-radius: 38px; color: #000; font-size: 16px; } .skip>span { padding-left:20px; } .skip>img { padding-top: 12px; vertical-align: top; height: 13px; } </style> </head> <body> <header> <div class="skip" tapmode onclick="fnSkip();"> <span>跳過</span> <img src="../../image/welcome/arrow.png" /> </div> </header> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> function fnSkip () { api.setFrameGroupAttr({ name: 'welcomeFrames', hidden: true }); api.openWin({ name: 'main', url: '../main.html', bounces: false, pageParam: {key : ''}, animation: { type: 'none' } }); } apiready = function(){ var header = $api.dom('header'); $api.fixIos7Bar(header); }; </script> </html> ``` ### welcome_frame_4.html ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>title</title> <link rel="stylesheet" type="text/css" href="../../css/api.css"/> <style> html,body { height: 100%; background: transparent; } .start { position: absolute; left: 50%; bottom: 44px; width: 124px; height: 44px; background-color: rgb(230,92,53); border: solid rgb(229,84,40) 1px; border-radius: 6px; -webkit-transform: translateX(-50%); transform: translateX(-50%); line-height: 44px; color: #fff; font-size: 16px; text-align: center; } </style> </head> <body> <div class="start" tapmode onclick="fnStart();">立即啟動</div> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> function fnStart () { api.setFrameGroupAttr({ name: 'welcomeFrames', hidden: true }); api.openWin({ name: 'main', url: '../main.html', bounces: false, pageParam: {key : ''}, animation: { type: 'none' } }); } apiready = function(){ var header = $api.dom('header'); $api.fixIos7Bar(header); }; </script> </html> ```