# 欢迎页
目录结构
```
├─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>
```
- APP模块
- 欢迎页
- 头部模块
- 底部模块
- 图文列表
- 商品展示
- 文字列表
- 内容页一
- 评论页
- N宫格
- 获得上一级的栏目名称
- 搜索模块
- 图标
- 幻灯模块
- 消息页
- 个人中心
- 个人中心—我的收藏
- 个人中心—资料修改
- 个人中心—我的钱包(账户)
- 咨询页面
- APP模板
- 注册 页面一
- 注册 页面二
- 登录 页面一
- 登录 页面二
- 忘记密码 页面一
- 会员中心 首页一
- 会员中心 首页二
- 会员中心 首页三
- 会员中心 资料修改
- 申请审核步骤
- 商品订单一
- 游戏页面
- 新闻列表页
- 图文列表页
- 商品列表页
- 商品详情页
- 聊天
- 消息列表
- 聊天界面
- 发布需求
- 前端框架
- CSS Framework
- trim 字符处理
- dom 选择器
- 样式
- evt 事件
- 选择元素
- 属性
- 文本
- 位置
- json
- 设置
- 提示
- AJAX
- storage 本地存储
- API对象
- 常用函数
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用图片
- asd